Skip to content

Commit c2d4082

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 605e2c9 commit c2d4082

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,11 @@
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 class="demo-menu-button" matIconButton (click)="navigation.open('mouse')">
38+
<button
39+
class="demo-menu-button"
40+
matIconButton
41+
matTooltip="{{ navigation.opened ? 'Close' : 'Open'}} Navigation Menu"
42+
(click)="navigation.open('mouse')">
3943
<mat-icon>menu</mat-icon>
4044
</button>
4145
<div class="demo-toolbar">

0 commit comments

Comments
 (0)