-
Notifications
You must be signed in to change notification settings - Fork 167
Add valueText prop onto progress bar for readability. #1851
Conversation
/** | ||
* Value passed to aria-valuetext for accessibility | ||
*/ | ||
valueText: PropTypes.string, |
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 like this prop should be required if needed for accessibly. Because we need to be passive, should we
- log an issue to make this prop required in the next MVB
- and add a non-prod warning message saying this prop will be made required in the next MVB and should be supplied for accessibility?
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.
I don't think this attribute is always required, reading through the documentation it sounds like screen readers should be able to interpret the valueNow if represented as a percentage and the valueText is usually used to represent non-numeric / non-percentage based valueNows. But it does make me wonder whether or not we should be locking down the other aria attributes for min, max, and valueNow
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-valuetext
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-valuenow
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.
What are you thinking of locking them down to?
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.
If this shouldn't be required, can we beef up the description to describe when this prop should be used with a link to the accessibility information? I imagine consumers would find that useful!
@JakeLaCombe Should we add an example / test to verify accessibly when this value isn't provided? |
Functional verification completed. The progress bar example values now can be read by screen readers. |
Summary
Resolves #1838
Progress Bars have a hard time reading values of a progress bar to users in a human readable fashion. To resolve this, aria-valuetext can be used which is the text that is read to users through the screen reader.