Improve scrollable carousel and onwards content carousel accessibility - #15390
Conversation
domlander
added
run_chromatic
github-actions
Bot
removed
the
run_chromatic
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
…low component to keep with essence of file ordering.
ffe0963 to
0e5badb
Compare
| width: 1px; | ||
| background-color: ${palette('--onward-content-border')}; | ||
| } | ||
| ul { |
There was a problem hiding this comment.
This has changed from ol to ul. Ideally we could refactor to not target elements in this way as it is a little brittle, but will leave for now as this PR is fairly big.
github-actions
Bot
removed
the
run_chromatic
| if (isFrontBranding || isContainerBranding) { | ||
| return ( | ||
| <div css={titleStyle}> | ||
| <div id={`${sectionId}-title`} css={titleStyle}> |
There was a problem hiding this comment.
So that aria-labelledby can target the appropriate element. This is better than prop drilling the title name down to the components that refer to it.
| aspectRatio, | ||
| collectionId, | ||
| }: Props) => { | ||
| const isBelowTabletBreakpoint = useMatchMedia( |
There was a problem hiding this comment.
I did consider whether the added accessibility was worth the extra javascript. I've come to the conclusion that if we are going to use carousels in this way then the extra javascript needed to make them more accessible should be built in to that decision.
| return ( | ||
| <div css={containerStyles}> | ||
| <ol | ||
| <ul |
There was a problem hiding this comment.
preferred to ol
abeddow91
left a comment
abeddow91
left a comment
There was a problem hiding this comment.
A massive improvement. Thanks for putting this together 👏
|
Overdue on PROD (merged by @domlander 30 minutes and 7 seconds ago) What's gone wrong? |
|
Seen on PROD (merged by @domlander 50 minutes and 4 seconds ago) Please check your changes! |
2 participants
What does this change?
Adds aria attributes to the following front collections that use carousels:
Adds aria attributes to the onwards content front.
Why?
Better accessibility when using a screen reader.
Extends #15365
Screenshares
Front carousel
Before
Screen.Recording.2026-02-19.at.11.31.05.mov
After
Screen.Recording.2026-02-19.at.11.35.53.mov
Onwards content carousel
Before
Screen.Recording.2026-02-19.at.11.40.30.mov
After
Screen.Recording.2026-02-19.at.11.38.55.mov