From 1f97fb6d3fe77bd4403c336ee8f57ee767d13894 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 20 Aug 2025 21:45:53 +0000
Subject: [PATCH] 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
---
 src/dev-app/dev-app/dev-app-layout.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
index deec873d4433..94fee6410568 100644
--- a/src/dev-app/dev-app/dev-app-layout.html
+++ b/src/dev-app/dev-app/dev-app-layout.html
@@ -35,7 +35,11 @@
   <main [attr.dir]="state.direction" [class]="getDensityClass()" class="demo-main">
     <!-- The toolbar should always be in the LTR direction -->
     <mat-toolbar color="primary" dir="ltr">
-      <button class="demo-menu-button" matIconButton (click)="navigation.open('mouse')">
+      <button
+        class="demo-menu-button"
+        matIconButton
+        matTooltip="{{ navigation.opened ? 'Close' : 'Open'}} Navigation Menu"
+        (click)="navigation.open('mouse')">
         <mat-icon>menu</mat-icon>
       </button>
       <div class="demo-toolbar">