react-component / react-component/slider

Screenreader should speak mark label instead of value

Open
#692 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.1k
Forks
768
Avg merge
11d 22h
Merged PRs (30d)
5

Description

How can I accomplish this so that a screenreader (VoiceOver) will speak the label of the currently selected mark instead of its value? e.g. in the example below, I would like to hear spoken whatever mark is currently selected as 'Efficient', 'Acceptable', 'Functional', or 'Disorganized' NOT 0.05, 0.10, 0.15, or 0.20.

<SliderInput name="csc_rate_work_order_mgmt" label="Describe Your Current Work Order Management Process." value={0.15} min={0.05} max={0.20} step={0.05} reverse marks={{ 0.05: {label: 'Efficient'}, 0.10: {label: 'Acceptable'}, 0.15: {label: 'Functional'}, 0.20: {label: 'Disorganized'} }} />

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the SliderInput example in the issue and inspect how marks and the slider's accessibility output are handled. Test the example with VoiceOver, including each marked position, and verify that the spoken text is the mark label rather than its numeric value.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.