Select a11y enhancements #4543
Merged
Select a11y enhancements #4543
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
|
Storybook staging is available at https://kiwicom-orbit-sarka-select-a11y.surge.sh |
|
Size Change: -107 B (-0.02%) Total Size: 460 kB
ℹ️ View Unchanged
|
Deploying orbit with
|
| Latest commit: |
cfb5707
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ec4638fa.orbit.pages.dev |
| Branch Preview URL: | https://sarka-select-a11y.orbit.pages.dev |
sarkaaa
force-pushed
the
sarka/select-a11y
branch
from
8d86f8e to
1f4fce7
Compare
sarkaaa
force-pushed
the
sarka/select-a11y
branch
3 times, most recently
from
7095271 to
2e3a324
Compare
![callstackai[bot]](https://avatars.githubusercontent.com/in/1040204?s=60&v=4){kind=small}
There was a problem hiding this comment.
Key Issues
The ariaLabel property should use Common.Translation for consistency with other translatable properties to avoid internationalization issues. Ensure aria-label is assigned a non-empty string to prevent accessibility problems, as the current approach lacks proper null checks.
sarkaaa
force-pushed
the
sarka/select-a11y
branch
2 times, most recently
from
8170156 to
ba97f36
Compare
There was a problem hiding this comment.
Key Issues
Casting label to a string without checking for null or undefined can cause runtime errors and affect accessibility. The component's state management does not account for changes in the selectValue prop, leading to potential stale state issues. Assuming a filter operation will always find a match can result in runtime errors if no match is found.
packages/orbit-components/src/InputGroup/InputGroup.stories.tsx
Outdated
Show resolved
Hide resolved
sarkaaa
force-pushed
the
sarka/select-a11y
branch
2 times, most recently
from
0a631b4 to
8f828d5
Compare
DSil
requested changes
Dec 17, 2024
sarkaaa
force-pushed
the
sarka/select-a11y
branch
2 times, most recently
from
210a022 to
b460268
Compare
DSil
requested changes
Dec 18, 2024
There was a problem hiding this comment.
The commit message focuses on the implementation and not on the effect. The end user does not need to know that we use a cloneElement function internally, it's irrelevant for them. The fix is actually that labels on InputField and Select elements inside an InputGroup were not being propagated and now they are (as aria-label)
| @@ -269,7 +269,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => { | |||
| ref={ref} | |||
| tabIndex={tabIndex !== undefined ? Number(tabIndex) : undefined} | |||
| list={list} | |||
| aria-labelledby={!label ? inputId : undefined} | |||
| aria-label={label ? (label as string) : undefined} | |||
There was a problem hiding this comment.
This is not adding ariaLabel prop. The component needs to accept the prop and add it, just like you did on Select.
sarkaaa
force-pushed
the
sarka/select-a11y
branch
3 times, most recently
from
0c4db6c to
5c11a7b
Compare
DSil
approved these changes
Dec 19, 2024
This prop is was effectless. BREAKING CHANGE: This prop was effectless and now is no longer meant to be used.
BREAKING CHANGE: This prop was effectless and it is no longer available.
…to child components
DSil
force-pushed
the
sarka/select-a11y
branch
from
5c11a7b to
cfb5707
Compare
Merged
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.
This Pull Request meets the following criteria:
For new components:
d.tsfiles and are exported inindex.d.tsCloses https://kiwicom.atlassian.net/browse/FEPLT-2176
✨
Description by Callstackai
This PR introduces accessibility enhancements to various components by adding
ariaLabelprops and updating related documentation.Diagrams of code changes
sequenceDiagram participant User participant InputField participant Select participant InputGroup participant Screen Reader Note over InputField,Select: Added aria-label support User->>InputGroup: Interacts with form components InputGroup->>InputField: Passes label as ariaLabel InputField-->>Screen Reader: Provides accessibility context InputGroup->>Select: Passes label as ariaLabel Select-->>Screen Reader: Provides accessibility context Note over InputField,Screen Reader: If no visible label present InputField->>Screen Reader: Uses ariaLabel for context Select->>Screen Reader: Uses ariaLabel for context Note over InputGroup: Enhanced error/help tooltip handling InputGroup->>InputField: Manages tooltip visibility InputGroup->>Select: Manages tooltip visibilityFiles Changed
inputSizeprop fromPropsinterface.inputSizeprop fromPropsinterface.ariaLabelprop to theInputFieldcomponent in the Playground story.ariaLabelprop.ariaLabelprop to theInputFieldcomponent.ariaLabelprop toPropsinterface.inputSizeprop fromInputFilecomponent.DateOfBirthstory to include labels for better accessibility.sizeprop and updated how children are rendered.sizeprop fromPropsinterface.ariaLabelprop.ariaLabelprop to theSelectcomponent.ariaLabelprop toPropsinterface.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.