fix(chip): added role and aria-label to match react#5765
fix(chip): added role and aria-label to match react#5765mcoker merged 4 commits intopatternfly:mainfrom
Conversation
|
Preview: https://patternfly-pr-5765.surge.sh A11y report: https://patternfly-pr-5765-a11y.surge.sh |
thatblindgeye
left a comment
There was a problem hiding this comment.
In addition to the below comment, we should remove aria-hidden="true" from the chip-group-label file, as that causes a chip group category's close button to not be announced correctly in VoiceOver
| @@ -1,4 +1,6 @@ | |||
| <div class="{{pfv}}chip-group{{#if chip-group--modifier}} {{chip-group--modifier}}{{/if}}" | |||
| role="group" | |||
| aria-label="Chip group category" | |||
There was a problem hiding this comment.
Rather than hardcoding this, we should allow passing in whatever value we may need for the example. We'd also want to utilize aria-labelledby for when a chip group has a visible text label (aria-label should be for when there's no visible text label in the "Simple inline..." examples).
For this file, let's update this to something like:
| aria-label="Chip group category" | |
| {{#if chip-group--HasCategoryText}} | |
| aria-labelledby="{{chip-group--id}}-label" | |
| {{else if chip-group--aria-label}} | |
| aria-label="{{chip-group--aria-label}}" | |
| {{/if}} |
Then we can update the examples accordingly:
- The "Simple inline chip group..." examples can have the
chip-group--aria-labelpassed in. We'll want whatever value passed in to describe the chip group enough; using part of the example titles could work - The "Chip groups with categories" examples will have the
chip-group--HasCategoryText(or whatever you think a good name is)
thatblindgeye
left a comment
There was a problem hiding this comment.
🎉 The surge preview doesn't seem up to date, but pulling your branch locally things look as expected
|
🎉 This PR is included in version 5.1.0-prerelease.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 6.0.0-alpha.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
closes: #5258