Skip to content

[IRN-6372] [BpkBottomSheet] - aria title read on Android TalkBack #4175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Stephen Hailey (steviehailey-skyscanner) wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[IRN-6372] [BpkBottomSheet] - aria title read on Android TalkBack #4175

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import BpkCloseButton from '../../bpk-component-close-button';
import BpkLink from '../../bpk-component-link';
import BpkNavigationBar from '../../bpk-component-navigation-bar';
import { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
import BpkVisuallyHidden from '../../bpk-component-visually-hidden';
import { BpkDialogWrapper, cssModules } from '../../bpk-react-utils';

import STYLES from './BpkBottomSheet.module.scss';
Expand Down Expand Up @@ -74,13 +75,13 @@ interface CommonProps {
export type Props = CommonProps & ({ ariaLabelledby: string } | { ariaLabel: string; });

const getContentStyles = (paddingStyles: PaddingStyles): string => {
const {
Copy link
Contributor Author

@steviehailey-skyscanner Stephen Hailey (steviehailey-skyscanner) Feb 2, 2026

Choose a reason for hiding this comment

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

No change here - linter seems to have hoovered up some old trailing spaces

const {
bottom = PADDING_TYPE.lg,
end,
start = PADDING_TYPE.lg,
top = PADDING_TYPE.none
end,
start = PADDING_TYPE.lg,
top = PADDING_TYPE.none
} = paddingStyles;

const classNames = ['bpk-bottom-sheet--content'];

// Add padding classes for each side if not 'none'
Expand Down Expand Up @@ -155,6 +156,7 @@ const BpkBottomSheet = ({
);

const headingId = `bpk-bottom-sheet-heading-${id}`;
const headingIsHidden = !title && 'ariaLabel' in ariaProps;
Copy link
Contributor Author

@steviehailey-skyscanner Stephen Hailey (steviehailey-skyscanner) Feb 2, 2026

Choose a reason for hiding this comment

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

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

const dialogClassName = getClassName(
'bpk-bottom-sheet',
wide && 'bpk-bottom-sheet--wide',
Expand Down Expand Up @@ -185,7 +187,7 @@ const BpkBottomSheet = ({
<>
<header className={getClassName('bpk-bottom-sheet--header-wrapper')}>
<BpkNavigationBar
id={headingId}
id={headingIsHidden ? `bpk-bottom-sheet-title-hidden-${id}` : headingId}
Copy link
Contributor Author

@steviehailey-skyscanner Stephen Hailey (steviehailey-skyscanner) Feb 2, 2026

Choose a reason for hiding this comment

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

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.

title={title}
titleTextStyle={TEXT_STYLES.label1}
titleTagName={title ? 'h2' : 'span'}
Expand All @@ -199,6 +201,12 @@ const BpkBottomSheet = ({
) : null
}
/>
{/* non-visible header element required for Android TalkBack to announce ariaLabel when no title provided on open BottomSheet */}
{headingIsHidden && (
<BpkVisuallyHidden as="h2">
Copy link
Contributor Author

@steviehailey-skyscanner Stephen Hailey (steviehailey-skyscanner) Feb 2, 2026

Choose a reason for hiding this comment

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

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. ✅

<span id={`bpk-bottom-sheet-title-hidden-${id}`}>{ariaProps.ariaLabel}</span>
</BpkVisuallyHidden>
)}
</header>
<div className={contentStyle}>{children}</div>
</>
Expand Down
Loading