Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

aria-invalid is not supported on handles

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,097 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
90/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia tracciando il modo in cui Slider inoltra le prop di accessibilità ai suoi handle dello slider, in particolare la gestione esistente di ariaRequired e di ariaDescribedByForHandle specifico per l’handle. Aggiungi una prop booleana ariaInvalid che renda aria-invalid su ogni handle. Fatto significa che la prop raggiunge ogni handle e che sono verificati il tipo previsto, il comportamento e la copertura dell’accessibilità.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
3.1k
Fork
766
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/slider

Tutte le issue di react-component/slider

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.