Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Please check if your PR fulfills the following requirements:
[x] Tests for the changes have been added (for bug fixes / features)
[ ] Docs have been added / updated (for bug fixes / features)
[ ] If applicable, have a visual design approval
PR Type
What kind of change does this PR introduce?
Adds several a11y enhancements to the stackview per request from a11y team.
adds aria-labelledby to the [role="region"] stack block which points to the clr-stack-label element
added aria-controls to the stack-block which points to the stack block child id (for expanding/collapsing)
removes posinset and setsize per a11y directions (these were deprecated and essentially no-op in order to fix this without a breaking change
add role="heading" and aria-level to the clr-stack-block per a11y directions to mitigate issues with buttons inside header
added functionality to auto-generate an id for clr-stack-label if no id is passed so that the stack view can wire up all this a11y code with no code from product devs
broke out the clr-stack-label into a real component; previously it was a no-op directive
added/updated tests for all of this
[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
Signed-off-by: Scott Mathis smathis@vmware.com
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Adds several a11y enhancements to the stackview per request from a11y team.
aria-labelledbyto the[role="region"]stack block which points to theclr-stack-labelelementaria-controlsto the stack-block which points to the stack block child id (for expanding/collapsing)posinsetandsetsizeper a11y directions (these were deprecated and essentially no-op in order to fix this without a breaking changerole="heading"andaria-levelto theclr-stack-blockper a11y directions to mitigate issues with buttons inside headerclr-stack-labelif no id is passed so that the stack view can wire up all this a11y code with no code from product devsclr-stack-labelinto a real component; previously it was a no-op directiveWhat is the current behavior?
Issue Number: VPAT-592
What is the new behavior?
See above.
Does this PR introduce a breaking change?
Other information