Fix: ariaScaleName added to give context of scale measurement (fixes #189) #192
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #189
This will be read out by screen readers when focusing on the scale input (slider handle). Setting an appropriate
ariaScaleName
will give context to which the scale is a measurement of. Note, the naming will be content specific so I haven't provided a default value.An accessible name is required for accessibility, see Mozilla ARIA slider role.
An accessible name is required. If the range's role is applied to an HTML
<input>
element (or<meter>
or<progress>
element), the accessible name can come from the associated<label>
. Otherwise usearia-labelledby
if a visible label is present oraria-label
if a visible label is not present.Testing PR
In component.json, set
ariaScaleName
for the slider component. As the scale name is content specific, I used the following based on the example.json question text."ariaScaleName": "limited capacity of working memory",
With a screen reader running, focus on the slider input (handle) and "scale number, ariaScaleName, slider" should be announced.
e.g "1, limited capacity of working memory, slider"