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

Đang mở
  • Có gì không ổn?
#14,182 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
290
Merge trung bình
2 ngày 13 giờ
Pull request đã merge (30 ngày)
50

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của UI5/webcomponents

Tất cả issue của UI5/webcomponents

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.