angular / angular/components

bug(cdk/menu): With NVDA enabled, keyboard focus doesn't show up

Open
#26,080 1 comment 0 reactions 0 assignees View on GitHub
Accessibility area: material/menu P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

keyboard focus is not working on CDK menu. But seems cdkMenuBar is working fine..

### Reproduction

Steps to reproduce:
1. https://material.angular.io/cdk/menu/examples#cdk-menu-standalone-menu
2. check below GIF for the issue
![a11y-issue](https://user-images.githubusercontent.com/1803942/203821589-228d1f8a-b02e-4946-9839-e6cea9dee673.gif)

### Expected Behavior

With NVDA enabled, keyboard focus can't be focused on first item. And arrow key should be working fine

### Actual Behavior

With NVDA enabled, keyboard focus doesn't focus on first item. And arrow key not working fine

### Environment

- Angular: 15
- CDK/Material: 15
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the CDK menu standalone example at the linked Angular Material page and reproduce the behavior in Chrome with NVDA on Windows. Done means the first menu item receives keyboard focus and arrow-key navigation works as expected.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.