2061200 - Implement title input behavior and validation

Status: RESOLVED FIXED

(Calendar :: Calendar Frontend, task)

Description

[Alex Schmitz]

Summary:
Let the user enter or change the event title. Keep changes in the draft: the
unsaved values in the dialog. Typing must not change the saved event.

Require a title before Save. Limit new or replacement titles to 180 characters,
but do not shorten an existing long title just because the dialog loads it.

Links:

• Zeplin title input
• Interaction guide: Event title
• Redux: Selectors and Rendering
• Open question: Event title label

Open decision:

• Zeplin shows no visible label. Provide an accessible name for screen readers.
  Product/design must confirm the label pattern, including how the placeholder
  is used as a hint.

Acceptance criteria:

• A new event starts with an empty title. Show "New event" as the hint, not as
  an entered title.
• When editing, show the loaded event's title. If it has no title, show
  "Untitled event" as the hint and leave the draft title empty.
• Keep an existing title longer than 180 characters unchanged when loading it.
  A title the user creates or edits as a replacement must be no longer than
  180 characters. Saving another field must not silently shorten the title.
• Typing changes only the title and its validation result in the draft. It
  does not change the loaded event or calendar.
• Require a title before Save. For an empty title, show the "Required" helper
  text from the validation state.
• Keep the input one line high. Let the user reach text outside the visible
  area with Left and Right arrow keys. Provide the full title to screen readers
  and in a tooltip when the displayed title is cut off.
• When the dialog switches from event A to B, show B's title. A late load or
  input action for A must not replace it.
• Only a successful Save writes the title to the event.

Required implementation details:

• Store the original and current titles as serializable text in the draft.
  Keep hint text out of the stored title.
• Use Redux updates when the current session, title, or validation changes.
  A session identifies one create or edit operation. Do not add a getter that
  reads the store directly.
• Reset the title through the shared draft reset when the source event changes.
  Check that load and input actions belong to the current session.
• Keep the original loaded title as the comparison value, including titles
  longer than 180 characters. Do not truncate it when creating the draft.
• Save reads the title from the complete draft. This field does not save events.

Minimum test coverage:

• Check new events, events with titles, and existing events with no title.
• Check that hints are displayed but never stored as titles.
• Check title changes and validation in the draft without changing the event.
• Check the required-title error and the 180-character replacement limit.
• Load a title longer than 180 characters and change another field. Check that
  the original title remains unchanged.
• Check initial and later Redux updates. Switch from A to B and check that old
  loads and input actions cannot replace B's title.
• Check the one-line input, arrow-key access, tooltip, and full screen-reader title.
• Check the accessible name and run axe checks where supported.

Out of scope:

• Implementing the shared session or draft model and loading source events.
• Calendar or date/time fields.
• Save/Delete controls and saving or deleting events.

Comment 1

[Jess]

Attachment: Bug 2061200 - Implement title input behavior and validation. r=#thunderbird-front-end-reviewers

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/86222da3156c
Implement title input behavior and validation. r=tobyp,arschmitz