angular / angular/components

bug(CDK a11y, Tooltip, SortHeader): AriaDescriber not working inside Shadow DOM

未关闭
#24,919 2 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/a11y P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

### 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

The AriaDescriber service creates a container element and appends it to the body. The messages inside the container are linked with the host element using `aria-describedby` when calling `ariaDescriber.describe()`.

When the host element is inside Shadow DOM this will not work properly because the hidden message element (that is referenced via `aria-describedby`) is outside of the Shadow DOM and will be ignored by the browser.

### Reproduction

I actually had the problem with Angular Material Tooltips and Table Sort Header (which use AriaDescriber) but for the repro I use the AriaDescriber service directly. I set a description on a button in the Example component which uses `ViewEncapsulation.ShadowDom`.

Steps to reproduce:
1. Open the repro https://stackblitz.com/edit/components-issue-rxwpmf?file=src/app/example-component.ts
2. Inspect the "Action" button
3. Open the "Accessibility" tab in the inspector

### Expected Behavior

The button should have the description "Some description" which was created via AriaDescriber service.

### Actual Behavior

The button has no description.

![aria-describer-shadowdom](https://user-images.githubusercontent.com/16229645/168264055-4cc41d97-977d-4f3b-a7fd-175242f9ad4a.png)

The `aria-describedby` attribute is there but the referenced element is ignored because it's outside of the Shadow DOM. It works if I set `encapsulation` on the component to `Emulated`.

### Environment

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

贡献指南

打开贡献指南

调研方向

从 AriaDescriber 服务开始,使用链接的、采用 ViewEncapsulation.ShadowDom 的 StackBlitz 示例重现该问题。通过浏览器的 Accessibility 检查器验证行为;当按钮公开“Some description”且仍保留 Shadow DOM 封装时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
accessibility, frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。