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, thenKomentovat. - The comment actions are hidden until hover but stay in the Tab order;
:focus-withinon 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 labelledText komentářeand the edit fieldUpravit 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 namedAkce 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žitorZrušitthe field is removed and focus is not moved on purpose, so it falls back to the document (a known limit, below). - After
Komentovatthe 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-mutedfor the same reason; the full explanation is in itstitle. KomentovatandUložituse 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
titleof 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