patternfly / patternfly/patternfly-react
Menu: MenuFooter children excluded from arrow-key navigation
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 862
- Forks
- 392
- Ø Merge
- 4 T. 8 Std.
- Gemergte PRs (30 T.)
- 9
Beschreibung
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, die Implementierungen der Menu- und MenuFooter-Komponenten sowie deren Tests für die Tastaturnavigation zu finden, und reproduziere anschließend das gemeldete Verhalten mit MenuItem-Einträgen und einem Footer-Button. Verfolge, wie Elemente mit roving tabindex gesammelt werden. Als erledigt gilt die Aufgabe, wenn Footer-Children an der Navigation mit den Pfeiltasten teilnehmen und Tests die erwartete Reihenfolge abdecken.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 64/100