bug: ion-modal - aria-labelledby on the host does not reach the dialog element
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 65/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- typescript
调研方向
Start with ion-modal and its inheritAriaAttributes / htmlAttributes handling, then inspect the dialog element in the shadow root and related accessibility tests. Reproduce with the linked modal example by setting aria-labelledby on the host and inspecting the presented dialog. Done means the dialog receives the label reference and the accessibility tree announces its title.
由索引模型根据 Issue 内容生成。
描述
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
The documentation states that aria-labelledby can be set on ion-modal to name the dialog.
The role="dialog" element lives in the shadow root and only aria-label and role are
forwarded to it (inheritAriaAttributes / htmlAttributes); aria-labelledby set on the host
or via htmlAttributes stays on the host, which has no role, so the dialog is announced
without a name. Naming works only with a literal aria-label, which duplicates the visible
title and is not kept in sync with it.
Verified with the reproduction on Ionic 8.8.5 (Chrome 154, page "4 ion-modal aria-labelledby"): host
aria-labelledby="modal-title", inner [role=dialog] has neither aria-labelledby nor aria-label.
Expected Behavior
The documentation states that aria-labelledby can be set on ion-modal to name the dialog.
The role="dialog" element lives in the shadow root and only aria-label and role are
forwarded to it (inheritAriaAttributes / htmlAttributes); aria-labelledby set on the host
or via htmlAttributes stays on the host, which has no role, so the dialog is announced
without a name. Naming works only with a literal aria-label, which duplicates the visible
title and is not kept in sync with it.
Verified with the reproduction on Ionic 8.8.5 (Chrome 154, page "4 ion-modal aria-labelledby"): host
aria-labelledby="modal-title", inner [role=dialog] has neither aria-labelledby nor aria-label.
Steps to Reproduce
<ion-modal aria-labelledby="t"><ng-template><h2 id="t">Antrag stellen</h2>...</ng-template></ion-modal>- Present the modal and inspect the accessibility tree: the dialog has no name.
Code Reproduction URL
https://stackblitz.com/github/mrambow/starterApp/tree/a11y-repros (page /repro/modal)
GitHub: https://github.com/mrambow/starterApp/tree/a11y-repros (src/app/repros/modal.page.ts)
Code Reproduction URL
https://github.com/mrambow/starterApp/tree/a11y-repros
Ionic Info
Ionic 8.8.5, Angular 17.3, Capacitor 6 (reproduction); found in Ionic 8.8.5, Angular 21, Capacitor 8
Additional Information
No response
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 3 天 4 小时
- 30 天内合并 PR
- 72
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
ionic-team/ionic-framework 的其他 Issue
-
bug: input-otp, backspace in an empty box only moves focus instead of clearing the previous box可能已有人在做 @sarankumar1325 于 8 天前认领。 未关闭package: core type: bug
难度 2/5 1-3 小时 新手友好度 90/100
ionic-team/ionic-framework#31639 · 1 条评论 ·
维护者通常 1 天内回复
-
bug: vue swipe cancellation throws when the previous page is missing可能已有人在做 @dandoingdev 于 31 天前认领。 未关闭package: vue type: bug
难度 2/5 1-3 小时 新手友好度 78/100
ionic-team/ionic-framework#31514 · 1 条评论 ·
维护者通常 1 天内回复
-
bug: ion-searchbar input is always labelled "search text"; aria-label on the host is not forwarded可能已有人在做 @HappyKnuckles 于 26 天前认领。 未关闭a11y package: core type: bug
难度 2/5 1-3 小时 新手友好度 84/100
ionic-team/ionic-framework#31492 · 1 条评论 ·
维护者通常 1 天内回复
-
bug: IonTabs throws when a Fragment contains one IonRouterOutlet可能已有人在做 @Benziza 于 67 天前认领。 未关闭package: react type: bug
难度 2/5 1-3 小时 新手友好度 72/100
ionic-team/ionic-framework#31410 · 2 条评论 ·
维护者通常 1 天内回复
-
package: angular type: bug
难度 2/5 1-3 小时 新手友好度 86/100
ionic-team/ionic-framework#31291 · 1 条评论 ·
维护者通常 1 天内回复
查看 ionic-team/ionic-framework 的全部 Issue
相似的 Issue
-
triage
难度 2/5 1-3 小时 新手友好度 82/100
维护者通常 1 天内回复
-
🎙️ task - drop the raw `./node_modules/.bin/rhachet roles boot` line from bhuild's feedback template未关闭
难度 2/5 1-3 小时 新手友好度 62/100
ehmpathy/rhachet-roles-bhuild#639 ·
维护者通常 1 天内回复
-
e2e-failure ready-to-code
难度 2/5 1-3 小时 新手友好度 70/100
redhat-developer/rhdh-plugin-export-overlays#4650 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 13 天内回复
-
难度 2/5 1-3 小时 新手友好度 75/100
omdsh-dev/DSH-better-sidebar#1098 ·
维护者通常 2 天内回复