bug(COMPONENT FOCUS): Focus indicators rely primarily on low-contrast background color and are not sufficiently visible (WCAG 2.4.7 / 2.4.11) #32725
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
We’ve observed a recurring accessibility issue across several Angular Material components where the keyboard focus indicator relies primarily on a subtle background color change, often without a visible outline or border.
In many cases, the focus state is indicated only by a light background shade (e.g., light grey or light blue), which is difficult or impossible to perceive, especially:
- For users with low vision
- For users with color vision deficiencies
- In bright environments or low-quality displays
- When components are placed on similar colored backgrounds
This affects multiple components, including (but not limited to):
- Buttons
- Icon buttons
- List items
- Menu items
- Tabs
- Select options
- Table rows / interactive rows
Why this is an accessibility problem
WCAG 2.4.7 – Focus Visible (Level AA)
Keyboard focus must be visible.
- In many Angular Material components, the current focus indicator:
- Has no distinct shape (no outline, border)
- Is visually indistinguishable from hover or selected states
- This makes keyboard navigation extremely difficult for users who rely on visible focus.
From an accessibility testing perspective:
- Users cannot reliably tell where focus is on the page
- Screen magnifier users lose orientation
- Keyboard-only users frequently get “lost” in complex UIs
- The UI technically supports keyboard, but practically fails usability
This results in applications built with Angular Material failing accessibility compliance (WCAG) unless we manually override focus styles.
Expected behavior
Angular Material components should provide, by default: A clearly visible focus indicator
With a distinct visual affordance, such as:
- Outline
- Border
Currently we have to implement custom global CSS overrides just to achieve basic focus visibility, which defeats the purpose of a component library that claims accessibility support out of the box.
Reproduction
StackBlitz link:
Steps to reproduce:
1.
2.
Expected Behavior
Angular Material components should provide, by default: A clearly visible focus indicator
Actual Behavior
Only backgroing color appears on focus, and this color is very light and very hard to notice by the users with vision impairements.
Environment
- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):