feat(aria): add grid and datepicker simple-combobox examples

Author: tjshiu

src/aria/grid/grid.ts

@@ -124,6 +124,9 @@ export class Grid {
   /** Whether enable range selections (with modifier keys or dragging). */
   readonly enableRangeSelection = input(false, {transform: booleanAttribute});
 
+  /** Overrides the default tab index of the grid. */
+  readonly tabIndex = input<number | undefined>(undefined);
+
   /** The UI pattern for the grid. */
   readonly _pattern = new GridPattern({
     ...this,
@@ -156,6 +159,11 @@ export class Grid {
     afterRenderEffect(() => this._pattern.focusEffect());
   }
 
+  /** Scrolls the active cell into view. */
+  scrollActiveCellIntoView(options: ScrollIntoViewOptions = {block: 'nearest'}) {
+    this._pattern.activeCell()?.element().scrollIntoView(options);
+  }
+
   /** Gets the cell pattern for a given element. */
   private _getCell(element: Element | null | undefined): GridCellPattern | undefined {
     let target = element;

src/aria/private/behaviors/grid/grid-focus.ts

@@ -31,6 +31,9 @@ export interface GridFocusInputs {
 
   /** Whether disabled cells in the grid should be focusable. */
   softDisabled: SignalLike<boolean>;
+
+  /** Overrides the default tab index of the grid. */
+  tabIndex?: SignalLike<number | undefined>;
 }
 
 /** Dependencies for the `GridFocus` class. */
@@ -96,6 +99,11 @@ export class GridFocus<T extends GridFocusCell> {
 
   /** The tab index for the grid container. */
   readonly gridTabIndex = computed<-1 | 0>(() => {
+    const tabIndexOverride = this.inputs.tabIndex?.();
+    if (tabIndexOverride !== undefined && tabIndexOverride !== null) {
+      return (tabIndexOverride === -1 ? -1 : 0) as -1 | 0;
+    }
+
     if (this.gridDisabled()) {
       return 0;
     }

src/aria/private/behaviors/grid/grid.ts

@@ -318,20 +318,45 @@ export class Grid<T extends GridCell> {
     }
 
     if (this.focusBehavior.stateStale()) {
+      const activeCell = this.focusBehavior.activeCell();
+      const activeCoords = this.focusBehavior.activeCoords();
+
       // Try focus on the same active cell after if a reordering happened.
-      if (this.focusBehavior.focusCell(this.focusBehavior.activeCell()!)) {
+      if (activeCell && this.focusBehavior.focusCell(activeCell)) {
         return true;
       }
 
       // If the active cell is no longer exist, focus on the coordinates instead.
-      if (this.focusBehavior.focusCoordinates(this.focusBehavior.activeCoords())) {
+      if (this.focusBehavior.focusCoordinates(activeCoords)) {
         return true;
       }
 
+      // If the coordinates are no longer valid (e.g. because the row was deleted at the end),
+      // try to focus on the previous row focusing on the same column.
+      const maxRow = this.data.maxRowCount() - 1;
+      const targetRow = Math.min(activeCoords.row, maxRow);
+
+      if (targetRow >= 0) {
+        // Try same column in the clamped row.
+        if (this.focusBehavior.focusCoordinates({row: targetRow, col: activeCoords.col})) {
+          return true;
+        }
+
+        // If that fails, try to find ANY cell in that row.
+        const firstInRow = this.navigationBehavior.peekFirst(targetRow);
+        if (firstInRow !== undefined && this.focusBehavior.focusCoordinates(firstInRow)) {
+          return true;
+        }
+      }
+
       // If the coordinates no longer valid, go back to the first available cell.
-      if (this.focusBehavior.focusCoordinates(this.navigationBehavior.peekFirst()!)) {
+      const firstAvailable = this.navigationBehavior.peekFirst();
+      if (firstAvailable !== undefined && this.focusBehavior.focusCoordinates(firstAvailable)) {
         return true;
       }
+
+      this.focusBehavior.activeCell.set(undefined);
+      this.focusBehavior.activeCoords.set({row: -1, col: -1});
     }
 
     return false;

src/aria/private/grid/grid.spec.ts

@@ -298,6 +298,16 @@ describe('Grid', () => {
         expect(widget.isActivated()).toBe(true);
       });
 
+      it('should trigger click on Enter for simple widget', () => {
+        const {grid} = createGrid([{cells: [{widgets: [{widgetType: 'simple'}]}]}], gridInputs);
+        const widget = grid.cells()[0][0].inputs.widgets()[0];
+        const element = widget.element();
+        spyOn(element, 'click');
+
+        widget.onKeydown(enter());
+        expect(element.click).toHaveBeenCalled();
+      });
+
       it('should not activate if disabled', () => {
         const {grid} = createGrid(
           [{cells: [{widgets: [{widgetType: 'complex', disabled: true}]}]}],

src/aria/private/grid/grid.ts

@@ -249,6 +249,7 @@ export class GridPattern {
   onKeydown(event: KeyboardEvent) {
     if (this.disabled()) return;
 
+    this.hasBeenFocused.set(true);
     this.activeCell()?.onKeydown(event);
     this.keydown().handle(event);
   }
@@ -325,7 +326,10 @@ export class GridPattern {
 
   /** Sets the default active state of the grid before receiving focus the first time. */
   setDefaultStateEffect(): void {
-    if (this.hasBeenFocused()) return;
+    if (this.hasBeenFocused() || !this.gridBehavior.focusBehavior.stateEmpty()) {
+      this.hasBeenFocused.set(true);
+      return;
+    }
 
     this.gridBehavior.setDefaultState();
   }

src/aria/private/grid/widget.ts

@@ -76,7 +76,11 @@ export class GridCellWidgetPattern implements ListNavigationItem {
     const manager = new KeyboardEventManager();
 
     // Simple widget does not need to pause default grid behaviors.
+    // However, it does need to capture Enter key and trigger a click on the host element
+    // since the browser won't do it for us in activedescendant mode.
     if (this.inputs.widgetType() === 'simple') {
+      console.log('simple widget keydown');
+      manager.on('Enter', () => this.element().click());
       return manager;
     }
 
@@ -114,6 +118,7 @@ export class GridCellWidgetPattern implements ListNavigationItem {
   /** Handles keydown events for the widget. */
   onKeydown(event: KeyboardEvent): void {
     if (this.disabled()) return;
+    console.log('keydown of widget.ts');
 
     this.keydown().handle(event);
   }

src/aria/private/simple-combobox/simple-combobox.ts

@@ -107,17 +107,17 @@ export class SimpleComboboxPattern {
         e => {
           this.keyboardEventRelay.set(e);
         },
-        {preventDefault: this.popupType() !== 'listbox'},
+        {preventDefault: this.popupType() !== 'listbox', ignoreRepeat: false},
       )
       .on(
         'ArrowRight',
         e => {
           this.keyboardEventRelay.set(e);
         },
-        {preventDefault: this.popupType() !== 'listbox'},
+        {preventDefault: this.popupType() !== 'listbox', ignoreRepeat: false},
       )
-      .on('ArrowUp', e => this.keyboardEventRelay.set(e))
-      .on('ArrowDown', e => this.keyboardEventRelay.set(e))
+      .on('ArrowUp', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false})
+      .on('ArrowDown', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false})
       .on('Home', e => this.keyboardEventRelay.set(e))
       .on('End', e => this.keyboardEventRelay.set(e))
       .on('Enter', e => this.keyboardEventRelay.set(e))

src/components-examples/aria/simple-combobox/BUILD.bazel

@@ -13,10 +13,16 @@ ng_project(
         "//:node_modules/@angular/common",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/forms",
+        "//src/aria/grid",
         "//src/aria/listbox",
         "//src/aria/simple-combobox",
         "//src/aria/tree",
+        "//src/cdk/a11y",
         "//src/cdk/overlay",
+        "//src/material/checkbox",
+        "//src/material/core",
+        "//src/material/icon",
+        "//src/material/tooltip",
     ],
 )
 

src/components-examples/aria/simple-combobox/index.ts

@@ -2,3 +2,5 @@ export {SimpleComboboxListboxExample} from './simple-combobox-listbox/simple-com
 export {SimpleComboboxListboxInlineExample} from './simple-combobox-listbox-inline/simple-combobox-listbox-inline-example';
 export {SimpleComboboxTreeExample} from './simple-combobox-tree/simple-combobox-tree-example';
 export {SimpleComboboxSelectExample} from './simple-combobox-select/simple-combobox-select-example';
+export {SimpleComboboxGridExample} from './simple-combobox-grid/simple-combobox-grid-example';
+export {SimpleComboboxDatepickerExample} from './simple-combobox-datepicker/simple-combobox-datepicker-example';

src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.css

@@ -0,0 +1,108 @@
+.example-datepicker-popup {
+  padding: 16px;
+  width: 320px;
+  max-height: none;
+  overflow: visible;
+  background-color: var(--mat-sys-surface);
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-extra-small);
+  box-shadow: var(--mat-sys-level2-shadow);
+}
+
+.example-datepicker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
+  margin-bottom: 12px;
+}
+
+.example-datepicker-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--mat-sys-on-surface);
+}
+
+.example-datepicker-nav-button {
+  background-color: transparent;
+  border: none;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--mat-sys-on-surface);
+  transition: background-color 0.2s ease;
+}
+
+.example-datepicker-nav-button:hover {
+  background-color: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
+}
+
+.example-datepicker-grid {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.example-datepicker-cell {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0;
+}
+
+.example-datepicker-weekday {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--mat-sys-on-surface-variant);
+  padding-bottom: 8px;
+}
+
+.example-datepicker-empty {
+  color: color-mix(in srgb, var(--mat-sys-on-surface) 30%, transparent);
+  font-size: 0.8rem;
+}
+
+.example-datepicker-day-button {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--mat-sys-on-surface);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.example-datepicker-cell:hover .example-datepicker-day-button {
+  background-color: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
+}
+
+/* Show circular focus ring on the day button when active using box-shadow */
+/* Subdued grey by default when navigating from the input */
+.example-datepicker-cell[data-active='true'] .example-datepicker-day-button {
+  box-shadow: 0 0 0 2px var(--mat-sys-outline);
+}
+
+/* Highlight circle with primary color when the grid has actual focus */
+.example-datepicker-grid:focus .example-datepicker-cell[data-active='true'] .example-datepicker-day-button,
+.example-datepicker-grid:focus-within .example-datepicker-cell[data-active='true'] .example-datepicker-day-button {
+  box-shadow: 0 0 0 2px var(--mat-sys-primary);
+}
+
+/* Hide all grid focus indicators when focus is in the header navigation */
+.example-datepicker-header:focus-within~.example-datepicker-grid .example-datepicker-cell[data-active='true'] .example-datepicker-day-button {
+  box-shadow: none;
+}
+
+.example-datepicker-cell[aria-selected='true'] .example-datepicker-day-button {
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
+}