react-component / react-component/slider

Looking to pass aria-labelledby attribute

Open
#380 1 comment 3 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

We're currently using rc-slider in a project headed to production and we're looking to tighten up accessibility. We think we want to use the aria-labelledby attribute as noted: https://www.w3.org/TR/wai-aria-practices/examples/slider/slider-2.html. Based on a cursory look at Range.jsx and Handle.jsx it looks like I may be able to achieve this with a custom Handle? I was looking to confirm this or find an easier alternative (like passing this attribute as a prop to 'Range' component. Here is the markup I'm trying to achieve:

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 by reading Range.jsx and Handle.jsx to determine whether a custom Handle or a prop on Range is the intended entry point for aria-labelledby. Done means the slider handle renders the requested aria-labelledby="experienceFacet" attribute in markup matching the issue’s example.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
accessibility, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.