Skip to content

a11y(4.1.2): ToggleButton — expose toggled state via aria-pressed so AT users can tell which member of a group is active#3559

Merged
ardiewen merged 1 commit into
mainfrom
wcag/4.1.2-toggle-button-aria-pressed
Jun 18, 2026
Merged

a11y(4.1.2): ToggleButton — expose toggled state via aria-pressed so AT users can tell which member of a group is active#3559
ardiewen merged 1 commit into
mainfrom
wcag/4.1.2-toggle-button-aria-pressed

Conversation

@rosanusi

Copy link
Copy Markdown
Contributor

Summary

  • Extracts the active-state expression (href ? $page.url.pathname.includes(base) : active) into a reactive pressed variable
  • Forwards it as aria-pressed={pressed ? 'true' : 'false'} on the underlying Button, placed before {...$$restProps} so consumers can still override if needed
  • Eliminates WCAG 2.2 SC 4.1.2 violation: screen-reader users navigating a ToggleButtons group could not tell which member was selected

Consumers benefit automatically (no changes needed):

  • Dark-mode menu (System / Day / Night picker)
  • Timezone format toggles (Short / Medium / Long / ISO; 12h / 24h / System)
  • Time-picker AM/PM toggle
  • Workflow detail toolbar tab-button variants
  • Cloud composites that today manually set aria-pressed continue to work — their explicit value wins via $$restProps

Test plan

  • Render a ToggleButtons group (e.g. dark-mode menu). Activate each button. Inspect DOM: active button has aria-pressed="true", inactive members have aria-pressed="false"
  • Screen-reader smoke test (NVDA / VoiceOver): confirm each button announces its name plus pressed/not-pressed state
  • bg-interactive-secondary-active class still renders on the active member (visual unchanged)
  • Anchor variant (href): navigate to matching route → aria-pressed="true"; navigate away → aria-pressed="false"
  • Consumer override: cloud composites that set aria-pressed manually still render correctly (restProps wins)
  • axe-core run on a page with a ToggleButtons group: zero new violations

A11y-Audit-Ref: 4.1.2-toggle-button-aria-pressed

🤖 Generated with Claude Code

Extracts the active-state expression into a reactive `pressed` variable
and forwards it as aria-pressed="true"/"false" on the underlying Button,
before {...$$restProps} so consumers can still override if needed.

Screen-reader users can now identify which member of a ToggleButtons
group is selected (WCAG 2.2 SC 4.1.2 Name, Role, Value).

A11y-Audit-Ref: 4.1.2-toggle-button-aria-pressed

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@vercel

vercel Bot commented Jun 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment Jun 12, 2026 3:38pm

Request Review

@github-actions github-actions Bot added a11y Accessibility audit PR a11y:bucket-3 Bucket 3: engineer required a11y:sc-4.1.2 labels Jun 12, 2026
export let base = href;
export let active = false;
export let variant: ComponentProps<Button>['variant'] = 'secondary';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Argument of type 'null' is not assignable to parameter of type 'string'.

className,
)}
data-track-name="toggle-button"
{variant}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'string | null' is not assignable to type 'string'.

@temporal-cicd

temporal-cicd Bot commented Jun 12, 2026

Copy link
Copy Markdown
Contributor
Warnings
⚠️

📊 Strict Mode: 3 errors in 1 file (0.3% of 904 total)

src/lib/holocene/toggle-button/toggle-button.svelte (3)
  • L39:50: Argument of type 'null' is not assignable to parameter of type 'string'.
  • L51:2: Type 'string | null' is not assignable to type 'string'.
  • L29:7: Argument of type '$$Props' is not assignable to parameter of type '{ class?: string | undefined; group?: boolean | undefined; href?: null | undefined; base?: null | undefined; active?: boolean | undefined; variant?: "primary" | "secondary" | "ghost" | "destructive" | "table-header" | null | undefined; }'.

Generated by 🚫 dangerJS against 583312f

@rosanusi
rosanusi marked this pull request as ready for review June 12, 2026 16:30
@rosanusi
rosanusi requested a review from a team as a code owner June 12, 2026 16:30
@ardiewen
ardiewen merged commit aef4166 into main Jun 18, 2026
24 checks passed
@ardiewen
ardiewen deleted the wcag/4.1.2-toggle-button-aria-pressed branch June 18, 2026 13:58
laurakwhit added a commit that referenced this pull request Jun 23, 2026
Auto-generated version bump from 2.51.0 to 2.51.1

Specific version: 2.51.1

