[IRN-6372] [BpkBottomSheet] - aria title read on Android TalkBack by steviehailey-skyscanner · Pull Request #4198 · Skyscanner/backpack

Stephen Hailey (steviehailey-skyscanner) · 2026-02-02T18:04:01Z

https://skyscanner.atlassian.net/browse/IRN-6372

fix(bottom-sheet): Add visually hidden title for screen reader nav announcement

When BpkBottomSheet has no visible title but has ariaLabel, the navigation bar's aria-labelledby was pointing to an empty element. This caused screen readers (particularly Android TalkBack) to fail to announce the navigation context when focusing on the close button.

This fix adds a visually hidden h2 element containing the ariaLabel text, which the navigation bar's aria-labelledby now references when no visible title is present.

Tested on physical Android device with TalkBack and now announces what the dialog is about based on aria-label. 🎉

Remember to include the following changes:

…nouncement When BpkBottomSheet has no visible title but has ariaLabel, the navigation bar's aria-labelledby was pointing to an empty element. This caused screen readers (particularly Android TalkBack) to fail to announce the navigation context when focusing on the close button. This fix adds a visually hidden h2 element containing the ariaLabel text, which the navigation bar's aria-labelledby now references when no visible title is present. Co-Authored-By: Claude Opus 4.5 <[email protected]>

skyscanner-backpack-bot · 2026-02-02T18:10:47Z

Visit https://backpack.github.io/storybook-prs/4198 to see this build running in a browser.

skyscanner-backpack-bot · 2026-02-02T18:12:31Z

	Warnings
⚠️	Package source files (e.g. `packages/package-name/src/Component.js`) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 4bd0582

Keep title as empty string rather than null to ensure nav's aria-labelledby points to a different element than the hidden title span, avoiding duplicate reading of ariaLabel. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Match PR element order - place visually hidden h2 after the NavigationBar to prevent screen reader announcing it before the nav context. Co-Authored-By: Claude Opus 4.5 <[email protected]>

skyscanner-backpack-bot · 2026-02-03T09:18:03Z

Visit https://backpack.github.io/storybook-prs/4198 to see this build running in a browser.

Stephen Hailey (steviehailey-skyscanner) · 2026-02-03T09:37:07Z

packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx

    ).toBeInTheDocument();
  });
+
+  it('renders a hidden h2 with ariaLabel text when no title is provided', () => {


Added by Opus - seem comprehensive to me and follow the patterns of surrounding tests ✅

Stephen Hailey (steviehailey-skyscanner) · 2026-02-03T09:38:06Z

packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx

            }
          />
+          {/* Visually hidden title required for Android TalkBack to announce ariaLabel on BottomSheet open when no visible title provided */}
+          {showHiddenTitle && (


Same heading level as NavBar normally uses for visual Bottom Sheet title (when it has one)

Tested on Android with TalkBack via "No Header" story and now we do get the aria title announced on open while still maintaining focus on the close button. ✅

Stephen Hailey (steviehailey-skyscanner) · 2026-02-03T09:38:15Z

packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx

        <header className={getClassName('bpk-bottom-sheet--header-wrapper')}>
          <BpkNavigationBar
-            id={headingId}
+            id={showHiddenTitle ? hiddenTitleId : headingId}


Since we adding a Screen Reader heading below using headingId we don't want to pass the same id to Nav Bar and risk a duplicated element id inside with the same id so use an alternative in this case.

Stephen Hailey (steviehailey-skyscanner) · 2026-02-03T09:38:30Z

packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx


  const headingId = `bpk-bottom-sheet-heading-${id}`;
+  const hiddenTitleId = `bpk-bottom-sheet-title-hidden-${id}`;
+  const showHiddenTitle = !title && 'ariaLabel' in ariaProps;


Detect if we're in the situation where we only have a heading for ScreenReader purposes to describe the dialog (no visual title)

would it be better to use const showHiddenTitle = !title && !!ariaProps.ariaLabel; to exclude the case that ariaLabel is ""?

Yeah, I think handling empty string is nice - especially when when our variable means we can change it in a single place and benefit from it each place we use it. The types insist that we still check for existence of the property before asserting it but that's fine.
e.g. will change to !title && 'ariaLabel' in ariaProps && ariaProps.ariaLabel

Copilot

Pull request overview

This PR fixes an accessibility issue where Android TalkBack fails to announce the bottom sheet context when no visible title is present but an ariaLabel is provided. The solution adds a visually hidden heading element that screen readers can reference.

Changes:

Add visually hidden h2 element containing ariaLabel text when no visible title exists
Update navigation bar's aria-labelledby to reference the hidden title when appropriate
Add comprehensive test coverage for the new hidden title behavior

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
BpkBottomSheet.tsx	Implements visually hidden title logic and imports BpkVisuallyHidden component
BpkBottomSheet-test.tsx	Adds test cases for hidden title rendering and ariaLabelledby behavior

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-03T09:40:47Z

packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx

+            <BpkVisuallyHidden as="h2">
+              <span id={hiddenTitleId}>{ariaProps.ariaLabel}</span>


The h2 element is redundant here. Since BpkVisuallyHidden is already rendering as an h2, wrapping a span with the id inside creates an unnecessary DOM nesting. The id should be placed directly on the h2 element instead. Change to: <BpkVisuallyHidden as=\"h2\" id={hiddenTitleId}>{ariaProps.ariaLabel}</BpkVisuallyHidden>

Suggested change

<BpkVisuallyHidden as="h2">

<span id={hiddenTitleId}>{ariaProps.ariaLabel}</span>

<BpkVisuallyHidden as="h2" id={hiddenTitleId}>

{ariaProps.ariaLabel}

Hey, I added the span because the visually hidden component has no id prop. I agree it could be handy for other scenarios based on it's use here.

are you suggesting I add one to it as part of this PR?

Ha just noticed this is from Copilot 😄

skyscanner-backpack-bot · 2026-02-04T12:30:00Z

Visit https://backpack.github.io/storybook-prs/4198 to see this build running in a browser.

Stephen Hailey (steviehailey-skyscanner) and others added 3 commits February 3, 2026 08:29

fix(bottom-sheet): Move hidden title after NavigationBar

6c8a08f

Match PR element order - place visually hidden h2 after the NavigationBar to prevent screen reader announcing it before the nav context. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Merge branch 'main' into IRN-6372-opus

d3af963

Stephen Hailey (steviehailey-skyscanner) commented Feb 3, 2026

View reviewed changes

Stephen Hailey (steviehailey-skyscanner) added minor Non breaking change Accessibility ai: claude labels Feb 3, 2026

Stephen Hailey (steviehailey-skyscanner) marked this pull request as ready for review February 3, 2026 09:40

Copilot AI review requested due to automatic review settings February 3, 2026 09:40

Copilot AI reviewed Feb 3, 2026

View reviewed changes

Improve guard

4bd0582

IrinaWei approved these changes Feb 4, 2026

View reviewed changes

		<BpkVisuallyHidden as="h2">
		<span id={hiddenTitleId}>{ariaProps.ariaLabel}</span>

Conversation

Stephen Hailey (steviehailey-skyscanner) commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Feb 2, 2026

Uh oh!

skyscanner-backpack-bot bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot bot commented Feb 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Stephen Hailey (steviehailey-skyscanner) commented Feb 2, 2026 •

edited

Loading

skyscanner-backpack-bot bot commented Feb 2, 2026 •

edited

Loading