bug(MatRadioGroup): paging options prevents keyboard focus

[jackalvrus]

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

Using a mat-paginator to page the options in a MatRadioGroup prevents the radio group from receiving focus using the tab key on pages other than the first page.

Reproduction

StackBlitz link: https://stackblitz.com/edit/q2wcmz

Steps to reproduce:

1. Click in the input box at the top to give it focus
2. Press tab; note that the radio group receives focus
3. Press tab again; note that this gives focus to the next-page button in the paginator
4. Press space or enter to change to the next page; note that the radio group options have changed
5. Press shift+tab; note that the paginator previous-page button receives focus
6. Press shift+tab again; note that the input box receives focus, skipping over the radio group
7. Press tab; note that the paginator receives focus, skipping over the radio group

Expected Behavior

After changing pages, the radio group should still be able to receive focus using the keyboard.

Actual Behavior

After changing pages, the radio group is unable to receive focus using the keyboard

Environment

• Angular: 15.1.1
• CDK/Material: 15.1.1
• Browser(s): Chrome 114.0.5735.110, Firefox 115.0.2 (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[zarend]

Hello,

At first glance, this looks like an accessibility anti-pattern to me. For accessibility, I don't suggest combining paginator and radio buttons in this way. Making dynamic updates without notifying the user can confuse users of assistive technology.

Although, I am able to reproduce without using paginator in this stackblitz: https://stackblitz.com/edit/q2wcmz-f8vccs?file=src%2Fapp%2Fradio-overview-example.ts

This seems to happen when the selected radio option is removed. After removing the selected radio option, I can no longer tab to the radio group.

Giving P4 priority and assigning to @mmalerba as owner of radio.

Best regards,

Zach

[jackalvrus]

To add some clarification/detail...

You're correct, the radio group is unable to receive focus when the selected item is not on the current page. I should have been more clear about that.

Another detail is that this problem does not occur when no item is selected. The reason for this is that the control internally uses tabindex to change the keyboard navigation behavior when an item is selected vs. when no item is selected.