material-components / material-components/material-web
:focus-visible is set when I click in a sub element in label
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Description
### What is affected?
Accessibility, Component
### Description
When I click in a sub element in label to focus the checkbox, the checkbox is focused with :focus-visible state. I expected it to be focused without this state (like when we click directly on the label).
### Reproduction
The checkbox must not have :focus-visible state when we click on the red span.
https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7Y3VzdG9tRWxlbWVudCwgcHJvcGVydHl9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCAnQG1hdGVyaWFsL3dlYi90ZXh0ZmllbGQvZmlsbGVkLXRleHQtZmllbGQuanMnO1xuaW1wb3J0ICdAbWF0ZXJpYWwvd2ViL2NoZWNrYm94L2NoZWNrYm94LmpzJztcblxuQGN1c3RvbUVsZW1lbnQoJ3NpbXBsZS1ncmVldGluZycpXG5leHBvcnQgY2xhc3MgU2ltcGxlR3JlZXRpbmcgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIHN0eWxlcyA9IGNzc2BcbiAgICAgIHNwYW4ge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XG4gICAgICB9XG4gIGA7XG4gIFxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICAgIDxkaXY-XG4gICAgICAgICAgPGxhYmVsPjxtZC1jaGVja2JveD48L21kLWNoZWNrYm94PkNhbiBjbGljayA8c3Bhbj53aXRoIDpmb2N1cy12aXNpYmxlPC9zcGFuPjwvbGFiZWw-XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxsYWJlbD48bWQtZmlsbGVkLXRleHQtZmllbGQ-PC9tZC1maWxsZWQtdGV4dC1maWVsZD5DYW4gY2xpY2sgPHNwYW4-Y2FuJ3QgY2xpY2s8L3NwYW4-PC9sYWJlbD5cbiAgICAgICAgPC9kaXY-XG4gICAgYDtcbiAgfVxufVxuIn0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3NpbXBsZS1ncmVldGluZy5qc1wiPjwvc2NyaXB0PlxuPC9oZWFkPlxuPGJvZHk-XG4gIDxzaW1wbGUtZ3JlZXRpbmcgbmFtZT1cIldvcmxkXCI-PC9zaW1wbGUtZ3JlZXRpbmc-XG48L2JvZHk-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMy4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4yLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeNC4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbWF0ZXJpYWwvd2ViXCI6IFwiXjEuNS4xXCJcbiAgfVxufSJ9XQ
### Workaround
No
### Is this a regression?
No or unsure. This never worked, or I haven't tried before.
### Affected versions
Failing in 1.5.1
### Browser/OS/Node environment
Chrome v. 126
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Lit playground reproduction in the issue, focusing on the md-checkbox inside a label and the nested red span, then reproduce the behavior in Chrome 126. Trace how clicking the span focuses the checkbox and compare it with clicking the label directly. Done means the checkbox does not receive :focus-visible when focus results from clicking the nested span.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- accessibility, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100