焦点箭头指示器上的角度材质扩展面板应带有下划线

Question

焦点箭头指示器上的角度材质扩展面板应带有下划线。这是可访问性的要求

在手风琴切换时，焦点箭头指示器（向上或向下）应为下划线。如何做到这一点？如红色截图所示

import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
import {MatExpansionModule} from '@angular/material/expansion';

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  standalone: true,
  imports: [MatExpansionModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExpansionOverviewExample {
  readonly panelOpenState = signal(false);
}

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title> This is the expansion title </mat-panel-title>
      <mat-panel-description> This is a summary of the content </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState.set(true)" (closed)="panelOpenState.set(false)">
    <mat-expansion-panel-header>
      <mat-panel-title> Self aware panel </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState() ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

Answer 1

您可以使用下面的 CSS，我们只需添加

border-bottom

来创建悬停下划线并将其应用到悬停上。

.custom-hover span.mat-expansion-indicator {
  width: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-hover span.mat-expansion-indicator:hover {
  border-bottom: 3px solid red;
}

Stackblitz 演示