Add accessibility props to Switch #4590
Merged
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: |
08d9739
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ecc48cee.orbit.pages.dev |
| Branch Preview URL: | https://domi-switch-a11y.orbit.pages.dev |
|
Storybook staging is available at https://kiwicom-orbit-domi-switch-a11y.surge.sh Playroom staging is available at https://kiwicom-orbit-domi-switch-a11y.surge.sh/playroom |
|
Size Change: +25 B (+0.01%) Total Size: 459 kB
ℹ️ View Unchanged
|
domihustinova
force-pushed
the
domi/switch-a11y
branch
5 times, most recently
from
e1a0cb3 to
b6f3289
Compare
domihustinova
commented
Jan 23, 2025
Comment on lines
+21
to
+22
| ariaControls, | ||
| ariaLabel, |
There was a problem hiding this comment.
I added ariaLabel as I believe both ariaLabel and ariaLabelledby should be available.
I added ariaControls as Switch is currently used in multiple places where it controls other elements, e.g. in Search it's used in the Price Alert where switching it on can display Sign In modal for logged out users and when switched off it, it displays the modal. Same for booking where Switch controls the the Billing details Card to be expanded/collapsed. I believe that in these situations aria-controls should be set.
domihustinova
force-pushed
the
domi/switch-a11y
branch
2 times, most recently
from
f9fdfda to
1b2d1f1
Compare
domihustinova
commented
Jan 23, 2025
sarkaaa
reviewed
Jan 24, 2025
docs/src/documentation/03-components/07-interaction/switch/03-accessibility.mdx
Outdated
Show resolved
Hide resolved
domihustinova
force-pushed
the
domi/switch-a11y
branch
2 times, most recently
from
83dddfd to
28dcb31
Compare
sarkaaa
reviewed
Jan 28, 2025
sarkaaa
approved these changes
Jan 28, 2025
domihustinova
force-pushed
the
domi/switch-a11y
branch
from
28dcb31 to
08d9739
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 https://kiwicom.atlassian.net/browse/FEPLT-2212
✨
Description by Callstackai
This PR adds accessibility properties to the Switch component, enhancing its usability with assistive technologies. It introduces
ariaControls,ariaLabel, and updates the documentation accordingly.Diagrams of code changes
sequenceDiagram participant User participant Switch participant ScreenReader participant ControlledElement Note over Switch: Enhanced with aria attributes User->>Switch: Interacts with Switch Switch-->>ScreenReader: Announces aria-label/labelledby alt Switch controls another element Switch-->>ControlledElement: References via aria-controls ScreenReader->>User: Announces relationship end alt Switch is toggled Switch->>ScreenReader: Announces checked state Switch->>ControlledElement: Updates controlled element end Note over Switch,ScreenReader: Improved accessibility<br/>with aria propertiesFiles Changed
This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions
.mdx,.md. See list of supported languages.