Skip to content

♿️(onboarding) improve OnboardingModal keyboard, screen reader, and preview content a11y#212

Open
Ovgodd wants to merge 2 commits into
mainfrom
fix/a11y-onboarding-tablist
Open

♿️(onboarding) improve OnboardingModal keyboard, screen reader, and preview content a11y#212
Ovgodd wants to merge 2 commits into
mainfrom
fix/a11y-onboarding-tablist

Conversation

@Ovgodd
Copy link
Copy Markdown
Collaborator

@Ovgodd Ovgodd commented May 4, 2026

Purpose

Improve OnboardingModal accessibility for keyboard and screen reader users:

  • make the left step list behave like vertical tabs (correct roles, labels, and Tab order)
  • support arrow navigation between steps without duplicate step announcements
  • keep Next / Previous feedback when focus stays on those buttons
  • allow optional contentAlt when step preview media is not decorative

What stays on Cunningham: initial focus on the dialog title at open, and other Modal chrome (dialog name, close button, etc.), tracked in Cunningham PR #390.

Proposal

  • Use manual activation for vertical tabs: arrows move focus only; Enter, Space, and click change the active step.
  • Keep the scrollable step list wrapper out of the tab order (tabIndex={-1}); only step buttons use roving tabindex.
  • Link the preview panel to the active step with stable ids and labels; allow panel focus when content is not focusable.
  • Add optional contentAlt on each step and expose it to assistive tech when preview content carries meaning.
  • Announce step changes from Next / Previous via a polite status region (focus does not move to tabs).
  • Remove onboarding-specific auto-focus on first step at open (to align with Cunningham modal behaviour).
  • Remove the old panel live region and replace smooth scroll-on-step with scroll-into-view for the focused tab when needed.
  • Verify keyboard/SR flows: Tab order, Arrows/Home/End, activation, Next/Previous announcements, and contentAlt linkage.

@Ovgodd Ovgodd changed the title Fix/a11y onboarding tablist ♿️(onboarding) improve OnboardingModal keyboard, screen reader, and preview content a11y May 4, 2026
@Ovgodd Ovgodd force-pushed the fix/a11y-onboarding-tablist branch from 32801d7 to 8e16909 Compare May 4, 2026 13:53
@Ovgodd Ovgodd requested a review from PanchoutNathan May 4, 2026 14:05
@Ovgodd Ovgodd self-assigned this May 4, 2026
@Ovgodd Ovgodd added the Accessibility Accessibility Update label May 4, 2026
Ovgodd added 2 commits May 4, 2026 16:05
optional string to describe non-decorative preview media for screen readers.
manual activation, roving tabindex, panel ids, next/prev live region.
@Ovgodd Ovgodd force-pushed the fix/a11y-onboarding-tablist branch from 8e16909 to fe2a51b Compare May 4, 2026 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility Accessibility Update

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant