InputField accessibility improvements #4632
Merged
+147
−144
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-inputselect-a11y-fixes.surge.sh Playroom staging is available at https://kiwicom-orbit-sarka-inputselect-a11y-fixes.surge.sh/playroom |
|
Size Change: +14 B (0%) Total Size: 461 kB
ℹ️ View Unchanged
|
Deploying orbit with
|
| Latest commit: |
08e9b6e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8124c3fe.orbit.pages.dev |
| Branch Preview URL: | https://sarka-inputselect-a11y-fixes.orbit.pages.dev |
sarkaaa
force-pushed
the
sarka/inputselect-a11y-fixes
branch
5 times, most recently
from
d7d48ed to
1ecbc01
Compare
sarkaaa
commented
Feb 26, 2025
docs/src/documentation/03-components/05-input/inputfield/03-accessibility.mdx
Show resolved
Hide resolved
sarkaaa
commented
Feb 26, 2025
sarkaaa
force-pushed
the
sarka/inputselect-a11y-fixes
branch
from
1ecbc01 to
3cd439a
Compare
sarkaaa
changed the title
DSil
reviewed
Feb 26, 2025
| prefix && <Prefix>{prefix}</Prefix> | ||
| )} | ||
| {label && inlineLabel && ( | ||
| <label |
There was a problem hiding this comment.
Something is off about this implementation. When one presses the label, the input should receive focus. And if it has an help or error tooltip, it should be triggered. But with this change this is not happening 😕 Please take a look at it 🙏
There was a problem hiding this comment.
Should be fixed. The tricky part was, that the component includes FakeInput (it's responsible for focus outline) with absolute positioning and it covered the label (there was not set z-index), so click was not possible.
docs/src/documentation/03-components/05-input/inputfield/03-accessibility.mdx
Show resolved
Hide resolved
sarkaaa
force-pushed
the
sarka/inputselect-a11y-fixes
branch
3 times, most recently
from
ec2fc2a to
87569b4
Compare
![callstackai[bot]](https://avatars.githubusercontent.com/in/1040204?s=60&v=4){kind=small}
sarkaaa
commented
Feb 27, 2025
sarkaaa
force-pushed
the
sarka/inputselect-a11y-fixes
branch
from
1b1d00b to
1323884
Compare
DSil
reviewed
Feb 27, 2025
sarkaaa
force-pushed
the
sarka/inputselect-a11y-fixes
branch
from
1323884 to
08e9b6e
Compare
DSil
approved these changes
Feb 27, 2025
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-2248
✨
Description by Callstackai
This PR introduces accessibility improvements for the
InputFieldcomponent, including the addition ofariaLabelledbyprop and enhancements to the documentation regarding accessibility usage.Diagrams of code changes
sequenceDiagram participant User participant Screen Reader participant InputField participant Label participant ARIA User->>InputField: Interacts with input field alt Using Custom Label InputField->>Label: Connect using "for" attribute Label-->>Screen Reader: Announce label content end alt Using Built-in Label InputField->>ARIA: Set aria-label InputField->>ARIA: Set aria-labelledby ARIA-->>Screen Reader: Announce accessibility info end alt Using Suffix Button InputField->>ARIA: Add "Show text" aria-label ARIA-->>Screen Reader: Announce button purpose end Screen Reader-->>User: Provide accessible feedbackFiles Changed
ariaLabelledbyprop to the InputField props type definition.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.