Skip to content

fix(material/datepicker): replace aria-pressed with aria-selected on …#33235

Open
manichandra wants to merge 1 commit intoangular:mainfrom
manichandra:fix/datepicker-aria-selected
Open

fix(material/datepicker): replace aria-pressed with aria-selected on …#33235
manichandra wants to merge 1 commit intoangular:mainfrom
manichandra:fix/datepicker-aria-selected

Conversation

@manichandra
Copy link
Copy Markdown

@manichandra manichandra commented May 10, 2026

Description

Calendar date cells in mat-calendar-body bind [attr.aria-pressed] to
indicate selection state. This is incorrect:

  • aria-pressed is semantically for toggle buttons — it implies the user
    can press again to deselect
  • mat-datepicker does not allow deselection by re-clicking a selected date
  • Screen readers announce cells as "toggle button, pressed" rather than
    "selected", misleading users about the actual interaction

Per WAI-ARIA 1.2 §6.6.4 and WCAG 2.1 SC 4.1.2 (Name, Role, Value),
aria-selected is the correct attribute for selection state within a
grid widget.

Fixes #30190

Changes

  • calendar-body.html: [attr.aria-pressed][attr.aria-selected]; updated inline comment
  • calendar-cell-harness.ts: isSelected() reads aria-selected
  • calendar-body.spec.ts: test name and assertions updated to match

Testing

Existing test updated — no behavior changes, only the ARIA attribute name.

…calendar cells

Date selection buttons use aria-pressed to indicate selection state. This
is semantically incorrect: aria-pressed applies to toggle buttons where the
user can press again to deselect. Calendar dates cannot be deselected by
re-clicking, so the correct attribute per WAI-ARIA 1.2 and WCAG 2.1 SC
4.1.2 (Name, Role, Value) is aria-selected.

- calendar-body.html: bind [attr.aria-selected] instead of [attr.aria-pressed]
- calendar-cell-harness.ts: isSelected() reads aria-selected attribute
- calendar-body.spec.ts: update test name and assertions to match

Fixes angular#30190
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant