-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
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
Issue Description:
When users navigate table rows with keyboard arrow keys, screen readers such as NVDA and JAWS announce "blank" for each cell containing only a mat-checkbox, regardless of whether the checkbox (or cell) includes plain text, a visible label, an ARIA label, or visually hidden text.
Arrow navigation focuses on the mat-cell, not the checkbox itself.
As a result, the cell’s accessible name is not set or recognized, breaking expectations for accessible data tables and preventing screen reader users from knowing about the checkbox’s function or label.
Attempts to Resolve:
Added visible and visually hidden text, ARIA attributes (aria-label, aria-labelledby) to both the checkbox and the cell.
Changed cell roles (role="presentation", role="none").
None worked—the issue persists across Chrome and Firefox with latest Angular Material.
Impact:
This prevents screen reader users from understanding the table’s contents and interacting with checkboxes using keyboard navigation—contrary to accessibility guidelines for tables and forms.
Request:
Please investigate this problem. If a workaround or future fix is planned, guidance or updates would be greatly appreciated for developers and accessibility advocates.
Reproduction
Angular site mat table example with mat checkbox column link:
- Steps to Reproduce:
Create an Angular Material table with a column of mat-checkbox elements (with or without labels/text/ARIA attributes inside or outside the checkbox).
Use NVDA or JAWS and keyboard arrow keys to navigate between table cells.
Observe screen reader announces "blank" for these cells.
2.
Expected Behavior
Expected Behavior:
When a user navigates via arrow keys, the cell should announce the checkbox and its label/text.
Actual Behavior
Actual Behavior:
Screen readers consistently announce "blank" for every checkbox-only cell during arrow navigation.
Environment
- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):