如何让Angular Material组件通过Tab导航显示焦点

问题根源 #

1. mat-radio-button是封装后的组件，真正可聚焦的是内部的<input type="radio">原生元素，直接给组件标签加tabindex="0"不会生效，反而可能干扰原生焦点逻辑。
2. 全局CSS写法存在问题：*选择器后直接使用&是SCSS嵌套语法，若未经过预编译无法生效；同时Angular的视图封装机制会阻止全局样式穿透到组件内部的原生元素。

修复步骤 #

1. 移除组件上的多余tabindex #

Angular Material的radio组件原生支持Tab导航，无需手动添加tabindex="0"，只要组件未设置disabled="true"即可。

修正后的模板代码：

<mat-radio-button></mat-radio-button>

2. 正确设置focus-visible样式 #

需要让样式穿透到组件内部的原生input元素，以下两种方式任选其一：

方式一：组件内使用深度选择器（::ng-deep）

在组件的CSS/SCSS文件中添加：

::ng-deep mat-radio-button input[type="radio"]:focus-visible {
  outline: 2px solid #DE190A;
  outline-offset: 3px;
}

方式二：全局样式文件中配置

在项目根目录的styles.scss（或对应全局样式文件）中添加：

mat-radio-button input[type="radio"]:focus-visible {
  outline: 2px solid #DE190A;
  outline-offset: 3px;
}

3. 额外检查要点 #

• 排查是否有自定义CSS覆盖了原生焦点样式，比如设置了outline: none但未补充focus-visible的样式规则。
• 测试时需使用Tab键导航触发焦点，:focus-visible仅在键盘操作触发焦点时显示，鼠标点击不会触发该样式。

内容的提问来源于stack exchange，提问作者Mike Nguyen