bug: ion-modal - aria-labelledby on the host does not reach the dialog element
メンテナーはふだん 1 日以内に返信
評価
- 難易度
- 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
- 平均マージ
- 2日 21時間
- マージ済み PR（30日）
- 65
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
ionic-team/ionic-framework のほかの issue
-
bug: input-otp, backspace in an empty box only moves focus instead of clearing the previous box対応中かも @sarankumar1325 が 10 日前に担当しました。 オープン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 が 33 日前に担当しました。 オープン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 が 28 日前に担当しました。 オープン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 が 68 日前に担当しました。 オープン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
-
area: frontend priority: normal
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
formbricks/formbricks#9918 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
thecodacus/pithagoras#364 ·
メンテナーはふだん 1 日以内に返信
-
TestAutonomousStop_ReportsObservedState fails under host load: 1s wall-clock ceiling vs 250ms cycleオープンtype:bug
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
nightgauge/nightgauge#2909 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
メンテナーはふだん 1 日以内に返信