fix(ui5-label): improve "for" attribute accessibility reading #5872
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
TeodorTaushanov
changed the title
TeodorTaushanov
force-pushed
the
label_acc
branch
from
892dc2d to
6f1ff6d
Compare
dimovpetar
previously requested changes
Oct 6, 2022
| */ | ||
| const getAssociatedLabelForTexts = el => { | ||
| const results = []; | ||
| const labels = document.querySelectorAll(`[ui5-label][for="${el.id}"],label[for="${el.id}"]`); |
There was a problem hiding this comment.
Doesn't find the label if it is in shadow dom. Take a look at "Using a Label inside Shadow Root" here http://localhost:8080/packages/main/test/pages/Label.html
Just replace document with el.getRootNode()
dimovpetar
previously approved these changes
Oct 6, 2022
docs/2-advanced/07-accessibility.md
Outdated
| @@ -11,7 +11,7 @@ Web Components allow developers to make their own custom components with native | |||
|
|
|||
| This is not needed in UI5 Web Components, because when using our elements, all relevant accessibility attributes for a certain component will be applied in the shadow DOM, without further setup. Additionally, many accessibility-related APIs are available. They can be used to enhance the accessibility in the context of each application. | |||
|
|
|||
| As the Web Components are a new standard, there are still some gaps in regard to accessibility. For example - setting IDRef relationships is currently not possible due to the nature of the custom elements and their shadow DOM. This is a limitation in the ARIA support and there is a draft of a new [AOM (Accessibility Object Model)](https://github.com/WICG/aom), which addresses this issue and many more, and aims at a better JS-based accessibility support for all web elements. We are continuously working on improving the existing limitations. For example, in order to create a Label-Input relationship, you could simply use the `accessible-name` or `accessible-name-ref` properties of the input components in order to set the accessible name for the desired input. | |||
| As the Web Components are a new standard, there are still some gaps in regard to accessibility. For example - setting IDRef relationships is currently not possible due to the nature of the custom elements and their shadow DOM. This is a limitation in the ARIA support and there is a draft of a new [AOM (Accessibility Object Model)](https://github.com/WICG/aom), which addresses this issue and many more, and aims at a better JS-based accessibility support for all web elements. We are continuously working on improving the existing limitations. For example, in order to create a Label-Input relationship, you can use the `for` property of the label component to bound the label to an input or `accessible-name-ref` property of the input component to bound the input to a label. | |||
There was a problem hiding this comment.
@simonarangelova Could you please have a look at the documentation updates :)
simonarangelova
approved these changes
Oct 11, 2022
elenastoyanovaa
approved these changes
Oct 11, 2022
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.
Part of #5827