Make HorizontalScroll accessible #4599
Open
+129
−43
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Deploying orbit with
|
| Latest commit: |
e895742
|
| Status: | ⚡️ Build in progress... |
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
from
6a6e36d to
d617a16
Compare
|
Size Change: +100 B (+0.02%) Total Size: 460 kB
ℹ️ View Unchanged
|
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
from
d617a16 to
dda0c95
Compare
|
Storybook staging is available at https://kiwicom-orbit-marco-horizonal-scroll-a11y.surge.sh Playroom staging is available at https://kiwicom-orbit-marco-horizonal-scroll-a11y.surge.sh/playroom |
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
3 times, most recently
from
f587b91 to
0b62d3b
Compare
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
from
0b62d3b to
abaf8f0
Compare
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
2 times, most recently
from
6a4093e to
531e389
Compare
mvidalgarcia
commented
Jan 28, 2025
mvidalgarcia
commented
Jan 28, 2025
sarkaaa
reviewed
Jan 29, 2025
sarkaaa
reviewed
Jan 29, 2025
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
2 times, most recently
from
9d418dd to
49b7418
Compare
domihustinova
approved these changes
Jan 30, 2025
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
from
56068e6 to
eef070e
Compare
Addresses A11y rule id: scrollable-region-focusable Addresses FEPLT-2226
Addresses A11y rule ID: button-name Addresses FEPLT-2226 BREAKING CHANGE: HorizontalScroll component now requires `arrowLeftAriaLabel` and `arrowRightArialLabel` props if you have the `arrows` prop enabled. These will be converted into button aria-label attributes, make sure the passed value is properly translated.
This css attr seems to be unnecessary and it's breaking the focus outline styles on parent components. For instance, when HorizontalScroll wraps a TabList.
mvidalgarcia
force-pushed
the
marco/horizonal-scroll-a11y
branch
from
eef070e to
e895742
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes FEPLT-2226
✨
Description by Callstackai
This PR enhances the accessibility of the
HorizontalScrollcomponent by adding ARIA labels for the arrow buttons, ensuring better support for screen readers.Diagrams of code changes
sequenceDiagram participant User participant Screen Reader participant HorizontalScroll participant LeftArrow participant RightArrow participant Content User->>HorizontalScroll: Interacts with component alt Content is overflowing HorizontalScroll->>LeftArrow: Show with arrowLeftAriaLabel HorizontalScroll->>RightArrow: Show with arrowRightAriaLabel alt User clicks Left Arrow User->>LeftArrow: Click Screen Reader->>User: Announces "Scroll left" LeftArrow->>Content: Scroll content left else User clicks Right Arrow User->>RightArrow: Click Screen Reader->>User: Announces "Scroll right" RightArrow->>Content: Scroll content right end end Note over HorizontalScroll: RTL support added Note over HorizontalScroll: Arrow colors customizableFiles Changed
HorizontalScrollto include ARIA labels.ArrowButtoncomponent.This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions
.md. See list of supported languages.