Skip to content

fix(a11y): focus order on plan/product headers (W-11149828)#3593

Open
jstvz wants to merge 1 commit into
mainfrom
fix/a11y-focus-order-W-11149828
Open

fix(a11y): focus order on plan/product headers (W-11149828)#3593
jstvz wants to merge 1 commit into
mainfrom
fix/a11y-focus-order-W-11149828

Conversation

@jstvz
Copy link
Copy Markdown
Contributor

@jstvz jstvz commented May 21, 2026

Summary

  • Programmatically focus the heading element on plan and product header mount so iOS VoiceOver (and other screen readers) lands on the page title first (WCAG 2.4.3).
  • Wraps PageHeader in a ref'd div, queries for the heading, sets tabindex="-1", and calls .focus().
  • Suppresses the default focus outline on programmatically focused elements via SCSS.

Adopted from @cpeddamallu's fork branch (cpeddamallu/W-11149828, PRs #3591 / #3592) — cherry-picked source changes only (dropped agent artifacts and test commit).

Test plan

  • CI passes (lint, jest, tsc)
  • Manual: navigate to a plan page with VoiceOver on iOS; confirm focus lands on the plan heading
  • Manual: navigate to a product page; confirm focus lands on the product heading
  • Verify no visible focus ring appears on the heading

Closes W-11149828

Programmatically focus the heading element on mount so screen readers
(especially iOS VoiceOver) land on the page title first. Suppresses
the focus outline since the focus is programmatic, not user-initiated.

Co-authored-by: Chandrahasa Peddamallu <cpeddamallu@salesforce.com>
@jstvz jstvz requested a review from a team as a code owner May 21, 2026 22:14
@jstvz jstvz requested a review from abikkavilli-sf May 21, 2026 22:17
@jstvz jstvz had a problem deploying to metadeploy-pr-3593 May 21, 2026 22:17 Failure
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants