Angular Material Expansion panel on focus arrow indicator should be underline

Angular Material Expansion panel on focus arrow indicator should be underline. this is requirement for accessibility

On accordions toggle when focus arrow indicator (up or down both) should be underline. How to do this? as shown in screenshot in red color




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>

Continue reading...