ListChoice Accessibility #4637
Open
ListChoice Accessibility #4637
+55
−20
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
This component renders a Checkbox like element The rendered element is merely decorative.
|
Storybook staging is available at https://kiwicom-orbit-dsil-list-choice-accessibility.surge.sh Playroom staging is available at https://kiwicom-orbit-dsil-list-choice-accessibility.surge.sh/playroom |
|
Size Change: +105 B (+0.02%) Total Size: 461 kB
ℹ️ View Unchanged
|
Deploying orbit with
|
| Latest commit: |
3914b37
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a2aa0962.orbit.pages.dev |
| Branch Preview URL: | https://dsil-list-choice-accessibili.orbit.pages.dev |
Checkbox has lightblue border on hover (production doesn't include this visual effect). Not sure which version is correct... 🤔 |
sarkaaa
reviewed
Mar 3, 2025
| @@ -92,11 +91,11 @@ export const WithAction: Story = { | |||
| return ( | |||
| <ListChoice | |||
|
Production has the same light blue border on hover 🤔 |
# for free
to join this conversation on GitHub.
Already have an account?
# 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.
Added a new internal (for now) component: FakeCheckbox. It allows to use the Checkbox in scenarios like ListChoice. We can consider making it public…
Tweaked the ARIA attributes logic and fixed stories.
Accessibility documentation will be done on a separate task.
FEPLT-2261
✨
Description by Callstackai
This PR introduces a new internal component
FakeCheckboxfor accessibility improvements in theListChoicecomponent. It also updates ARIA attributes and fixes stories related to theListChoicecomponent.Diagrams of code changes
sequenceDiagram participant User participant ListChoice participant FakeCheckbox Note over ListChoice: New role handling added alt Selectable ListChoice User->>ListChoice: Interact with ListChoice ListChoice->>FakeCheckbox: Render with checked/disabled state FakeCheckbox-->>ListChoice: Display checkbox UI ListChoice-->>User: Show selectable item with checkbox else Non-selectable with Action User->>ListChoice: Interact with ListChoice ListChoice-->>User: Show item with action (no role) else Regular ListChoice User->>ListChoice: Interact with ListChoice ListChoice-->>User: Show item with button role end Note over ListChoice: Accessibility attributes added Note over ListChoice: (aria-checked, aria-disabled)Files Changed
FakeCheckboxfor accessibility.IconwithariaHiddenfor accessibility.ListChoiceto useFakeCheckboxand modified ARIA attributes.