Notifications — accessibility

Keyboard

  • The bell is a real <button> with aria-label="Oznámení", so Tab reaches it and Enter opens the panel.
  • Inside the panel the tabs, Označit vše, the close button, every Zobrazit link and the footer button are all real buttons and are reachable in order.
  • A row is not. .nitem is a <div> with an onClick and no role and no tabindex (measured: {tag: DIV, role: null, tabindex: null}). Opening a notification from the keyboard is only possible through its Zobrazit link, and the large, obvious target is mouse-only.
  • The fix is the StatTile pattern: role="button", tabIndex={0}, and Enter/Space handlers on the row.

ARIA

  • The panel is role="dialog" with aria-label="Oznámení".
  • The tabs are plain buttons with an active class — they are not role="tab" in a tablist, so they are announced as two buttons rather than as a filter with a selected state. Nothing exposes which one is on.
  • The unread dot .nitem-dot is a decorative element with no text; the read/unread state reaches assistive technology only through the class, i.e. not at all.
  • The lead icon is decorative and its tone is not announced.
  • New notifications arriving are not announced; there is no live region.

Focus

  • Every real button takes the foundation ring from ds.css (outline: 2px solid var(--accent); outline-offset: 1px).
  • The rows, having no tabindex, never show a ring.
  • The panel does not trap focus and does not restore focus to the bell when it closes.

Contrast

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

  • Row text .nitem-t in ink — 17.59:1 light, 14.53:1 dark.
  • .nitem-meta and the empty-state sub-line use the muted tone — 2.85:1 light, 3.63:1 dark: below AA.
  • Lead icon tones: --accent 4.44 / 3.83 · --positive 3.10 / 5.50 · --warning 1.80:1 light / 9.45 dark · --critical-ink well clear. The warning tone is under the non-text threshold in the light theme.
  • The head badge .acrm-count.accent is --accent-ink on --accent-tint — 4.58:1 light, 5.37:1 dark.

Known limits

  • Rows are mouse-only. This is the significant gap: the primary target of the whole panel cannot be operated from the keyboard.
  • The filters are not exposed as tabs, so the selected filter is not announced.
  • Unread is conveyed by a coloured dot and a background tint alone.
  • Nothing announces arriving notifications, and the panel does not manage focus on open or close.

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