Deal card — accessibility

Keyboard

• Defect (measured): the card cannot be opened by keyboard. The root is a plain <div onClick> — no role="button", no tabIndex, no key handler — so a deal on the board is reachable only with a mouse, and there is no focus state to show where the user is. The Stat tile does the same job correctly (role="button" + tabIndex=0 + Enter/Space) and is the pattern to copy.
• The add-task and add-note controls in the footer are real buttons and are reachable by Tab, so today the footer is keyboard-operable while the card itself is not.

ARIA

• The card is a <div>: it announces its content in reading order (name, value, subtitle, products, counts) but is not exposed as a control.
• The counts are numbers next to icons; the icon alone never carries the meaning because the number is read with it.
• selected is a visual state only — nothing tells assistive technology which deal's drawer is open.
• Drag and drop is pointer-only (native HTML5 DnD); there is no keyboard path for moving a deal between columns.

Focus

• No focus state exists on the card, because the card is not focusable.
• The footer buttons take the foundation ring from ds.css.

Contrast

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

• Name and value in ink on --surface-100 — above AA in both themes.
• Subtitle, products and counts use muted tones (--fg-muted = 2.85:1 light) — below AA for text.
• The overdue date uses --critical-ink = 5.37:1 light, 5.80:1 dark — passes AA, and it also carries a dot, so the state is not colour alone.
• selected is an accent border plus a ring — a non-text indicator above the 3:1 minimum.

Known limits

• The card is mouse-only: no keyboard activation, no focus state, no keyboard drag.
• The selected state is not announced.
• Secondary text sits at the muted contrast limit in light theme.