Note card — accessibility

Keyboard

• The card is a real <button>: Tab reaches it, Enter and Space open the note.
• The grid is a plain container, so Tab order follows the visual order of the cards.
• There is no per-card menu, so nothing else in the card competes for focus.

ARIA

• The card's accessible name is its content in reading order: title, body, author, date.
• An empty title or body is read as its placeholder (Bez názvu, Bez obsahu) rather than as silence.
• The author avatar is decorative; the name next to it carries the meaning.
• The loading grid sets aria-busy and its skeleton cards are aria-hidden, so assistive technology is not read a wall of empty boxes.

Focus

• .note-card:focus-visible declares its own ring (outline: 2px solid var(--accent); outline-offset: 2px) on top of the foundation ring, so the rounded card shows focus clearly.
• Focus is not moved by hover and never taken on load.

Contrast

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

• Title in ink on --surface-100 — above AA in both themes.
• Body text is secondary; the muted placeholders (--fg-muted = 2.85:1 light, 3.63:1 dark) are below AA on purpose, because they mark absence.
• Footer author and date are muted at the same level.
• Focus ring --accent = 4.44:1 light, 3.83:1 dark.

Known limits

• The body's five-line clamp hides the rest with no visual hint other than the cut; the full text is one click away.
• Placeholders and the footer sit at the muted contrast limit.
• The card is not exported as a component, so screens outside the notes grid cannot reuse it without copying markup.