feat(Stepper): Additions to the Stepper component for accessibility compliance. The 'aria-current' attribute now reads 'step' when active, the DOM structure has been changed to a UL LI layout, and when labels are hidden, the screenreader sees the step state for each step label.
Issue: # 1143
What I did
- Changed aria-current to read "step" when active.
- Converted to UL LI structure for the component layout.
- Added the state for each step when labels are hidden.
Checklist
- [X] changeset has been added
- [X] Pull request description is descriptive
- [N/A] I have made corresponding changes to the documentation
- [X] New and existing unit tests pass locally with my changes
- [N/A] I have added tests that prove my fix is effective or that my feature works
How to test
- Make sure aria-current reads "step".
- Verify in DOM that the UL LI structure looks sufficient.
- Ensure screen reader can read the step state after the label when labels are hidden.
🦋 Changeset detected
Latest commit: d1960e237ceb92bdd2d491ba968828e674abe4ac
The changes in this PR will be included in the next version bump.
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://docs-preview-1346--upbeat-sinoussi-f675aa.netlify.app
🚀 Deployed on https://storybook-preview-1346--upbeat-sinoussi-f675aa.netlify.app