Separator adds a redundant role="separator" to its default <hr>

Abierto Apto para principiantes
#10,894 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@Janani-bn ya está trabajando en esto.

Desde el 2/11/2026.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
74/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
html, react, typescript

Línea de trabajo

Lee la implementación de Separator y la lógica de useSeparator que esta llama, centrándote en cómo se transmite el tipo de elemento predeterminado hr. Reproduce el problema con <Separator /> y luego verifica que el hr renderizado no tenga un rol redundante, mientras que los elementos que no son hr y se eligen explícitamente conservan el comportamiento previsto.

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

Descripción

Provide a general summary of the issue here

<Separator /> renders <hr role="separator">.

Separator falls back to 'hr' (let Element = elementType || 'hr') but passes the original, undefined elementType to useSeparator, whose if (props.elementType !== 'hr') then adds the role. Passing elementType="hr" explicitly avoids it.

HTML validators flag the redundant role (html-validate no-redundant-role).

🤔 Expected Behavior?

an <hr> without role="separator".

😯 Current Behavior

<hr role="separator">, because Separator passes the original elementType (undefined) to useSeparator, not the 'hr' it renders.

💁 Possible Solution

pass elementType: Element to useSeparator.

🔦 Context
🖥️ Steps to Reproduce

<Separator />

Version

react-aria-components 1.21.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OS X

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 19 h
PR fusionados (30 d)
41

Preparar el entorno

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 adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.