[ui5-li | ui5-list]: inner RadioButton announces 'Item Selection.' instead of option label in single-select mode (WCAG 4.1.2)

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

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

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

Línea de trabajo

Empieza en packages/main/src/ListItemTemplate.tsx, en selectionElement(), e inspecciona la semántica de accesibilidad del RadioButton de selección única y del li externo descrita en el issue. Comprueba si ocultar el control interno conserva el anuncio de la opción para los lectores de pantalla y, después, ejecuta las pruebas de accesibilidad o de elementos de lista pertinentes. La tarea estará terminada cuando las opciones de selección única anuncien sus etiquetas visibles sin el genérico «Item Selection».

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

Descripción

Bug Description

In single-select ui5-list mode (e.g. inside ui5-view-settings-dialog), each ui5-li renders an inner RadioButton via the selectionElement() function in ListItemTemplate.tsx. That RadioButton carries a hardcoded aria-label of "Item Selection." (from the i18n key ARIA_LABEL_LIST_ITEM_RADIO_BUTTON).

NVDA (and other screen readers that pierce the shadow DOM) focuses the inner div[role="radio"] inside the RadioButton shadow root and announces:

"Item Selection. radio button not checked"

The actual option label (e.g. "Ascending", "Completion Date", "Title") is never announced, because the inner radio button only carries the generic i18n string.

Root cause chain:

# packages/main/src/i18n/messagebundle_en.properties
ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Item Selection.

// packages/main/src/ListItem.ts  (line ~531)
ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),

// packages/main/src/ListItemTemplate.tsx  — selectionElement()
case this.modeSingleSelect:
  return (
    <RadioButton
      part="radio"
      disabled={this.isInactive}
      accessibleName={this._accInfo.ariaLabelRadioButton}   // ← "Item Selection."
      tabindex={-1}
      id={`${this._id}-singleSelectionElement`}
      class="ui5-li-singlesel-radiobtn"
      checked={this.selected}
      onChange={this.onSingleSelectionComponentPress}
    />
  );

The inner RadioButton's div[role="radio"] therefore gets aria-label="Item Selection.", which is what screen readers announce.

The outer <li> element already carries the correct ARIA semantics:

  • role="radio"
  • aria-checked
  • aria-posinset / aria-setsize
  • The option label is exposed via its text content / aria-labelledby

The inner RadioButton is purely decorative — it is redundant and its generic label conflicts with the accessible name on the host.

Affected Component

ui5-li / ui5-list (in SingleSelect / SingleSelectBegin / SingleSelectEnd mode)

Observed via ui5-view-settings-dialog (sort option list), which uses a single-select List internally.

Expected Behaviour

Screen readers should announce each option with its visible label (e.g. "Ascending radio button not checked"), not the generic string "Item Selection.".

Fix options (in order of preference):

  1. (Preferred — minimal, upstream) Add aria-hidden="true" on the inner RadioButton in selectionElement() when modeSingleSelect. The outer <li role="radio"> already provides all ARIA semantics; hiding the inner radio button removes the duplicate and the misleading announcement.

  2. (Alternative) Derive ariaLabelRadioButton from the list item's own accessible text (e.g. the item's text content or accessibleName prop) instead of the hardcoded i18n string — so the inner radio button, if not hidden, at least announces the correct label.

Isolated Example

Playground: https://ui5.github.io/webcomponents/components/fiori/ViewSettingsDialog/

Steps: Open the playground, click the sort/filter dialog, Tab to a sort option. NVDA will announce "Item Selection. radio button not checked" for each option instead of the option's label.

Steps to Reproduce
  1. Navigate to a page with a single-select ui5-list (e.g. the ViewSettingsDialog playground or any sort dialog)
  2. Tab to a list item in the single-select list
  3. Observe: screen reader announces "Item Selection. radio button not checked" — the option label is not announced

Expected: each option is announced with its visible label ("Ascending", "Descending", "Completion Date", etc.)

Log Output, Stack Trace or Screenshots

Source references confirmed in current main branch:

  • messagebundle_en.properties → ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Item Selection.
  • ListItem.ts → ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON)
  • ListItemTemplate.tsx → selectionElement() passes accessibleName={this._accInfo.ariaLabelRadioButton} to inner RadioButton
Priority

High

Environment Info

UI5 Web Components Version

2.x (root cause in source confirmed against current main branch)

Browser
  • Chrome
  • Edge
  • Firefox
  • Safari
Operating System

macOS, Windows

Additional Info

Organization

SAP-SF

Lenguaje dominante
TypeScript
Estrellas
1.8k
Forks
290
Merge medio
2 d 14 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.