Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox shows focus when inner element has focus #17629

Closed
jshoudy opened this issue Nov 6, 2019 · 2 comments

Comments

@jshoudy
Copy link

@jshoudy jshoudy commented Nov 6, 2019

Reproduction

https://stackblitz.com/edit/angular-rknbpc

Steps to reproduce:

  1. Click before the checkbox.
  2. Tab and see both the checkbox and the button showing focus.

Expected Behavior

The checkbox and the button are mutually exclusive in showing keyboard focus.

Actual Behavior

Whenever the inner button has focus so does the checkbox. This is always problematic but more noticeable when the checkbox is disabled since focus goes directly to the button.

@crisbeto

This comment has been minimized.

Copy link
Member

@crisbeto crisbeto commented Nov 6, 2019

There should be ways around this, but I'm not sure whether we should fix it since putting a button inside a checkbox isn't a supported case.

@jelbourn

This comment has been minimized.

Copy link
Member

@jelbourn jelbourn commented Nov 7, 2019

Yeah, this isn't something we will address; a checkbox label officially only supports phrasing content, not interactive elements.

@jelbourn jelbourn closed this Nov 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.