Carousel: no API to specify accessible name for individual slide listitem elements

Abierto
  • ¿Algo no está bien?
#14,182 2 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

Este issue todavía no se ha evaluado.

Descripción

enhancement TOPIC RD

Description

The ui5-carousel component renders each slide as role="listitem" inside a shadow DOM role="list" container. These listitem elements have no accessible name — the accessibility tree shows listitem "" (empty name) for every slide.

There is currently no API that allows callers to specify an accessible name per slide from the light DOM. The component does not propagate aria-label from slotted items to the shadow listitem wrappers, and there is no typed prop or slot mechanism for this purpose.

Steps to Reproduce

  1. Create a ui5-carousel with multiple content items
  2. Inspect the accessibility tree in browser DevTools
  3. Observe that each slide wrapper has role="listitem" with an empty accessible name ("")

Current Behavior

From CarouselTemplate.tsx:

<div
  role="listitem"
  aria-posinset={itemInfo.posinset}
  aria-setsize={itemInfo.setsize}
  tabindex={itemInfo.tabIndex}
>
  <slot name={itemInfo.item._individualSlot}></slot>
</div>

The listitem has position attributes but no aria-label/aria-labelledby, and there is no mechanism for the caller to contribute a name to this shadow DOM element.

Accessibility tree:

list "Item Container"
  listitem ""  focusable: true    ← no accessible name
    [all slide content]
  listitem ""  focusable: true

Expected Behavior

Each listitem should have an accessible name identifying the slide. Screen readers would announce it when focus lands on a slide, giving users immediate context.

Proposed approach: if the directly slotted element has an aria-label, the Carousel copies it onto the shadow listitem:

<div
  role="listitem"
  aria-label={itemInfo.item.getAttribute?.("aria-label") ?? undefined}
  aria-posinset={itemInfo.posinset}
  aria-setsize={itemInfo.setsize}
  tabindex={itemInfo.tabIndex}
>

Caller usage:

<ui5-carousel accessible-name="Needs Attention">
  <div aria-label="My Team"><!-- card content --></div>
  <div aria-label="Pending Approvals"><!-- card content --></div>
</ui5-carousel>

Impact

  • Screen readers cannot identify which slide is focused
  • Without a name on the listitem, browse-mode screen readers fall through into slide content rather than treating the slide as a navigable unit
  • Users cannot build a mental model of carousel content from keyboard navigation alone

WCAG Reference

  • 1.3.1 Info and Relationships — listitem role conveys no information about slide identity
  • 4.1.2 Name, Role, Value — focusable listitem has no accessible name

Environment

  • @ui5/webcomponents 2.24
  • Browser: Chrome
  • Screen reader: JAWS 2026
Lenguaje dominante
TypeScript
Estrellas
1.8k
Forks
290
Merge medio
2 d 13 h
PR fusionados (30 d)
50

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.