[IRN-6372] [BpkBottomSheet] - aria title read on Android TalkBack#4175
[IRN-6372] [BpkBottomSheet] - aria title read on Android TalkBack#4175Stephen Hailey (steviehailey-skyscanner) wants to merge 1 commit intomainfrom
Conversation
|
Visit https://backpack.github.io/storybook-prs/4175 to see this build running in a browser. |
Gert-Jan Vercauteren (gert-janvercauteren)
added
patch
| export type Props = CommonProps & ({ ariaLabelledby: string } | { ariaLabel: string; }); | ||
|
|
||
| const getContentStyles = (paddingStyles: PaddingStyles): string => { | ||
| const { |
There was a problem hiding this comment.
No change here - linter seems to have hoovered up some old trailing spaces
| ); | ||
|
|
||
| const headingId = `bpk-bottom-sheet-heading-${id}`; | ||
| const headingIsHidden = !title && 'ariaLabel' in ariaProps; |
There was a problem hiding this comment.
Detect if we're in the situation where we only have a heading for ScreenReader purposes to describe the dialog (no visual title)
| <header className={getClassName('bpk-bottom-sheet--header-wrapper')}> | ||
| <BpkNavigationBar | ||
| id={headingId} | ||
| id={headingIsHidden ? `bpk-bottom-sheet-title-hidden-${id}` : headingId} |
There was a problem hiding this comment.
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.
| /> | ||
| {/* non-visible header element required for Android TalkBack to announce ariaLabel when no title provided on open BottomSheet */} | ||
| {headingIsHidden && ( | ||
| <BpkVisuallyHidden as="h2"> |
There was a problem hiding this comment.
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)
changed the title
2 participants
Remember to include the following changes:
[Clover-123][BpkButton] Updating the colourREADME.md(If you have created a new component)README.md