angular / angular/components

bug(mat-calendar): The calendar contains toggle buttons that do not behave like toggle buttons (Accessibility)

オープン
#30,190 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る
Accessibility area: material/datepicker P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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 mat-calendar component contains a button for each selectable date. When navigating the calendar using a screen reader, each button will be read as "toggle button" indicating that the buttons state should change each time the button is pressed. However the button does not behave like a toggle button. Once the button is toggled it cannot be "untoggled", potentially causing confusion for the user. I believe the `aria-pressed` attribute on the button should be removed to correctly reflect the buttons behaviour.

This was discovered during a recent accessibility evaluation and they provided the following link: https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html

### Reproduction

Example link: https://material.angular.io/components/datepicker/overview#datepicker-inline-calendar

Steps to reproduce:
1. Use the example link in the browser (I used Chrome)
2. Start the screen reader (I used VoiceOver on MacOS)
3. Navigate to the calendar dates an hear them being read as "toggle button"
4. Realize that you cannot change the pressed state of the toggle button by pressing it multiple times

### Expected Behavior

That the button isn't announced as a toggle button when it doesn't behave like a toggle button.

### Actual Behavior

The button is announced as a toggle button even though it doesn't behave like one.

### Environment

- Angular: 19.0.4
- CDK/Material: 19.0.3
- Browser(s): Chrome (similar result expected in other browsers)
- Operating System: macOS

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

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

調査の方向性

datepicker の inline-calendar の例に表示される mat-calendar の日付ボタンから始め、どこで aria-pressed 属性が適用されているかを特定します。変更後にスクリーンリーダーで動作を確認します。選択可能な日付がトグルボタンとして読み上げられなくなり、カレンダーとしての動作が維持されていれば完了です。

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

評価

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

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

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