-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(material/sidenav): only trap focus when backdrop is enabled (#27355)
Correct when Sidenav enabled focus trapping. When backdrop is show, trap focus. Do no trap focus when backdrop is not shown. Existing behavior is that Sidenav traps focus whenever it is not in side mode. This causes the end user to not be able to interact with the sidenav content when the mode is push/over, backdrop is disabled and using ConfigurableFocusTrapFactory (#26572). With this commit applied, Sidenav always traps focus when backdrop is shown. Sidenav never traps focus when backdrop is not shown, regardless of what mode the sidenav is in, focus trapping will respect if the backdrop is shown or not shown. Fix this issue by correcting boolean logic for detecting if backdrop is enabled and using that logic to determine when to trap focus. Add an example that injects ConfigurableFocusTrapFactory. Fix #26572
- Loading branch information
Showing
6 changed files
with
130 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
...erial/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
.example-container { | ||
position: absolute; | ||
top: 0; | ||
bottom: 0; | ||
left: 0; | ||
right: 0; | ||
} | ||
|
||
.example-radio-group { | ||
display: block; | ||
border: 1px solid #555; | ||
margin: 20px; | ||
padding: 10px; | ||
} |
36 changes: 36 additions & 0 deletions
36
...rial/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<mat-sidenav-container class="example-container" *ngIf="shouldRun" [hasBackdrop]="hasBackdrop.value"> | ||
<mat-sidenav #sidenav [mode]="mode.value!" [position]="position.value!"> | ||
<p><button mat-button (click)="sidenav.toggle()">Toggle</button></p> | ||
<p> | ||
<label>Test input for drawer<input/></label> | ||
</p> | ||
</mat-sidenav> | ||
|
||
<mat-sidenav-content> | ||
<p><button mat-button (click)="sidenav.toggle()">Toggle</button></p> | ||
<p> | ||
<mat-radio-group class="example-radio-group" [formControl]="mode"> | ||
<label>Mode:</label> | ||
<mat-radio-button value="over">Over</mat-radio-button> | ||
<mat-radio-button value="side">Side</mat-radio-button> | ||
<mat-radio-button value="push">Push</mat-radio-button> | ||
</mat-radio-group> | ||
<mat-radio-group class="example-radio-group" [formControl]="hasBackdrop"> | ||
<label>Has Backdrop:</label> | ||
<mat-radio-button [value]="null">Default</mat-radio-button> | ||
<mat-radio-button [value]="true">true</mat-radio-button> | ||
<mat-radio-button [value]="false">false</mat-radio-button> | ||
</mat-radio-group> | ||
<mat-radio-group class="example-radio-group" [formControl]="position"> | ||
<label>Position:</label> | ||
<mat-radio-button value="start">Start</mat-radio-button> | ||
<mat-radio-button value="end">End</mat-radio-button> | ||
</mat-radio-group> | ||
</p> | ||
<p> | ||
<label>Test input for drawer content<input/></label> | ||
</p> | ||
</mat-sidenav-content> | ||
</mat-sidenav-container> | ||
|
||
<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div> |
31 changes: 31 additions & 0 deletions
31
...terial/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import {Component} from '@angular/core'; | ||
import {NgIf} from '@angular/common'; | ||
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; | ||
import {MatDrawerMode, MatSidenavModule} from '@angular/material/sidenav'; | ||
import {MatRadioModule} from '@angular/material/radio'; | ||
import {MatButtonModule} from '@angular/material/button'; | ||
import {ConfigurableFocusTrapFactory, FocusTrapFactory} from '@angular/cdk/a11y'; | ||
|
||
/** @title Sidenav using injected ConfigurableFocusTrap */ | ||
@Component({ | ||
selector: 'sidenav-configurable-focus-trap-example', | ||
templateUrl: 'sidenav-configurable-focus-trap-example.html', | ||
styleUrls: ['sidenav-configurable-focus-trap-example.css'], | ||
standalone: true, | ||
imports: [ | ||
NgIf, | ||
MatSidenavModule, | ||
MatButtonModule, | ||
MatRadioModule, | ||
FormsModule, | ||
ReactiveFormsModule, | ||
], | ||
providers: [{provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory}], | ||
}) | ||
export class SidenavConfigurableFocusTrapExample { | ||
mode = new FormControl('over' as MatDrawerMode); | ||
hasBackdrop = new FormControl(null as null | boolean); | ||
position = new FormControl('start' as 'start' | 'end'); | ||
|
||
shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters