Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

aria-invalid is not supported on handles

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,097 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
90/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

Empieza por analizar cómo Slider reenvía las props de accesibilidad a sus handles de slider, especialmente el tratamiento existente de ariaRequired y del ariaDescribedByForHandle específico del handle. Añade una prop booleana ariaInvalid que renderice aria-invalid en cada handle. Terminar significa que la prop llega a todos los handles y que se verifican su tipo esperado, su comportamiento y la cobertura de accesibilidad.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
3.1k
Forks
766
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-component/slider

Todos los issues de react-component/slider

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.