Discussion — accessibility

Keyboard

  • Everything operable is a real control: the composer and the edit field are <textarea>, the actions are <button>s, the primary action is a <button>. Tab follows the visual order: comment actions in each card, then the composer, then Komentovat.
  • The comment actions are hidden until hover but stay in the Tab order; :focus-within on the card reveals them while focus is inside, so a keyboard user sees what they are on.
  • On a phone the actions are one ⋮ menu button that is always visible; the menu follows the shared menu keyboard model (Enter or Space opens, arrows move, Escape closes).
  • Deleting asks for the canonical confirmation dialog, which traps focus and closes on Escape.
  • Editing starts with the focus in the edit field (autoFocus).

ARIA

  • A comment is an <article> with its <header>, so a screen reader can move between comments as between articles. The author and the age are real text in the header, not colour or position.
  • The section heading is an <h2> ("Aktivita"). The composer's field is labelled Text komentáře and the edit field Upravit komentář; the two have different names on purpose, because both can be on screen at once and two identically named fields cannot be told apart.
  • The icon-only actions are named by title (Upravit komentář, Smazat komentář); the ⋮ menu button is named Akce komentáře.
  • The system event is plain text; its history glyph is decorative.
  • The error state is role="alert", so a failed load is announced when it appears.
  • The participants line is plain text; who is included and why is in its title, which is a hover hint and not a substitute for the line itself.
  • The author avatar is decorative; the name beside it carries the meaning.
  • The thread has no live region. A new comment is a result of the user's own action.

Focus

  • Focus is never taken on load.
  • Opening the editor moves focus into the edit field. After Uložit or Zrušit the field is removed and focus is not moved on purpose, so it falls back to the document (a known limit, below).
  • After Komentovat the composer is cleared by the server round-trip and the button disables while the field is empty; focus stays wherever the browser leaves it.
  • The error state's retry button is reachable by Tab; the composer is not rendered next to it, so there is nothing to focus by mistake.
  • The foundation focus ring applies to every control and is not switched off.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

  • Comment name and body are in ink (--ink-900, --ink-800) on --bg-canvas — above AA in both themes.
  • The event line is secondary ink; the ages and the event time are --fg-muted (2.85:1 light, 3.63:1 dark), below AA by design: they are metadata, and the content is carried by the name and the text.
  • The participants line is acrm-muted for the same reason; the full explanation is in its title.
  • Komentovat and Uložit use the shared primary button tokens.

Known limits

  • Focus is not restored after saving an edit or after sending a comment; a keyboard user lands back at the top of the document and has to Tab to the thread.
  • The title of the participants line is a pointer hint; it is not read on touch and not reliably by every screen reader, so the reasons are not available to those users.
  • Ages and the event time sit below AA contrast.
  • No live announcement for a sent comment; the user sees it appear at the end of the thread.
  • @mention is plain text until the BE phase, so there is no suggest list to operate.

Source: docs/discussion/discussion.a11y.md · GitLab