angular / angular/components

No Main Landmark when Mat Dialog is Open

オープン
#22,656 コメント 3 件 リアクション 3 件 担当者 0 名 GitHub で見る
Accessibility area: cdk/overlay need a11y consult P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

When running accessibility assessments I consistently face the "Document must have one main landmark" violation when a mat-dialog is open (despite there being a main landmark in the main shell of our app's markup). When dialogs are closed, there is no issue with this specific violation. I've tried adding a role="main" but this actually causes the accessibility engine to detect both main landmarks and thus reports "Can not have more than one main landmark". Adding role="dialog" to the top level div of the dialog container does not resolve the issue either, though it could be possible that this div level is too nested for a11y to detect the role. Could also be possible this is just an issue inherent in modern modal dialog rendering strategies, as I'm seeing the same violation on other sites such as Facebook and Trello. Curious to hear others' thoughts / assessments on this.

*Note* - I get the same results when testing with both axeDevTools and WAVE

![MainLandmark](https://user-images.githubusercontent.com/55161966/117691630-1fad8200-b18a-11eb-98de-8dcb358099bb.PNG)
![Markup](https://user-images.githubusercontent.com/55161966/117691632-20461880-b18a-11eb-8155-40b13020a24c.png)

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

issue に記載されているとおり、開いた状態の mat-dialog のケースを再現し、axeDevTools と WAVE の両方を実行する。missing-main-landmark 違反がダイアログのレンダリング戦略に対して想定されるものなのか、それともコンポーネントのアクセシビリティ上の欠陥を示しているのかを判断する。完了の条件は、明確な評価に到達し、必要であれば影響を受けるダイアログのエントリポイントを特定することである。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。