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
10.2.7
Description
When user mouse clicks a checkbox/radio button/slide toggle with a mouse (not keyboard, not programatically), the clicked element contains cdk-program-focused class instead of cdk-mouse-focused (it always has cdk-focused which is correct). I want to use this cdk-program-focused CSS class to draw special visible focus for accessibility purposes but I don't want this special CSS visible for mouse clicks. cdk-keyboard-focused works flawlessly without any issues when user focuses checkbox/radio button/slide toggle with keyboard (even with NVDA on).
I don't know the logic behind this so maybe this was done by design to avoid some accessibility issues with focus monitoring.
Is this by design? It used to work in Material v10.
Reproduction
Steps to reproduce:
- Navigate to the demos at https://material.angular.io/components/checkbox/overview or https://material.angular.io/components/radio/overview
- Mouse Click the demo radio button/checkbox so it is checked
- Open browser DevTools and find the element that you just clicked and look for CSS classes it contains
Expected Behavior
cdk-mouse-focused should be present in the element, not cdk-program-focused when user clicked the element with a mouse
Actual Behavior
cdk-program-focused is present in the element instead of cdk-mouse-focused
Environment
- Angular: 14.0.3
- CDK/Material: 14.0.3
- Browser(s): Chrome/Firefox/Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro, Version 21H2 (OS Build 19044.1766)