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

⚠️ 210 finding(s) — 144 contrast (per theme·mode), 66 theme-independent · across 363 stories / 10164 audited combinations. Report-only — does not block merge.

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

Badge — 24 finding(s)

As Link — 11 finding(s)

default
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #84cc16 on #ffffff · ratio 1.97 — color-contrast (1.4.3)
surf-blue-purple
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-turquoise
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-yellow
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-green
- light — #00d37f on #ffffff · ratio 1.97 — color-contrast (1.4.3)
surf-orange
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-purple
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-purple-orange
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-yellow
- light — #ffe500 on #ffffff · ratio 1.27 — color-contrast (1.4.3)

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 — 11 finding(s)

default
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
surf-blue-purple
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-turquoise
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-yellow
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-green
- light — #00d37f on #ffffff · ratio 1.97 — color-contrast (1.4.3)
surf-orange
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-purple
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-purple-orange
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-yellow
- light — #ffe500 on #ffffff · ratio 1.27 — color-contrast (1.4.3)

Button — 4 finding(s)

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 — 56 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)

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)

Combobox — 4 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

Multiple — 1 finding(s)

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

Command — 8 finding(s)

Default — 3 finding(s)

ARIA input fields must have an accessible name — aria-input-field-name · all themes/modes
Required ARIA attributes must be provided — aria-required-attr (4.1.2) · all themes/modes
Certain ARIA roles must contain particular children — aria-required-children · all themes/modes

Disabled Item — 2 finding(s)

ARIA input fields must have an accessible name — aria-input-field-name · all themes/modes
Required ARIA attributes must be provided — aria-required-attr (4.1.2) · all themes/modes

Empty — 3 finding(s)

ARIA input fields must have an accessible name — aria-input-field-name · all themes/modes
Required ARIA attributes must be provided — aria-required-attr (4.1.2) · all themes/modes
Certain ARIA roles must contain particular children — aria-required-children · all themes/modes

CurveDataTable — 1 finding(s)

Default — 1 finding(s)

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

DataTable — 1 finding(s)

Custom Toolbar — 1 finding(s)

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

Empty — 2 finding(s)

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)

Input Group — 2 finding(s)

Textarea With Block End Toolbar — 1 finding(s)

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

With Text Prefix — 1 finding(s)

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

InputOTP — 3 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

With Separator — 1 finding(s)

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

Item — 1 finding(s)

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)

Progress — 3 finding(s)

Default — 1 finding(s)

ARIA progressbar nodes must have an accessible name — aria-progressbar-name · all themes/modes

Indeterminate — 1 finding(s)

ARIA progressbar nodes must have an accessible name — aria-progressbar-name · all themes/modes

With Label — 1 finding(s)

ARIA progressbar nodes must have an accessible name — aria-progressbar-name · all themes/modes

Resizable — 4 finding(s)

Composed Layout — 1 finding(s)

Required ARIA attributes must be provided — aria-required-attr (4.1.2) · all themes/modes

Default — 1 finding(s)

Required ARIA attributes must be provided — aria-required-attr (4.1.2) · all themes/modes

Vertical — 1 finding(s)

Required ARIA attributes must be provided — aria-required-attr (4.1.2) · all themes/modes

Without Handle Grip — 1 finding(s)

Required ARIA attributes must be provided — aria-required-attr (4.1.2) · all themes/modes

Sidebar — 2 finding(s)

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)

Default — 1 finding(s)

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

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

Badge — 24 finding(s)

As Link — 11 finding(s)

default
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #84cc16 on #ffffff · ratio 1.97 — color-contrast (1.4.3)
surf-blue-purple
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-turquoise
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-yellow
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-green
- light — #00d37f on #ffffff · ratio 1.97 — color-contrast (1.4.3)
surf-orange
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-purple
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-purple-orange
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-yellow
- light — #ffe500 on #ffffff · ratio 1.27 — color-contrast (1.4.3)

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 — 11 finding(s)

default
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
groenvermogen-nkph2
- light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
surf-blue-purple
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-turquoise
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-blue-yellow
- dark — #053eaa on #0a0a0a · ratio 2.14 — color-contrast (1.4.3)
surf-green
- light — #00d37f on #ffffff · ratio 1.97 — color-contrast (1.4.3)
surf-orange
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-orange-turquoise
- light — #ff883f on #ffffff · ratio 2.37 — color-contrast (1.4.3)
surf-purple
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-purple-orange
- dark — #420984 on #0a0a0a · ratio 1.51 — color-contrast (1.4.3)
surf-yellow
- light — #ffe500 on #ffffff · ratio 1.27 — color-contrast (1.4.3)

Button — 4 finding(s)

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 — 3 finding(s)

Dropdown Caption — 1 finding(s)

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

In Card — 1 finding(s)

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

Single — 1 finding(s)

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

Card — 1 finding(s)

Default — 1 finding(s)

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

Checkbox — 1 finding(s)

Default — 1 finding(s)

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

Combobox — 4 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

Multiple — 1 finding(s)

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

Command — 1 finding(s)

Default — 1 finding(s)

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

DataTable — 1 finding(s)

Custom Toolbar — 1 finding(s)

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

Empty — 2 finding(s)

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)

InputGroup — 2 finding(s)

Textarea With Block End Toolbar — 1 finding(s)

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

With Text Prefix — 1 finding(s)

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

InputOTP — 3 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

With Separator — 1 finding(s)

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

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 — 3 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

Pagination — 1 finding(s)

NumberedPagination — 1 finding(s)

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

Progress — 1 finding(s)

Default — 1 finding(s)

