Angular Material展开面板聚焦时箭头指示器需加下划线（无障碍需求）

要满足Tab聚焦折叠面板切换按钮时，箭头指示器显示红色下划线的无障碍需求，可通过自定义CSS实现，具体步骤如下：

核心思路 #

Angular Material的折叠面板头部（mat-expansion-panel-header）在获得焦点时（:focus状态），其内部的箭头指示器由.mat-expansion-indicator::after伪元素生成，只需为该伪元素添加下划线样式即可。

实现方式 #

方式1：全局样式生效（推荐） #

将样式添加到项目全局样式文件（如src/styles.scss），所有折叠面板都会应用此效果：

/* 聚焦状态下的折叠面板箭头添加红色下划线 */
.mat-expansion-panel-header:focus .mat-expansion-indicator::after {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 2px; /* 可根据需求调整下划线粗细 */
}

方式2：单个组件内生效 #

如果仅需在特定组件中应用，可选择以下两种子方式：

• 使用::ng-deep穿透样式（注：::ng-deep已标记为废弃，但目前仍可在Angular中使用）：

::ng-deep .mat-expansion-panel-header:focus .mat-expansion-indicator::after {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

• 关闭组件视图封装：
  在组件的TypeScript文件中修改封装模式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TargetComponentComponent {
  // 组件逻辑
}

然后在组件的SCSS文件中添加相同的CSS代码即可，无需::ng-deep。

设置完成后，当通过Tab键聚焦到折叠面板的切换按钮时，箭头指示器会自动显示红色下划线，满足无障碍访问需求。

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