Automated WCAG 2.1 AA a11y testing across all themes/modes by sjoerdbeentjes · Pull Request #38 · SURFnet/DesignSystem

sjoerdbeentjes · 2026-06-22T13:06:08Z

Adds an automated WCAG 2.1 AA pipeline that sweeps every Storybook story across all themes and modes from @surfnet/tokens, in both React and Angular.

What

Shared config in @surfnet/storybook-config: browser-safe a11yParameters (merged into both previews, also scopes the addon-a11y panel) and a node-only runStoryA11yAudit behind a ./test-runner subpath so it never enters a preview bundle.
Builder-agnostic runner: @storybook/test-runner + axe-playwright against a served Storybook, so one setup covers React (Vite) and Angular (webpack). Each story is audited once per theme × mode (11 themes × 2 modes), writing a per-story JSON report.
Wiring: per-package test:a11y / test:a11y:ci scripts, a turbo task, a root script, and a CI step that runs report-only (continue-on-error) and uploads the JSON as an artifact.

Notes

CI is intentionally report-only until the token contrast backlog is triaged; flip to blocking by removing continue-on-error.

github-actions · 2026-06-22T14:19:16Z

♿ Accessibility audit — WCAG 2.1 AA

⚠️ 187 finding(s) — 155 contrast (per theme·mode), 32 theme-independent · across 378 stories / 10584 audited combinations. Report-only — does not block merge.

@surfnet/curve-angular — 149 finding(s)

Badge — 3 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Status List — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Variants — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Button — 4 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Sizes — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Variants — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

With Icon — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Calendar — 113 finding(s)

Default — 28 finding(s)

default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default-grey-background
- light — #a4a4a4 on #f5f5f5 · ratio 2.28 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
surf-blue-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-green
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-pilot
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)

Disabled Dates — 28 finding(s)

default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default-grey-background
- light — #a4a4a4 on #f5f5f5 · ratio 2.28 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
surf-blue-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-green
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-pilot
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)

Dropdown Caption — 29 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes
default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default-grey-background
- light — #a4a4a4 on #f5f5f5 · ratio 2.28 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
surf-blue-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-green
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-pilot
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)

Multiple — 28 finding(s)

default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
shadcn-default-grey-background
- light — #a4a4a4 on #f5f5f5 · ratio 2.28 — color-contrast (1.4.3)
- dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
surf-blue-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-blue-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-green
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-pilot
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-purple-orange
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
surf-yellow
- light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
- dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)

DataTable — 1 finding(s) · color-contrast only

Custom Toolbar — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Empty — 2 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

With Multiple Actions — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Item — 1 finding(s) · color-contrast only

With Header And Footer — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

NativeSelect — 5 finding(s)

Default — 1 finding(s)

Select element must have an accessible name — select-name · all themes/modes

Disabled — 1 finding(s)

Select element must have an accessible name — select-name · all themes/modes

Invalid — 1 finding(s)

Select element must have an accessible name — select-name · all themes/modes

Sizes — 1 finding(s)

Select element must have an accessible name — select-name · all themes/modes

With Option Groups — 1 finding(s)

Select element must have an accessible name — select-name · all themes/modes

Pagination — 15 finding(s)

Numbered Pagination — 15 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes
default
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
groenvermogen-nkph2
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
shadcn-default
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
shadcn-default-grey-background
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-blue-purple
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-blue-turquoise
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-blue-yellow
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-green
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-orange
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-orange-turquoise
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-pilot
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-purple
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-purple-orange
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
surf-yellow
- dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)

Select — 2 finding(s)

Default — 1 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes

Grouped — 1 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes

Sidebar — 2 finding(s) · color-contrast only

Default — 2 finding(s)

surf-blue-yellow
- dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)
surf-yellow
- dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)

Tabs — 1 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

@surfnet/curve-react — 38 finding(s)

Badge — 3 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Status List — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Variants — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Button — 4 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Sizes — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Variants — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

With Icon — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Card — 1 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Combobox — 1 finding(s)

Multiple — 1 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes

DataTable — 1 finding(s) · color-contrast only

Custom Toolbar — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Empty — 2 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

With Multiple Actions — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

Item — 2 finding(s)

Group — 1 finding(s)

Certain ARIA roles must contain particular children — aria-required-children · all themes/modes

With Header And Footer — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

NativeSelect — 2 finding(s)

Disabled — 1 finding(s)

Select element must have an accessible name — select-name · all themes/modes

Invalid — 1 finding(s)

Select element must have an accessible name — select-name · all themes/modes

Pagination — 1 finding(s)

NumberedPagination — 1 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes

Resizable — 1 finding(s)

Composed Layout — 1 finding(s)

