[anneke]

Summary

Fixed accessibility issues as found in https://thefrontkit.com/blogs/shadcn-ui-accessibility-audit-2026 .

Run this branch locally if possible and check out the changes from the checklist:

Button focus outline (Components → Button → Variants)

• Press Tab through all variants. Is the 2px blue outline with a 2px gap clear without feeling heavy?
• Destructive: does the red outline read as focus, not as an error?
• Repeat in dark mode and in one or two other themes (e.g. surf-green, surf-purple). Does --primary-strong work as the focus colour, or should the --ring token be fixed in Figma instead?
• Button Group / Input Group: do the outlines of neighbouring buttons overlap or look cramped?
• Does the button's focus style now feel out of line with inputs and selects, which still use the old soft ring? (see Change default focus style from grey to blue #131)

Context menu (Components → Context Menu → all stories)

• Tab to the dashed area. Is the focus outline visible and does it look the same as on buttons?
• Press Shift+F10. Does the menu open in a sensible place (below the area, left-aligned)?
• Press Escape. Focus returns to the area. Does that feel natural?
• The "⇧⌘P" shortcut hint has been removed from the stories. Do we want shortcut hints at all, and only for shortcuts that really work?
• Should every context-menu action also be reachable through something visible, e.g. a "More actions" button?

Combobox (Components → Combobox → Default, Grouped, Multiple, Disabled)

• Every example now has a visible label above it. Are the spacing and label style right?
• Multiple: does the label sit well above the chips row?

Calendar / Date Picker (Angular only: Components → Calendar → Dropdown Caption; Components → Date Picker)

• Nothing changed visually. Use a screen reader to check that days are read as full dates ("Wednesday 4 November 2026") and that changing month is announced.
• Language: day and month names follow the browser's language, but button labels ("Go to the next month") are English. Which language should Curve use?

Related issue

Closes #250

Type of change

• Fix
• New feature / variant
• Breaking change
• Docs / repo tooling (no package code changed)
• Chore / refactor

Checklist

• pnpm build, pnpm lint, and pnpm format pass
• Storybook story added/updated to cover the change (variants, sizes, states)
• Visual snapshots updated (pnpm test:visual:update after pnpm build-storybook) if appearance changed
• Changeset added (pnpm changeset) — required for any change to @surfnet/curve-react or @surfnet/curve-angular; N/A for docs/CI-only changes
• React and Angular kept in parity, if applicable (contract updated in @surfnet/curve-contracts)

Screenshots

N/A

[github-actions]

♿ Accessibility audit — WCAG 2.2 AA

✅ No violations across 397 stories / 15086 theme·mode combinations in @surfnet/curve-angular, @surfnet/curve-react.

Automated axe covers ~30–50% of WCAG 2.2 AA. Keyboard, screen-reader and reflow checks still need a manual pass. Full per-story JSON is in the run’s a11y-reports artifact.