patternfly / patternfly/patternfly-react

Menu: MenuFooter children excluded from arrow-key navigation

Ouverte
#12,614 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
862
Forks
392
Merge moyen
4 j 8 h
PR mergées (30 j)
9

Description

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

  1. Create a Menu with several MenuItem entries and a MenuFooter containing a Button
  2. Open the menu and use arrow keys to navigate
  3. Observe that arrow keys cycle through MenuItem entries but never reach the MenuFooter button
  4. The MenuFooter button is only reachable via Tab, 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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par localiser les implémentations des composants Menu et MenuFooter ainsi que leurs tests de navigation au clavier, puis reproduisez le comportement signalé avec des entrées MenuItem et un Button dans le footer. Suivez la manière dont les éléments avec roving tabindex sont collectés. Le travail est terminé lorsque les enfants du footer participent à la navigation avec les touches fléchées et que les tests couvrent la séquence attendue.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
64/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.