Scrollable region must have keyboard access — scrollable-region-focusable · all themes/modes

Select — 3 finding(s)

Default — 1 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes

Disabled — 1 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes

Grouped — 1 finding(s)

Buttons must have discernible text — button-name (4.1.2) · all themes/modes

Sidebar — 2 finding(s) · color-contrast only

Default — 2 finding(s)

surf-blue-yellow
- dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)
surf-yellow
- dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)

Slider — 6 finding(s)

Default — 1 finding(s)

Form elements must have labels — label · all themes/modes

Disabled — 1 finding(s)

Form elements must have labels — label · all themes/modes

Horizontal — 1 finding(s)

Form elements must have labels — label · all themes/modes

Range — 1 finding(s)

Form elements must have labels — label · all themes/modes

Vertical — 1 finding(s)

Form elements must have labels — label · all themes/modes

With Field — 1 finding(s)

Form elements must have labels — label · all themes/modes

Switch — 1 finding(s)

Default — 1 finding(s)

ARIA toggle fields must have an accessible name — aria-toggle-field-name · all themes/modes

Tabs — 1 finding(s) · color-contrast only

Default — 1 finding(s)

groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)

ToggleGroup — 7 finding(s)

Default — 1 finding(s)

Elements must only use supported ARIA attributes — aria-allowed-attr · all themes/modes

Disabled — 1 finding(s)

Elements must only use supported ARIA attributes — aria-allowed-attr · all themes/modes

Sizes — 1 finding(s)

Elements must only use supported ARIA attributes — aria-allowed-

…truncated; see the a11y-reports artifact for the full list.

loofpc · 2026-07-02T11:06:07Z

+
+      # Scoped to @surfnet/storybook-config, which pins playwright, so both
+      # framework runs share one browser.
+      - name: Install Playwright Chromium


Hoe is de performance? Ik zou verwachten dat we in een CI-stap een headless browser gebruiken.

* feat: add documentation pages in Storybook * feat: add a11y documentation pages in Storybook #119 * feat: add AI agents/personas * feat: expand on a11y documentation pages for structure * feat: expand on a11y documentation pages for structure * feat: expand on a11y documentation pages for structure * feat: expand on a11y documentation pages for structure * feat: expand on a11y documentation pages for structure * Update documentation

# Conflicts: # pnpm-lock.yaml

# Conflicts: # packages/storybook-config/package.json # pnpm-lock.yaml

sjoerdbeentjes force-pushed the feat/a11y-testing branch 5 times, most recently from b563368 to 871c744 Compare June 22, 2026 14:18

sjoerdbeentjes force-pushed the feat/a11y-testing branch from 65e29e3 to 70b2499 Compare June 23, 2026 07:28

sjoerdbeentjes linked an issue Jun 23, 2026 that may be closed by this pull request

WCAG 2.1 AA-check op alle PoC-componenten #22

Open

sjoerdbeentjes force-pushed the feat/a11y-testing branch 3 times, most recently from 8b13cff to fc78595 Compare June 30, 2026 06:45

sjoerdbeentjes force-pushed the feat/a11y-testing branch 4 times, most recently from 52bcb10 to 5afc87c Compare July 1, 2026 18:46

loofpc reviewed Jul 2, 2026

View reviewed changes

sjoerdbeentjes force-pushed the feat/a11y-testing branch 2 times, most recently from 573772a to 4c66f62 Compare July 6, 2026 07:43

github-actions Bot added a commit that referenced this pull request Jul 6, 2026

a11y screenshots for PR #38

b82312d

sjoerdbeentjes force-pushed the feat/a11y-testing branch from 2ff8134 to d06f9c4 Compare July 6, 2026 14:18

github-actions Bot added a commit that referenced this pull request Jul 6, 2026

a11y screenshots for PR #38

ed368c4

sjoerdbeentjes force-pushed the feat/a11y-testing branch from 80cb843 to 35e6fa9 Compare July 6, 2026 14:41

github-actions Bot added a commit that referenced this pull request Jul 6, 2026

a11y screenshots for PR #38

4344e12

sjoerdbeentjes force-pushed the feat/a11y-testing branch from 35e6fa9 to 6bad9d1 Compare July 7, 2026 07:18

github-actions Bot added a commit that referenced this pull request Jul 7, 2026

a11y screenshots for PR #38

43049b3

sjoerdbeentjes force-pushed the feat/a11y-testing branch from 6bad9d1 to bc7b4c3 Compare July 14, 2026 15:22

github-actions Bot added a commit that referenced this pull request Jul 14, 2026

a11y screenshots for PR #38

4bd0d4b

sjoerdbeentjes force-pushed the feat/a11y-testing branch from bc7b4c3 to 191e282 Compare August 25, 2026 08:05

