patternfly / patternfly/patternfly-react
MenuToggle does not derive accessible name from visible text children
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
Description
When MenuToggle renders with visible text children (e.g., <MenuToggle>Actions</MenuToggle>), it does not automatically derive its accessible name from that text. Consumers must manually duplicate the text in an aria-label prop, which is error-prone and violates WCAG 2.5.3 (Label in Name).
WCAG Impact
- 2.5.3 Label in Name — For UI components with visible text labels, the accessible name must contain the visible text. If
MenuToggledoesn't derive its accessible name from its children, speech-input users who say "click Actions" may not activate the correct control.
Steps to Reproduce
- Render
<MenuToggle>Actions</MenuToggle>without anaria-label - Inspect the element's computed accessible name in browser DevTools or a screen reader
- The accessible name may not match the visible "Actions" text
Expected Behavior
MenuToggle should derive its accessible name from its text children by default, similar to how a standard <button>Actions</button> does. An explicit aria-label should only be needed for icon-only toggles (kebab menus).
Current Behavior
Consumers must manually provide aria-label="Actions" even when the text "Actions" is already visible in the toggle. Our codebase (ansible/ansible-ui) has hardcoded fallback aria-label values like 'kebab dropdown toggle' and 'dropdown toggle' that don't match the visible text, precisely because the component doesn't handle this automatically.
Jira Issue: PF-4545
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
MenuToggle コンポーネントから調査を開始し、aria-label を持たずに表示テキストの子要素を受け取った場合に、アクセシブルネームがどのように計算されるかを確認します。この動作を標準のボタンと比較し、アイコンのみのトグルで明示的なラベルがどのように動作すべきかを判断します。表示テキストの子要素がデフォルトでアクセシブルネームを提供し、明示的な aria-label の値はアイコンのみのトグルで使用できる状態になれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 55/100