[CL-439] Improve keyboard and visual a11y for chip select (#11112)

libs/components/src/chip-select/chip-select.component.ts

@@ -1,10 +1,23 @@
-import { Component, HostListener, Input, booleanAttribute, signal } from "@angular/core";
+import {
+  AfterViewInit,
+  Component,
+  DestroyRef,
+  HostListener,
+  Input,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  booleanAttribute,
+  inject,
+  signal,
+} from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { compareValues } from "../../../common/src/platform/misc/compare-values";
 import { ButtonModule } from "../button";
 import { IconButtonModule } from "../icon-button";
-import { MenuModule } from "../menu";
+import { MenuComponent, MenuItemDirective, MenuModule } from "../menu";
 import { Option } from "../select/option";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
@@ -28,7 +41,10 @@ export type ChipSelectOption<T> = Option<T> & {
     },
   ],
 })
-export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
+export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, AfterViewInit {
+  @ViewChild(MenuComponent) menu: MenuComponent;
+  @ViewChildren(MenuItemDirective) menuItems: QueryList<MenuItemDirective>;
+
   /** Text to show when there is no selected option */
   @Input({ required: true }) placeholderText: string;
 
@@ -62,6 +78,8 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
     this.focusVisibleWithin.set(false);
   }
 
+  private destroyRef = inject(DestroyRef);
+
   /** Tree constructed from `this.options` */
   private rootTree: ChipSelectOption<T>;
 
@@ -148,6 +166,16 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
     this.renderedOptions = this.rootTree;
   }
 
+  ngAfterViewInit() {
+    /**
+     * menuItems will change when the user navigates into or out of a submenu. when that happens, we want to
+     * direct their focus to the first item in the new menu
+     */
+    this.menuItems.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      this.menu.keyManager.setFirstItemActive();
+    });
+  }
+
   /** Control Value Accessor */
 
   private notifyOnChange?: (value: T) => void;