ARIA progressbar nodes must have an accessible name — aria-progressbar-name · all themes/modes
<img src="https://raw.githubusercontent.com/SURFnet/DesignSystem/a11y-screenshots/pr-3

…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.

Dot-prefix the per-package report output (and the generated PR-comment markdown) so a single .gitignore entry covers them and they read as generated/hidden. Updates the audit default dir, the comment script's read/write paths, turbo outputs, the CI artifact/comment paths, and .gitignore.

Replace the flat findings table with a nested layout (component heading, theme bullet, mode sub-bullet with the contrast detail) so reviewers can scan by component and drill into a theme. Cap body length under GitHub's comment size limit.

Show the component (e.g. Button) as an h4 and each story variation (e.g. Variants, As Link) as an h5 beneath it, instead of merging them into one "Button / Variants" heading. Theme/mode nesting is unchanged.

Only contrast rules (color-contrast, link-in-text-block) depend on the theme/mode, so report those per theme·mode as before. DOM-structural rules (missing alt, button/link name, ARIA, etc.) are identical across themes — collapse each to a single finding per story variation, flagged 'all themes/modes', instead of repeating it for every combination.

…accordingly

Disable CSS transitions/animations and await fonts before the axe sweep so contrast reads settled colors and correct large-text thresholds. Condense the verbose comments added across the a11y tooling.

Update the a11y tooling's imports, CI filter and PR-comment labels for the @surfnet/* -> @surfnet/curve-* rebrand on main, and spell out in ci.yml that the audit drives Playwright Chromium headless (a few seconds per framework after the Storybook build).

…ript

Forcing width=360 upscaled small violation screenshots, making them pixelated in the PR comment; render at native size instead.

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 added 3 commits August 25, 2026 10:02

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

037f16e

Wire WCAG 2.1 AA audit into React and Angular Storybooks

27abd18

Add test:a11y workspace script, Turbo task, and CI step

4579ad6

sjoerdbeentjes added 13 commits August 25, 2026 10:03

Reorder storybook:serve before test:a11y in package scripts

71ba3e5

Split component and variation into h4/h5 in a11y comment

b771190

Show the component (e.g. Button) as an h4 and each story variation (e.g. Variants, As Link) as an h5 beneath it, instead of merging them into one "Button / Variants" heading. Theme/mode nesting is unchanged.

Add link-in-text-block WCAG ref (1.4.1) to a11y comment

c415f12

Move playwright dep from react to storybook-config, scope CI install …

b2d419f

…accordingly

Stabilise a11y audit and trim comments

cc06a06

Disable CSS transitions/animations and await fonts before the axe sweep so contrast reads settled colors and correct large-text thresholds. Condense the verbose comments added across the a11y tooling.

Inline a11y-comment script call in CI, drop a11y:comment workspace sc…

46c3a6e

…ript

Capture and embed a11y violation screenshots

feea626

Drop fixed width on a11y comment screenshots

a69f182

Forcing width=360 upscaled small violation screenshots, making them pixelated in the PR comment; render at native size instead.

Update playwright to 1.61.1

191e282

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

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

Badge — 24 finding(s)

As Link — 11 finding(s)

Default — 1 finding(s)

Status List — 1 finding(s)

Variants — 11 finding(s)

Button — 4 finding(s)

Default — 1 finding(s)

Sizes — 1 finding(s)

Variants — 1 finding(s)

With Icon — 1 finding(s)

Calendar — 56 finding(s)

Default — 28 finding(s)

Multiple — 28 finding(s)

Combobox — 4 finding(s)

Default — 1 finding(s)

Disabled — 1 finding(s)

Grouped — 1 finding(s)

Multiple — 1 finding(s)

Command — 8 finding(s)

Default — 3 finding(s)

Disabled Item — 2 finding(s)

Empty — 3 finding(s)

CurveDataTable — 1 finding(s)

Default — 1 finding(s)

DataTable — 1 finding(s)

Custom Toolbar — 1 finding(s)

Empty — 2 finding(s)

Default — 1 finding(s)

With Multiple Actions — 1 finding(s)

Input Group — 2 finding(s)

Textarea With Block End Toolbar — 1 finding(s)

With Text Prefix — 1 finding(s)

InputOTP — 3 finding(s)

Default — 1 finding(s)

Disabled — 1 finding(s)

With Separator — 1 finding(s)

Item — 1 finding(s)

With Header And Footer — 1 finding(s)

NativeSelect — 5 finding(s)

Default — 1 finding(s)

Disabled — 1 finding(s)

Invalid — 1 finding(s)

Sizes — 1 finding(s)

With Option Groups — 1 finding(s)

Pagination — 15 finding(s)

Numbered Pagination — 15 finding(s)

Progress — 3 finding(s)

Default — 1 finding(s)

Indeterminate — 1 finding(s)

With Label — 1 finding(s)

Resizable — 4 finding(s)

Composed Layout — 1 finding(s)

Default — 1 finding(s)

Vertical — 1 finding(s)

Without Handle Grip — 1 finding(s)

Sidebar — 2 finding(s)

Default — 2 finding(s)

Tabs — 1 finding(s)

Default — 1 finding(s)

Badge — 24 finding(s)

As Link — 11 finding(s)

Default — 1 finding(s)

Status List — 1 finding(s)

Variants — 11 finding(s)

Button — 4 finding(s)

Default — 1 finding(s)

Sizes — 1 finding(s)

Variants — 1 finding(s)

With Icon — 1 finding(s)

Calendar — 3 finding(s)

sjoerdbeentjes commented Jun 22, 2026 •

edited

Loading

github-actions Bot commented Jun 22, 2026 •

edited

Loading