patternfly / patternfly/patternfly-react

Menu: MenuFooter children excluded from arrow-key navigation

Open
#12,614 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Menu and MenuFooter component implementations and their keyboard-navigation tests, then reproduce the reported behavior with MenuItem entries and a footer Button. Trace how roving tabindex items are collected. Done means footer children participate in arrow-key navigation, with tests covering the expected sequence.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.