Notifications — accessibility
Keyboard
- The bell is a real
<button>witharia-label="Oznámení", so Tab reaches it and Enter opens the panel. - Inside the panel the tabs,
Označit vše, the close button, everyZobrazitlink and the footer button are all real buttons and are reachable in order. - A row is not.
.nitemis a<div>with anonClickand noroleand notabindex(measured:{tag: DIV, role: null, tabindex: null}). Opening a notification from the keyboard is only possible through itsZobrazitlink, and the large, obvious target is mouse-only. - The fix is the
StatTilepattern:role="button",tabIndex={0}, and Enter/Space handlers on the row.
ARIA
- The panel is
role="dialog"witharia-label="Oznámení". - The tabs are plain buttons with an
activeclass — they are notrole="tab"in atablist, 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-dotis 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-tin ink — 17.59:1 light, 14.53:1 dark. .nitem-metaand the empty-state sub-line use the muted tone — 2.85:1 light, 3.63:1 dark: below AA.- Lead icon tones:
--accent4.44 / 3.83 ·--positive3.10 / 5.50 ·--warning1.80:1 light / 9.45 dark ·--critical-inkwell clear. The warning tone is under the non-text threshold in the light theme. - The head badge
.acrm-count.accentis--accent-inkon--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.