fix(core): List: Group label not read #13494
Open
Conversation
This file contains hidden or 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
…e to screen readers
MariaIDineva
added
the
accessibility
MariaIDineva
changed the title
✅ Deploy Preview for fundamental-ngx ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
MariaIDineva
changed the title
… need to extend ListFocusItem
…s, not to group headers
| <li | ||
| fd-list-item | ||
| fd-list-group-header | ||
| [ariaRole]="'group'" |
There was a problem hiding this comment.
no need of binding here, can be just ariaRole="group"
| role="option" | ||
| fd-list-item | ||
| #item="fdListItem" | ||
| [ariaRole]="'option'" |
| <li | ||
| fd-list-item | ||
| fd-list-group-header | ||
| [ariaRole]="'group'" |
| fd-list-item | ||
| fd-list-group-header | ||
| [ariaRole]="'group'" | ||
| [attr.aria-roledescription]="'Group Header'" |
| fd-list-item | ||
| fd-list-group-header | ||
| [ariaRole]="'group'" | ||
| [attr.aria-roledescription]="'Group Header'" |
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.
Related Issue(s)
closes #12584
Description
Makes List
groupitemfocusableso that it is read by screen readers.Add
fd-list-itemattribute tofd-list-group-headerto make the header focusable. Addsrole='group'to the element.Adds the following aria attributes to the group header to improve description so that readers read groups correctly (have followed the pattern used in UI5 as advised by a design accessibility expert):
aria-roledescription,aria-label,aria-owns.Adds an
id-with-group-indexattribute to list items to allow calculation ofaria-ownsfor the header.Adds
aria-setsize,aria-posinsetto appoint which list item belongs to which group.Move
tabindexfromfd-list-group-headerandfd-list-itemtofd-listto avoid JAWS trapping focus on the first item and blocking up and down arrows.Components affected:
Screenshots