Skip to content

a11y(2.4.3): group-details-row — remove redundant outer focus stop wrapping the inner close button#3537

Merged
ardiewen merged 1 commit into
mainfrom
wcag/2.4.3-group-details-row-redundant-focus
Jun 16, 2026
Merged

a11y(2.4.3): group-details-row — remove redundant outer focus stop wrapping the inner close button#3537
ardiewen merged 1 commit into
mainfrom
wcag/2.4.3-group-details-row-redundant-focus

Conversation

@rosanusi

Copy link
Copy Markdown
Contributor

Description

Fixes WCAG 2.2 SC 2.4.3 (Focus Order) in src/lib/components/lines-and-dots/svg/group-details-row.svelte.

The outer <g role="button" tabindex="0"> at line 65 created two consecutive Tab stops for one logical control: the outer <g> (no on:click or on:keydown bound — pressing Enter/Space did nothing) followed by the inner native <Button> which is the actual close action. Keyboard users had to Tab through a phantom "button" stop that announced a role but performed no action, then Tab again to reach the real Close button.

Fix (Option A): remove role="button" and tabindex="0" from the outer <g>. The <g> becomes a plain SVG grouping element. The inner <Button> remains the single focusable stop with its on:click={() => setActiveGroup(group)} close handler intact.

Side effect: also resolves the 4.1.2 unnamed-role concern on this element — removing role="button" eliminates the unnamed interactive role that axe-core would flag.

The sibling <g role="button"> wrappers in workflow-row.svelte, history-graph-row-visual.svelte, and timeline-graph-row.svelte are intentional activation surfaces (they need accessible names, tracked under 1.4.1-timeline-graph-status.md) and are not touched here.

Screenshots

No visual change. The expanded-group panel renders identically; only the Tab stop count in the panel changes from two to one.

Design

N/A.

Testing

  • Navigate to a workflow event-history timeline. Expand an event group. Tab into the expanded panel — confirm the first (and only) focus stop is the Close button, with no phantom stop before it.
  • Press Enter on the focused Close button — confirm the panel collapses.
  • Screen reader (VoiceOver / NVDA): confirm only one "Close, button" announcement per panel open; no preceding phantom "button" announcement.
  • Regression: confirm expanding and collapsing groups via the outer row (workflow-row.svelte) still works — that file is untouched.
  • axe-core on the workflow event-history page with a group expanded: button-name / aria-allowed-attr warnings on group-details-row <g> should be gone.

Checklist

Docs

No documentation changes required.

A11y-Audit-Ref: 2.4.3-group-details-row-redundant-focus

… <g> wrapper

The <g role="button" tabindex="0"> created two consecutive focus stops for
one logical control: the outer <g> (no activation handler) then the inner
native <Button> (the real close action). Removing role/tabindex from the <g>
leaves the inner Button as the single stop — one announcement, one action.

Also incidentally resolves the 4.1.2 unnamed-role concern on this element.

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

vercel Bot commented Jun 11, 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 11, 2026 2:20pm

Request Review

@github-actions github-actions Bot added a11y Accessibility audit PR a11y:bucket-2 Bucket 2: design-mergeable, HTML / ARIA a11y:sc-2.4.3 labels Jun 11, 2026
@temporal-cicd

temporal-cicd Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor
Warnings
⚠️

📊 Strict Mode: 9 errors in 1 file (1.0% of 902 total)

src/lib/components/lines-and-dots/svg/group-details-row.svelte (9)
  • L23:6: Variable 'offsetHeight' implicitly has type 'any' in some locations where its type cannot be determined.
  • L24:21: Variable 'offsetHeight' implicitly has an 'any' type.
  • L26:32: Parameter 'height' implicitly has an 'any' type.
  • L50:17: 'group.pendingActivity.attempt' is possibly 'null' or 'undefined'.
  • L60:20: Variable 'offsetHeight' implicitly has an 'any' type.
  • L100:14: Type 'string | null | undefined' is not assignable to type 'string'.
  • L100:26: 'childWorkflowStartedEvent.attributes.workflowExecution' is possibly 'null' or 'undefined'.
  • L102:14: Type 'string | null | undefined' is not assignable to type 'string | undefined'.
  • L102:21: 'childWorkflowStartedEvent.attributes.workflowExecution' is possibly 'null' or 'undefined'.

Generated by 🚫 dangerJS against 1494997

@rosanusi
rosanusi marked this pull request as ready for review June 11, 2026 16:50
@rosanusi
rosanusi requested a review from a team as a code owner June 11, 2026 16:50
@ardiewen
ardiewen merged commit 3d64cdb into main Jun 16, 2026
21 checks passed
@ardiewen
ardiewen deleted the wcag/2.4.3-group-details-row-redundant-focus branch June 16, 2026 19:36
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-2 Bucket 2: design-mergeable, HTML / ARIA a11y:sc-2.4.3 a11y Accessibility audit PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants