The focus disappears if the user goes from the Actions dropdown

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

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();

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();
+  }
 }