[feature]: Add "labelInAriaLive"-property for better accessibility #413
+80
−33
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
added 3 commits
May 24, 2022 13:34
Aria-live of TreeSelect option was always updated with the value of the option. In some cases there is some sort of ID in the value field (not relevant for user), and the textual representation in label. In those cases, users with screenreaders are confused, as they hear only some ID-numbers instead of option labels. This is a huge problem for accessibility. Solution Allow developer to decide whether to use option label in aria-live area. There is a new prop ´bool labelInAriaLive (default=false)´ , that the developer can use if he/she wishes. This is a huge enabler for improving accessibility. Notes Also testcase was added and documentation was updated in this commit. This commit will not break any existing usage of treeSelect component, as the default for new prop is false. If ´labelInAriaLive´ is false, everything will work as expected.
Aria-live of TreeSelect option was always updated with the value of the option. In some cases there is some sort of ID in the value field (not relevant for user), and the textual representation in label. In those cases, users with screenreaders are confused, as they hear only some ID-numbers instead of option labels. This is a huge problem for accessibility. Solution Allow developer to decide whether to use option label in aria-live area. There is a new prop ´bool labelInAriaLive (default=false)´ , that the developer can use if he/she wishes. This is a huge enabler for improving accessibility. Notes Also testcase was added and documentation was updated in this commit. This commit will not break any existing usage of treeSelect component, as the default for new prop is false. If ´labelInAriaLive´ is false, everything will work as expected.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov Report
@@ Coverage Diff @@
## master #413 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 14 14
Lines 468 469 +1
Branches 133 136 +3
=========================================
+ Hits 468 469 +1
📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more |
|
Hi @zombieJ : Any idea when this feature would be merged and released? |
|
This is very useful because some times the value is, for example, a hash or similar identifier, which isn't meaningful to the end user. Any issues with this improvement @zombieJ ? |
added 2 commits
July 29, 2022 08:29
|
Conflict! |
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.
What problem does this PR solve?
If the user moves between TreeSelect options using arrow keys, the screenreader will always read out the value of the active node. It would be much better for accessibility (and more flexible), if I as a developer could decide to use labels for aria-live content instead of the values.
What does the proposed API look like?
New prop would be
labelInAriaLive, and it would befalseby default. This prop would then be used to decide whether to use the value or label of the selected item, when rendering the aria-live tag of the component.Using the component with the implemented feature: