From c4e9a3c96d2b65019d5c45d46fc5d526e5dba48e Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Fri, 18 Apr 2025 13:07:59 +0000
Subject: [PATCH] Close menu and focus menu button on Esc and Tab

---
 .../side-button-menu.component.html           |  3 +++
 .../side-button-menu.component.spec.ts        | 21 +++++++++++++++++++
 .../side-button-menu.component.ts             | 17 +++++++++++++--
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
index d7cf2c172..678434e95 100644
--- a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
+++ b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
@@ -1,5 +1,6 @@
 <div class="side-add-button-container">
   <button
+    #actionsButton
     class="side-add-button"
     mat-fab
     (click)="menuTrigger.openMenu()"
@@ -38,6 +39,8 @@
     class="side-add-menu-button"
     [class.with-description]="item.description !== null"
     (click)="item.onClick()"
+    (keydown.tab)="focusButton($event)"
+    (keydown.escape)="focusButton($event)"
     [disabled]="item.disabled$ | async">
     <mat-icon *ngIf="item.svgIcon" svgIcon="{{ item.svgIcon }}"></mat-icon>
     <mat-icon
diff --git a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.spec.ts b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.spec.ts
index 8d261de57..289b12daa 100644
--- a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.spec.ts
+++ b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.spec.ts
@@ -89,6 +89,27 @@ describe('SideButtonMenuComponent', () => {
       expect(onClickSpy).toHaveBeenCalled();
     });
 
+    ['Escape', 'Tab'].forEach((key: string) => {
+      it(`should focus side button on ${key} press`, async () => {
+        const button = document.querySelector(
+          '.side-add-button'
+        ) as HTMLButtonElement;
+        const buttonFocusSpy = spyOn(button, 'focus');
+        const firstItemElement = await items[0].host();
+        await firstItemElement.dispatchEvent('keydown', { key: key });
+
+        expect(buttonFocusSpy).toHaveBeenCalled();
+      });
+
+      it(`should close menu on ${key} press`, async () => {
+        const closeMenuSpy = spyOn(component.menuTrigger(), 'closeMenu');
+        const firstItemElement = await items[0].host();
+        await firstItemElement.dispatchEvent('keydown', { key: key });
+
+        expect(closeMenuSpy).toHaveBeenCalled();
+      });
+    });
+
     it('should display the correct icons for actions', async () => {
       const text0 = await items[0].getText();
       const text1 = await items[1].getText();
diff --git a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts
index c6a71dac3..f355d6706 100644
--- a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts
+++ b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.ts
@@ -1,7 +1,7 @@
-import { Component, input } from '@angular/core';
+import { Component, input, viewChild } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { CommonModule } from '@angular/common';
 import { AddMenuItem } from '../../app.component';
 import { MatTooltip } from '@angular/material/tooltip';
@@ -19,5 +19,18 @@ import { MatTooltip } from '@angular/material/tooltip';
   styleUrl: './side-button-menu.component.scss',
 })
 export class SideButtonMenuComponent {
+  readonly menuTrigger = viewChild.required<MatMenuTrigger>('menuTrigger');
   menuItems = input<AddMenuItem[]>([]);
+
+  focusButton(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const button = document.querySelector(
+      '.side-add-button'
+    ) as HTMLButtonElement;
+    if (button) {
+      button.focus();
+    }
+    this.menuTrigger().closeMenu();
+  }
 }