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

Aperta
  • Qualcosa non va?
#14,182 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

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
Lingua principale
TypeScript
Stelle
1.8k
Fork
290
Merge medio
2g 13h
PR unite (30g)
50

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di UI5/webcomponents

Tutte le issue di UI5/webcomponents

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.