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

[SF][A11y][ui5-select] Conflicting ARIA: role="combobox" rendered with aria-roledescription="Listbox" (confuses screen-reader users)

Abierto Apto para principiantes
  • ¿Algo no está bien?
#14,212 2 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 3 días

@PetyaMarkovaBogdanova ya está trabajando en esto.

Desde el 29/10/2026.

Evaluación

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

Línea de trabajo

Empieza por src/SelectTemplate.tsx y sigue _ariaRoleDescription hasta la entrada SELECT_ROLE_DESCRIPTION en src/i18n/messagebundle.properties. Comprueba el comportamiento de accesibilidad esperado para el combobox de selección y revisa las pruebas existentes de sus atributos ARIA renderizados. La tarea estará terminada cuando el control se anuncie de forma coherente con su rol de combobox y pasen las pruebas pertinentes.

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

Descripción

bug Medium Prio TOPIC P
Describe the bug

We got a customer issue
The ui5-select root element renders two conflicting ARIA semantics on the same node:

  • role="combobox"
  • aria-roledescription="Listbox"

Because aria-roledescription overrides how assistive technology announces the
element's role, a control that is implemented and behaves as a combobox is
announced to screen-reader users as a "Listbox". This is contradictory and
creates confusion about how to interact with the control (a listbox and a
combobox have different interaction models and keyboard expectations).

A consuming application cannot correct this: the ARIA is set inside the
component's shadow DOM, and ui5-select exposes no public property to override
role or aria-roledescription (only accessibleName, accessibleNameRef,
accessibleDescription, accessibleDescriptionRef).

Source (confirmed in v2.28.1)

src/SelectTemplate.tsx — the .ui5-select-label-root div:

<div
  class="ui5-select-label-root"
  role="combobox"
  aria-haspopup="listbox"
  aria-roledescription={this._ariaRoleDescription}   // <-- resolves to "Listbox"
  aria-expanded={this._isPickerOpen}
  ...
>

_ariaRoleDescription resolves to the i18n key SELECT_ROLE_DESCRIPTION, whose
value in src/i18n/messagebundle.properties is:

  SELECT_ROLE_DESCRIPTION=Listbox

So the final DOM is role="combobox" + aria-roledescription="Listbox".

Isolated Example

No response

Reproduction steps
  1. Go to https://ui5.github.io/webcomponents-react/v2/?path=/docs/inputs-select--docs
  2. Inspect the shadow DOM .ui5-select-label-root → it has role="combobox" and aria-roledescription="Listbox".
  3. With a screen reader (JAWS/NVDA/VoiceOver), focus the control → it is announced as a "Listbox" while behaving as a combobox.
Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.28.1

UI5 Web Components Version

2.28.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output
Organization

No response

Declaration
  • I’m not disclosing any internal or sensitive information.
Lenguaje dominante
TypeScript
Estrellas
1.8k
Forks
290
Merge medio
3 d 12 h
PR fusionados (30 d)
54

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 UI5/webcomponents

Todos los issues de UI5/webcomponents

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.