[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 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
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時間
マージ済み PR（30日）
54

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

UI5/webcomponents のほかの issue

UI5/webcomponents の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。