[a11y] Make Material Fab Menu keyboard accessible based on WAI-ARIA best practices for menu button: https://www.w3.org/TR/wai-aria-practices/#menubutton

Behavior when button has focus:
* ENTER opens the menu & places focus on the first menu item.
* SPACE opens the menu and places focus on the first menu item.
* DOWN arrow opens the menu and places focus on the first menu item.
* UP arrow opens the menu and places focus on the first menu item.

Note: when the screenreader opens the MaterialFabMenu the following dialogue is spoken:
"Entered dialogue, exited main. [Label of first menu item]."

PiperOrigin-RevId: 225301155

Author: Googler

angular_components/lib/material_menu/material_fab_menu.dart

@@ -3,6 +3,7 @@
 // BSD-style license that can be found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:html';
 
 import 'package:angular/angular.dart';
 import 'package:angular_components/content/deferred_content.dart';
@@ -16,8 +17,11 @@ import 'package:angular_components/material_menu/menu_root.dart';
 import 'package:angular_components/material_popup/material_popup.dart';
 import 'package:angular_components/material_tooltip/material_tooltip.dart';
 import 'package:angular_components/mixins/track_layout_changes.dart';
+import 'package:angular_components/model/a11y/keyboard_handler_mixin.dart';
 import 'package:angular_components/model/menu/menu.dart';
 import 'package:angular_components/model/observable/observable.dart';
+import 'package:angular_components/utils/browser/events/events.dart';
+import 'package:angular_components/utils/id_generator/id_generator.dart';
 
 import 'menu_item_groups.dart';
 
@@ -45,8 +49,9 @@ import 'menu_item_groups.dart';
   preserveWhitespace: true,
 )
 class MaterialFabMenuComponent extends Object
-    with TrackLayoutChangesMixin
+    with KeyboardHandlerMixin, TrackLayoutChangesMixin
     implements OnDestroy {
+  final ActiveMenuItemModel<MenuItem> activeModel;
   final ChangeDetectorRef _changeDetector;
 
   /// Popup positions for the menu popup to show up in.
@@ -57,7 +62,13 @@ class MaterialFabMenuComponent extends Object
 
   MaterialFabMenuModel _viewModel;
 
-  MaterialFabMenuComponent(this._changeDetector);
+  factory MaterialFabMenuComponent(ChangeDetectorRef changeDetector,
+          @Optional() IdGenerator idGenerator) =>
+      MaterialFabMenuComponent._(
+          changeDetector, idGenerator ?? new SequentialIdGenerator.fromUUID());
+
+  MaterialFabMenuComponent._(this._changeDetector, IdGenerator idGenerator)
+      : activeModel = ActiveMenuItemModel<MenuItem>(idGenerator);
 
   /// Emits when fab is opened.
   @Output()
@@ -119,13 +130,45 @@ class MaterialFabMenuComponent extends Object
 
   bool get hasIcons => _viewModel.hasIcons;
 
+  /// Keypress callback is used to handle Up and Down keys.
+  ///
+  /// Unprintable keys use this listener while printable keys
+  /// use [handleKeyPress].
+  /// Enabling [MaterialFabMenu] to be opened with the keyboard improves
+  /// accessibility and improves with a11y navigation.
+  @HostListener('keydown')
+  void handleKeyDown(KeyboardEvent event) {
+    if (event.keyCode == KeyCode.DOWN || event.keyCode == KeyCode.UP) {
+      openMenuAndActivateFirstItem();
+    }
+  }
+
+  /// Keypress callback is used to handle Enter and Space keys.
+  @HostListener('keypress')
+  void handleKeyPress(KeyboardEvent event) {
+    if (event.keyCode == KeyCode.ENTER || isSpaceKey(event)) {
+      openMenuAndActivateFirstItem();
+    }
+  }
+
   @override
   void ngOnDestroy() {
     _viewModelStreamSub?.cancel();
     _viewModelStreamSub = null;
     _onShow.close();
   }
 
+  /// Sets the [activeModel.menu] before the popup is opened so that
+  /// the first item will already be activated when the menu is expanded.
+  ///
+  /// [MenuItemGroupsComponent] handles the logic to activate the first item.
+  void openMenuAndActivateFirstItem() {
+    if (hasMenu) {
+      activeModel.menu = menuItem.subMenu;
+    }
+    _viewModel.trigger();
+  }
+
   void onPopupOpened() {
     if (_menuVisible) return;
     _menuVisible = true;

angular_components/lib/material_menu/material_fab_menu.html

@@ -13,6 +13,8 @@
               [tooltipPositions]="tooltipPositions"
               [attr.aria-label]="ariaLabel"
               [attr.navi-id]="naviId"
+              (keydown)="onKeyDown($event)"
+              (keypress)="onKeyPress($event)"
               (trigger)="trigger">
   <material-icon [icon]="glyph"></material-icon>
 </material-fab>
@@ -38,6 +40,8 @@
         <material-icon class="close-icon material-list-item-primary" icon="close"></material-icon>
       </material-list-item>
       <menu-item-groups [menu]="menuItem.subMenu"
+                        [activeModel]="activeModel"
+                        [attr.aria-activedescendant]="activeModel.activeId"
                         class="menu-groups"
                         autoFocus
                         menu-root