Skip to content

Commit 03bece6

Browse files
committed
docs(multiple): adds screen reader friendly tooltip to hamburger icon
Updates dev-app layout hamburger icon button to use a matTooltip similarly to other icon config buttons in the header. This adds a visible tooltip for sighted users as well as an announced screen reader value when focusing on the hamburger button. Fixes b/435497550
1 parent 3229dbc commit 03bece6

File tree

1 file changed

+4
-1
lines changed

1 file changed

+4
-1
lines changed

src/dev-app/dev-app/dev-app-layout.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@
3535
<main [attr.dir]="state.direction" [class]="getDensityClass()" class="demo-main">
3636
<!-- The toolbar should always be in the LTR direction -->
3737
<mat-toolbar color="primary" dir="ltr">
38-
<button matIconButton (click)="navigation.open('mouse')">
38+
<button
39+
matIconButton
40+
matTooltip="{{ navigation.opened ? 'Close' : 'Open'}} Navigation Menu"
41+
(click)="navigation.open('mouse')">
3942
<mat-icon>menu</mat-icon>
4043
</button>
4144
<div class="demo-toolbar">

0 commit comments

Comments
 (0)