Changes included:
- [`c848ec54`](c848ec5) fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1) (#3443)
- [`af6b12a9`](af6b12a) fix(deployments): align version/status/compute badges in worker deployments table (#3489)
- [`df86587c`](df86587) Add SDK version to standalone activity details (#3447)
- [`59695290`](5969529) Use shared FilterBar component for workflows (#3448)
- [`ded94469`](ded9446) Set display contents in wrapper div if no afterLabel in Input component (#3513)
- [`d7e5eb43`](d7e5eb4) fix(standalone-activities): decode failure encodedAttributes in activity detail (#3507)
- [`81a255a9`](81a255a) fix(DT-4151): fix bottom nav scrollability and double-menu on mobile (#3514)
- [`368f646e`](368f646) Fix exports to work properly with vite8 (#3519)
- [`231bdaff`](231bdaf) chore(deps-dev): bump vitest from 3.2.4 to 3.2.6 (#3509)
- [`1de44ea6`](1de44ea) fix(workers): soften no-workers-polling alert for serverless worker deployments (#3524)
- [`689955a8`](689955a) fix(DT-4080): surface error when validate connection has no compute config, warn on set current (#3516)
- [`93323db9`](93323db) feat(DT-4078): Add Set Ramping Version to Worker Deployment Versions (#3508)
- [`9d3450c0`](9d3450c) fix(DT-4081): surface task queue not registered error in validate connection modal (#3517)
- [`b7f56237`](b7f5623) feat(DT-4079): miscellaneous WD UI fixes (#3511)
- [`83b2d4ec`](83b2d4e) feat(deployments): simplify create worker deployment UX (#3518)
- [`ccb4cb73`](ccb4cb7) Standalone Activity write guards (#3534)
- [`ab20ef03`](ab20ef0) Worker insights UI updates (#3520)
- [`aaf63bdc`](aaf63bd) [wcag] Replace text-[12px] with text-xs in DatePicker action buttons (SC 1.4.4) (#3525)
- [`743be902`](743be90) a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar (#3527)
- [`41b73e87`](41b73e8) a11y(2.4.2): ui-main — set distinct, descriptive titles on login/signin, task-queues list, and activity-workers sub-tab (#3535)
- [`3d64cdbf`](3d64cdb) [WCAG 2.4.3] group-details-row — remove redundant outer focus stop on <g> wrapper (#3537)
- [`883e5db1`](883e5db) a11y(2.4.6): datepicker — replace empty label with translate('common.start') (#3543)
- [`9da915e2`](9da915e) a11y(2.4.5): import history — add back-link to Import landing page (#3542)
- [`ca4c1d61`](ca4c1d6) Cache new Intl.DateTimeFormat (#3565)
- [`38376e4d`](38376e4) Fix required activity timeout inputs on Start a Standalone Activity form (#3567)
- [`49d7c9e4`](49d7c9e) Use separate copy for title vs menu item (#3568)
- [`3c7dcdc3`](3c7dcdc) a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px (#3547)
- [`b5171825`](b517182) a11y(2.5.8): chip — pad remove button to 24×24 CSS px minimum (#3544)
- [`1fea5d5c`](1fea5d5) a11y(2.1.1): fake-button widgets — replace deprecated onkeypress with onkeydown handling Enter and Space (#3528)
- [`5bf09000`](5bf0900) a11y(2.1.1): navigation primitives — replace hover-only CSS :after label tooltip with focusable Tooltip (#3529)
- [`deed43f0`](deed43f) a11y(2.1.1): event summary row — add keyboard-accessible expand control alongside the mouse-only <tr onclick> (#3526)
- [`d401123e`](d401123) a11y(2.5.8): checkbox — add min-h-6 min-w-6 to Label for 24×24 hit area (#3545)
- [`aef4166f`](aef4166) [a11y] Expose toggled state via aria-pressed on ToggleButton (#3559)
- [`797f8831`](797f883) Show single attempt in Standalone Activity details (#3572)
- [`893bc58c`](893bc58) feat(DT-4183): Add Tabs (Primitive) (#3574)
- [`323c1993`](323c199) Date picker input field bug/kt (#3522)
- [`3ac34ce2`](3ac34ce) Various serverless UI updates (#3573)
- [`f365416a`](f365416) a11y(2.1.1): ZoomSvg — add keyboard pan/zoom controls so the workflow family tree is operable without a mouse (#3530)
- [`feb6897e`](feb6897) Fix gaps in slot cards on worker details page (#3580)
- [`b3c80072`](b3c8007) Remove font weight on cache size (#3583)
- [`0e7337ea`](0e7337e) Bump API to v1.62.14 (#3575)

Co-authored-by: laurakwhit <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y:bucket-3 Bucket 3: engineer required a11y:sc-4.1.2 a11y Accessibility audit PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants