-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(progress-indicator): adds hidden span to announce state of completion #5125
feat(progress-indicator): adds hidden span to announce state of completion #5125
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for this fix @abbeyhrt!
@@ -70,16 +70,31 @@ export const ProgressStep = ({ ...props }) => { | |||
); | |||
}; | |||
|
|||
let message = 'Incomplete'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
g11n; Do we want to add a prop to let app specify the assistive text? (Though translate-ability for assistive text didn't use to be a hard-requirements, I have seen several issues asking for it)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea! I added it, it's the first time I've done it so let me know if it all looks good!
Deploy preview for carbon-elements ready! Built with commit b0fd7f4 |
Deploy preview for carbon-components-react failed. Built with commit b0fd7f4 https://app.netlify.com/sites/carbon-components-react/deploys/5e2b167e53a5c7000933b3a7 |
Deploy preview for the-carbon-components ready! Built with commit b0fd7f4 https://deploy-preview-5125--the-carbon-components.netlify.com |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems great, also totally understand if you want to add support for translation per the feedback above 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! 👍 ✅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍 - Thanks @abbeyhrt!
Closes #4246
This PR adds a hidden span that will announce the state of the step, "Complete", "current", or "invalid" for screenreaders.
Changelog
New
span
announcing step completionChanged
div
withrole="button"
to abutton
elementrole="button"
Testing / Reviewing
Using whatever screenreader you prefer to test the component and ensure that the completion state is announced.