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

You might want to look at the Accessibility features in the Material CDK - focuskeymanager specifically: https://material.angular.io/cdk/a11y/overview#focuskeymanager

Answer 2

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 component: 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