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

未关闭
  • 哪里不对？
#14,182 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 2 天内回复

还没有人认领这个 Issue。

评估

这个 Issue 还没有评估数据。

描述

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
主要语言
TypeScript
星标
1.8k
派生
290
平均合并
2 天 13 小时
30 天内合并 PR
50

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

UI5/webcomponents 的其他 Issue

查看 UI5/webcomponents 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。