github-actions Bot added a commit that referenced this pull request Aug 25, 2026

a11y screenshots for PR #38

2944ca6

Add a11y config and audit module to @surfnet/storybook-config

155c141

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

01f1cce

anneke added 2 commits September 1, 2026 15:34

fix: combobox clear button missing label

8d45420

fix: curve data table needs label on button

12d9567

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

42ae269

anneke added 2 commits September 1, 2026 15:49

fix: Add aria-labels to buttons in input-group

6e56220

fix: give nativeSelect accessible name

78f29d0

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

2665508

anneke added 2 commits September 1, 2026 16:49

fix: input-OTP accessibility

591849d

fix: breadcrumb accessibility, removed obsolete attributes

6dad9fd

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

f78aa9c

anneke added 3 commits September 1, 2026 17:30

fix: add roles to command element

31bfa29

fix: add tabindex 0 to scroll element

0d7fb1b

fixup fix: add roles to command element

ce284e2

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

9b455c6

anneke added 2 commits September 1, 2026 18:11

fix: set label on button

1ab5d36

fix: improve layout of accessibility feedback

5e6b7d3

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

b2bd3f6

anneke added 2 commits September 1, 2026 18:20

fix: remove Command (temporarily?)

0076bbb

fix: add missing aria-labels

950bc0e

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

d8d43c2

anneke added 2 commits September 1, 2026 18:30

fix: improve layout of accessibility feedback

01a8638

fix: improve layout of accessibility feedback

f1f54e9

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

3672fc1

fix: improve layout of accessibility feedback

8b70bbb

github-actions Bot added a commit that referenced this pull request Sep 1, 2026

a11y screenshots for PR #38

7c02de9

anneke and others added 2 commits September 8, 2026 08:40

Merge remote-tracking branch 'origin/main' into HEAD

c2265c8

# Conflicts: # pnpm-lock.yaml

anneke force-pushed the main branch from e24f4d8 to 27fafb9 Compare September 8, 2026 07:04

Merge remote-tracking branch 'origin/main' into HEAD

3cd4e58

# Conflicts: # packages/storybook-config/package.json # pnpm-lock.yaml

github-actions Bot added a commit that referenced this pull request Sep 8, 2026

a11y screenshots for PR #38

0448e60

Uh oh!

Conversation

sjoerdbeentjes commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Notes

Uh oh!

github-actions Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

♿ Accessibility audit — WCAG 2.1 AA

Default — 1 finding(s)

Status List — 1 finding(s)

Variants — 1 finding(s)

Default — 1 finding(s)

Sizes — 1 finding(s)

Variants — 1 finding(s)

With Icon — 1 finding(s)

Default — 28 finding(s)

Disabled Dates — 28 finding(s)

Dropdown Caption — 29 finding(s)

Multiple — 28 finding(s)

Custom Toolbar — 1 finding(s)

Default — 1 finding(s)

With Multiple Actions — 1 finding(s)

With Header And Footer — 1 finding(s)

Default — 1 finding(s)

Disabled — 1 finding(s)

Invalid — 1 finding(s)

Sizes — 1 finding(s)

With Option Groups — 1 finding(s)

Numbered Pagination — 15 finding(s)

Default — 1 finding(s)

Grouped — 1 finding(s)

Default — 2 finding(s)

Default — 1 finding(s)

Default — 1 finding(s)

Status List — 1 finding(s)

Variants — 1 finding(s)

Default — 1 finding(s)

Sizes — 1 finding(s)

Variants — 1 finding(s)

With Icon — 1 finding(s)

Default — 1 finding(s)

Multiple — 1 finding(s)

Custom Toolbar — 1 finding(s)

Default — 1 finding(s)

With Multiple Actions — 1 finding(s)

Group — 1 finding(s)

With Header And Footer — 1 finding(s)

Disabled — 1 finding(s)

Invalid — 1 finding(s)

NumberedPagination — 1 finding(s)

Composed Layout — 1 finding(s)

Default — 1 finding(s)

Disabled — 1 finding(s)

Grouped — 1 finding(s)

Default — 2 finding(s)

Default — 1 finding(s)

Disabled — 1 finding(s)

Horizontal — 1 finding(s)

Range — 1 finding(s)

Vertical — 1 finding(s)

With Field — 1 finding(s)

Default — 1 finding(s)

Default — 1 finding(s)

Default — 1 finding(s)

Disabled — 1 finding(s)

Sizes — 1 finding(s)

Uh oh!

loofpc Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sjoerdbeentjes commented Jun 22, 2026 •

edited

Loading

github-actions Bot commented Jun 22, 2026 •

edited

Loading