feat(cdk-experimental/menu): enable keyboard handling for context menu (#20171)

By default on both Mac and Windows the context menu keyboard trigger is emitted as a contextmenu
mouse event automatically, eliminating the need to handle keyboard events specifically for context
menus. Therefore, this simply places focus on the first menu item in the opened context menu
relying on the existing menu and menu item keyboard handling logic.

Author: andy9775

src/cdk-experimental/menu/context-menu.spec.ts

@@ -97,6 +97,11 @@ describe('CdkContextMenuTrigger', () => {
 
       expect(getContextMenu()).toBeDefined();
     });
+
+    it('should focus the first menuitem when the context menu is opened', () => {
+      openContextMenu();
+      expect(document.querySelector(':focus')!.id).toEqual('first_menu_item');
+    });
   });
 
   describe('nested context menu triggers', () => {
@@ -250,7 +255,7 @@ describe('CdkContextMenuTrigger', () => {
 
     <ng-template cdkMenuPanel #context="cdkMenuPanel">
       <div cdkMenu [cdkMenuPanel]="context">
-        <button cdkMenuItem></button>
+        <button id="first_menu_item" cdkMenuItem></button>
       </div>
     </ng-template>
   `,

src/cdk-experimental/menu/context-menu.ts

@@ -216,6 +216,15 @@ export class CdkContextMenuTrigger implements OnDestroy {
 
       this._contextMenuTracker.update(this);
       this.open({x: event.clientX, y: event.clientY});
+
+      // A context menu can be triggered via a mouse right click or a keyboard shortcut.
+      if (event.button === 2) {
+        this._menuPanel._menu?.focusFirstItem('mouse');
+      } else if (event.button === 0) {
+        this._menuPanel._menu?.focusFirstItem('keyboard');
+      } else {
+        this._menuPanel._menu?.focusFirstItem('program');
+      }
     }
   }