How to make Angular material UI component (mat-checkbox, mat-radio-button) focus visible by tab navigation?

Question

I am implementing a11y and some Material UI components cannot be focused by tab navigation and don't show the focus-visible style. For example mat-radio-button, I can not using tab navigation to focus on input in theses elements.

This is my code:

Typescript

<mat-radio-button tabindex="0"></mat-radio-button>

CSS

* {
 &:focus-visible {
  outline: 2px solid #DE190A;
  outline-offset: 3px;
 }
}

Answer 1

I believe this is only a misunderstanding of how keyboard navigation should work.

Radio buttons are not focused via tab

Well, quite. A radio button group is what’s called a composite widget: only one element can be focussed via tab, afterwards the arrow keys allow selecting an option.

Material UI’s Radio Button supports that behaviour natively.

The ARIA role radiogroup is derived from the composite role:

Once the composite widget has focus, authors SHOULD provide a separate navigation mechanism for users to navigate to elements that are descendants or owned children of the composite element