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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#14,273 0 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á

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript, web-dev
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu tại packages/main/src/ListItemTemplate.tsx, ở selectionElement(), và kiểm tra ngữ nghĩa trợ năng của RadioButton chọn một và li bên ngoài được mô tả trong issue. Kiểm tra xem việc ẩn điều khiển bên trong có giữ nguyên việc trình đọc màn hình thông báo tùy chọn hay không, sau đó chạy các bài kiểm tra trợ năng hoặc mục danh sách liên quan. Hoàn tất khi các tùy chọn chọn một thông báo nhãn hiển thị của chúng mà không có cụm chung “Item Selection”.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
290
Merge trung bình
2 ngày 14 giờ
Pull request đã merge (30 ngày)
54

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.