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

Focus redirection does not work for mat-radio-button #13953

Closed
jelbourn opened this issue Nov 2, 2018 · 1 comment · Fixed by #13956 or #14472
Closed

Focus redirection does not work for mat-radio-button #13953

jelbourn opened this issue Nov 2, 2018 · 1 comment · Fixed by #13956 or #14472
Assignees
Labels
Accessibility This issue is related to accessibility (a11y) P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects

Comments

@jelbourn
Copy link
Member

jelbourn commented Nov 2, 2018

mat-radio-button has some code to redirect focus to the underlying native <input type="radio">. This seems to not actually work, though, because calling .focus() on the <mat-radio-button> does not trigger a focus event.

You can see the behavior here, with radio buttons inside of a dialog with cdkFocusInitial

The same problem almost certainly exists for mat-checkbox and mat-button-toggle.

I'm not sure the best way to approach this, but one idea would be to use focusin or useCapture on a top-level element and specifically check for the controls in question.

@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) labels Nov 2, 2018
@jelbourn jelbourn added this to Not started in a11y fix-it via automation Nov 2, 2018
@crisbeto crisbeto self-assigned this Nov 3, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 3, 2018
In angular#13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes angular#13953.
@crisbeto crisbeto added the has pr label Nov 3, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 3, 2018
Currently the `mat-slide-toggle` doesn't redirect focus to the underlying `input` element. This means that things like the focus trap's `cdkFocusInitial` won't work when they're set on the toggle host. These changes add a `tabindex` and set up a `focus` listener to forward focus to the input.

Relates to angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 3, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 3, 2018
Currently if the consumer sets the `cdkFocusInitial` group on a non-focusable element, nothing will happen. These changes add a warning if the app is running in dev mode.

Relates to angular#13953.
@josephperrott josephperrott moved this from Not started to In-progress in a11y fix-it Nov 5, 2018
@josephperrott josephperrott moved this from In-progress to Awaiting Merge in a11y fix-it Nov 5, 2018
vivian-hu-zz pushed a commit that referenced this issue Nov 6, 2018
In #13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes #13953.
vivian-hu-zz pushed a commit that referenced this issue Nov 6, 2018
Currently the `mat-slide-toggle` doesn't redirect focus to the underlying `input` element. This means that things like the focus trap's `cdkFocusInitial` won't work when they're set on the toggle host. These changes add a `tabindex` and set up a `focus` listener to forward focus to the input.

Relates to #13953.
vivian-hu-zz pushed a commit that referenced this issue Nov 6, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to #13953.
vivian-hu-zz pushed a commit that referenced this issue Nov 6, 2018
Currently if the consumer sets the `cdkFocusInitial` group on a non-focusable element, nothing will happen. These changes add a warning if the app is running in dev mode.

Relates to #13953.
vivian-hu-zz pushed a commit that referenced this issue Nov 7, 2018
Currently the `mat-slide-toggle` doesn't redirect focus to the underlying `input` element. This means that things like the focus trap's `cdkFocusInitial` won't work when they're set on the toggle host. These changes add a `tabindex` and set up a `focus` listener to forward focus to the input.

Relates to #13953.
vivian-hu-zz pushed a commit that referenced this issue Nov 7, 2018
Currently if the consumer sets the `cdkFocusInitial` group on a non-focusable element, nothing will happen. These changes add a warning if the app is running in dev mode.

Relates to #13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 9, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 9, 2018
In angular#13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes angular#13953.
vivian-hu-zz pushed a commit that referenced this issue Nov 12, 2018
Currently the `mat-slide-toggle` doesn't redirect focus to the underlying `input` element. This means that things like the focus trap's `cdkFocusInitial` won't work when they're set on the toggle host. These changes add a `tabindex` and set up a `focus` listener to forward focus to the input.

Relates to #13953.
vivian-hu-zz pushed a commit that referenced this issue Nov 12, 2018
Currently if the consumer sets the `cdkFocusInitial` group on a non-focusable element, nothing will happen. These changes add a warning if the app is running in dev mode.

Relates to #13953.
a11y fix-it automation moved this from Awaiting Merge to Done Dec 7, 2018
mmalerba pushed a commit that referenced this issue Dec 7, 2018
In #13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes #13953.
mmalerba pushed a commit that referenced this issue Dec 7, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to #13953.
mmalerba pushed a commit that referenced this issue Dec 10, 2018
In #13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes #13953.
mmalerba pushed a commit that referenced this issue Dec 10, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to #13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 11, 2018
In angular#13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 11, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 13, 2018
In angular#13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 13, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 17, 2018
In angular#13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes angular#13953.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 17, 2018
Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to angular#13953.
jelbourn pushed a commit that referenced this issue Dec 20, 2018
In #13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes #13953.
josephperrott pushed a commit to josephperrott/components that referenced this issue Jan 14, 2019
In angular#13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes angular#13953.
josephperrott pushed a commit to josephperrott/components that referenced this issue Jan 14, 2019
)

Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to angular#13953.
josephperrott pushed a commit to josephperrott/components that referenced this issue Jan 14, 2019
In angular#13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes angular#13953.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
No open projects
a11y fix-it
  
Done
2 participants