angular / angular/components

bug(CDK Dialog): aria-hidden is not removed when a child dialog is opened before but closed after a parent dialog.

Open
#30,028 0 comments 0 reactions 0 assignees View on GitHub
area: cdk/dialog 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

When an application uses routing, the application has its CDK `Dialog` instance (A), and the route's component has its own CDK `Dialog` instance (B), which has A as its parent.

When B opens a component in an overlay, it sets the **aria-hidden** attributes.

When the application provides a set of shared dialog components and a service to open them, they are opened from A, and **aria-hidden** attributes are not set because they are already present. (see [Dialog._hideNonDialogContentFromAssistiveTechnology](https://github.com/angular/components/blob/ef9cff380771da821fbf018b0e58ed4c0600b355/src/cdk/dialog/dialog.ts#L375C11-L375C55)).

When B removes the last dialog (see [Dialog._removeOpenDialog](https://github.com/angular/components/blob/ef9cff380771da821fbf018b0e58ed4c0600b355/src/cdk/dialog/dialog.ts#L348)) while its parent (A) has dialogs open, the aria-hidden attributes are not removed.

This means that because the parent CDK dialog (A) doesn't know that the child dialog had any attributes set, the **aria-hidden** attributes are never removed again, and the application becomes inaccessible to assistive technologies.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-aa1qpb
Steps to reproduce:
1. Click on Load Child
2. Click on Show Dialog
3. In the dialog click 'save and close'
4. observe the 'wait dialog' being opened (before the Dialog is closed)
5. the dialog is closed
6. after the wait dialog is closed check the

### Expected Behavior

All **aria-hidden** attributes **set** by dialogs are removed again.

### Actual Behavior

The aria-hidden attributes set by CDK `Dialog` B remain.

### Environment

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

Contributor guide

Open the contributing guide

Research direction

Start in src/cdk/dialog/dialog.ts at _hideNonDialogContentFromAssistiveTechnology and _removeOpenDialog, following the parent and child Dialog flow described in the reproduction. Reproduce the routing scenario from the linked StackBlitz, then verify that aria-hidden attributes set by the child dialog are removed after both dialogs close.

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
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.