patternfly / patternfly/patternfly-react
Menu: MenuFooter children excluded from arrow-key navigation
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
Description
Children placed inside MenuFooter (e.g., a "Browse" button) are excluded from the Menu component's roving tabindex arrow-key navigation. Users can Tab to reach MenuFooter items, but arrow keys skip over them entirely.
This breaks the expected keyboard pattern where all interactive items within a menu are reachable via arrow keys.
WCAG Impact
- 2.1.1 Keyboard — All interactive elements within the menu should be reachable via the menu's keyboard navigation pattern (arrow keys)
Steps to Reproduce
- Create a
Menuwith severalMenuItementries and aMenuFootercontaining aButton - Open the menu and use arrow keys to navigate
- Observe that arrow keys cycle through
MenuItementries but never reach theMenuFooterbutton - The
MenuFooterbutton is only reachable viaTab, which exits the menu's roving tabindex pattern
Expected Behavior
Arrow-key navigation should include MenuFooter children as the last item(s) in the navigation sequence, or there should be an opt-in mechanism to include footer actions in the roving tabindex.
Context
We use MenuFooter to place a "Browse" action inside select dropdowns (e.g., PageFormAsyncSingleSelect in ansible/ansible-ui). Keyboard users cannot reach the Browse button via arrow keys, only via Tab — which is inconsistent with the rest of the menu's keyboard model.
Jira Issue: PF-4544
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず Menu および MenuFooter コンポーネントの実装と、それらのキーボードナビゲーションのテストを見つけ、次に MenuItem エントリとフッターの Button を使って報告された挙動を再現します。roving tabindex の項目がどのように収集されるかを追跡します。フッターの children が矢印キーによるナビゲーションに参加し、テストで期待される順序をカバーできれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 64/100