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

未关闭 适合新手
  • 哪里不对？
#14,273 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 2 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
78/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
typescript, web-dev
领域
accessibility, frontend

调研方向

从 packages/main/src/ListItemTemplate.tsx 中的 selectionElement() 开始，检查 issue 中所述的单选 RadioButton 和外层 li 的无障碍语义。检查隐藏内部控件后，屏幕阅读器是否仍会播报该选项，然后运行相关的无障碍或列表项测试。完成标准是：单选选项播报其可见标签，而不播报通用的“Item Selection”。

由索引模型根据 Issue 内容生成。

描述

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

主要语言
TypeScript
星标
1.8k
派生
290
平均合并
2 天 14 小时
30 天内合并 PR
54

环境准备

从这里开始

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

UI5/webcomponents 的其他 Issue

查看 UI5/webcomponents 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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