patternfly / patternfly/patternfly-react
Menu: MenuFooter children excluded from arrow-key navigation
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- TypeScript
- Star
- 862
- Fork
- 392
- Merge trung bình
- 4 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 9
Mô tả
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
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách xác định các phần triển khai của component Menu và MenuFooter cùng các bài test điều hướng bằng bàn phím của chúng, sau đó tái hiện hành vi được báo cáo bằng các mục MenuItem và một Button trong footer. Theo dõi cách các mục roving tabindex được tập hợp. Công việc được hoàn tất khi các phần tử con của footer tham gia điều hướng bằng phím mũi tên và các bài test bao phủ đúng thứ tự dự kiến.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react, typescript
- Lĩnh vực
- accessibility, frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 64/100