Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

aria-invalid is not supported on handles

Open Beginner friendly
  • Is something wrong?
#1,097 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
90/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend

Research direction

Start by tracing how Slider forwards accessibility props to its slider handles, especially the existing ariaRequired and handle-specific ariaDescribedByForHandle handling. Add an ariaInvalid boolean prop that renders aria-invalid on each handle. Done means the prop reaches every handle and its expected type, behavior, and accessibility coverage are verified.

Written by the indexing model from the issue text.

Description

A handle (role="slider") can be given aria-label, aria-labelledby, aria-describedby (#1088), aria-required and aria-valuetext, but not aria-invalid. WAI-ARIA 1.2 supports aria-invalid on the slider role, and it is how a screen reader learns that a field's value failed validation. Without it, a form can show a slider's error only visually.

Slider drops the aria-* props it is given, and the handle takes nothing beyond its own props, so the only way to set it is to change the DOM after render, the workaround #1040 described for aria-describedby.

antd shows the gap. Form.Item passes aria-invalid, aria-describedby and aria-required to its child control. An Input gets all three, but Slider drops them (antd 6.6.6, @rc-component/slider 1.1.1):

<Form fields={[{ name: ['name'], errors: ['Too short'] }, { name: ['volume'], errors: ['Too quiet'] }]}>
  <Form.Item name="name" label="Name" required extra="Your name">
    <Input />
  </Form.Item>
  <Form.Item name="volume" label="Volume" required extra="How loud">
    <Slider />
  </Form.Item>
</Form>

renders, with class and style left out:

<input id="name" aria-describedby="name_help name_extra" aria-required="true" type="text" value="" aria-invalid="true">

<div tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-disabled="false"
  aria-orientation="horizontal"></div>

Could the slider take an ariaInvalid?: boolean prop alongside ariaRequired, rendered as aria-invalid on each handle? antd could then pass it through as it did ariaDescribedByForHandle (ant-design/ant-design#59110), and its Slider could give the handle the aria-invalid, aria-describedby and aria-required that Form.Item hands it.

We hit this in react-jsonschema-form's antd theme, which can't mark its slider invalid: rjsf-team/react-jsonschema-form#5560.

Dominant language
TypeScript
Stars
3.1k
Forks
766
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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.

More from react-component/slider

All issues in react-component/slider

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.