fix(aria/grid): rework selection and add calendar example

Author: ok7sai

src/aria/grid/grid.ts

@@ -77,6 +77,12 @@ export class Grid {
   /** The wrapping behavior for keyboard navigation along the column axis. */
   readonly colWrap = input<'continuous' | 'loop' | 'nowrap'>('loop');
 
+  /** Whether multiple cells in the grid can be selected at once. */
+  readonly multi = input(false, {transform: booleanAttribute});
+
+  /** The selection strategy used by the grid. */
+  readonly selectionMode = input<'follow' | 'explicit'>('follow');
+
   /** The UI pattern for the grid. */
   readonly _pattern = new GridPattern({
     ...this,
@@ -163,6 +169,7 @@ export class GridRow {
     '[attr.rowspan]': '_pattern.rowSpan()',
     '[attr.colspan]': '_pattern.colSpan()',
     '[attr.data-active]': '_pattern.active()',
+    '[attr.data-anchor]': '_pattern.anchor()',
     '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.aria-rowspan]': '_pattern.rowSpan()',
     '[attr.aria-colspan]': '_pattern.colSpan()',

src/aria/private/behaviors/grid/grid-navigation.spec.ts

@@ -164,6 +164,16 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true', () => {
+        gridNav.gotoCoords({row: 1, col: 0});
+        cells[0][0].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Up, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 0, col: 0});
+        expect(gridNav.peek(direction.Up, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
 
     describe('down', () => {
@@ -192,6 +202,16 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true', () => {
+        gridNav.gotoCoords({row: 1, col: 0});
+        cells[2][0].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Down, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 2, col: 0});
+        expect(gridNav.peek(direction.Down, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
 
     describe('left', () => {
@@ -222,6 +242,16 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true', () => {
+        gridNav.gotoCoords({row: 0, col: 1});
+        cells[0][0].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Left, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 0, col: 0});
+        expect(gridNav.peek(direction.Left, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
 
     describe('right', () => {
@@ -252,6 +282,16 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true', () => {
+        gridNav.gotoCoords({row: 0, col: 1});
+        cells[0][2].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Right, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 0, col: 2});
+        expect(gridNav.peek(direction.Right, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
   });
 
@@ -1882,6 +1922,17 @@ describe('GridNavigation', () => {
       expect(gridFocus.activeCell()).toBe(cells[1][1]);
       expect(gridFocus.activeCoords()).toEqual({row: 1, col: 1});
     });
+
+    it('should get disabled cells when allowDisabled is true', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridNav} = setupGridNavigation(signal(cells));
+      cells[0][0].disabled.set(true);
+
+      const firstCoords = gridNav.peekFirst(undefined, true);
+
+      expect(firstCoords).toEqual({row: 0, col: 0});
+      expect(gridNav.peekFirst()).toEqual({row: 0, col: 1});
+    });
   });
 
   describe('last/peekLast', () => {
@@ -1920,5 +1971,16 @@ describe('GridNavigation', () => {
       expect(gridFocus.activeCell()!.id()).toBe('cell-1-1');
       expect(gridFocus.activeCoords()).toEqual({row: 1, col: 2});
     });
+
+    it('should get disabled cells when allowDisabled is true', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridNav} = setupGridNavigation(signal(cells));
+      cells[2][2].disabled.set(true);
+
+      const lastCoords = gridNav.peekLast(undefined, true);
+
+      expect(lastCoords).toEqual({row: 2, col: 2});
+      expect(gridNav.peekLast()).toEqual({row: 2, col: 1});
+    });
   });
 });

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

@@ -73,9 +73,14 @@ export class GridNavigation<T extends GridNavigationCell> {
   /**
    * Gets the coordinates of the next focusable cell in a given direction, without changing focus.
    */
-  peek(direction: Delta, fromCoords: RowCol, wrap?: WrapStrategy): RowCol | undefined {
+  peek(
+    direction: Delta,
+    fromCoords: RowCol,
+    wrap?: WrapStrategy,
+    allowDisabled?: boolean,
+  ): RowCol | undefined {
     wrap = wrap ?? (direction.row !== undefined ? this.inputs.rowWrap() : this.inputs.colWrap());
-    return this._peekDirectional(direction, fromCoords, wrap);
+    return this._peekDirectional(direction, fromCoords, wrap, allowDisabled);
   }
 
   /**
@@ -90,14 +95,14 @@ export class GridNavigation<T extends GridNavigationCell> {
    * Gets the coordinates of the first focusable cell.
    * If a row is not provided, searches the entire grid.
    */
-  peekFirst(row?: number): RowCol | undefined {
+  peekFirst(row?: number, allowDisabled?: boolean): RowCol | undefined {
     const fromCoords = {
       row: row ?? 0,
       col: -1,
     };
     return row === undefined
-      ? this._peekDirectional(direction.Right, fromCoords, 'continuous')
-      : this._peekDirectional(direction.Right, fromCoords, 'nowrap');
+      ? this._peekDirectional(direction.Right, fromCoords, 'continuous', allowDisabled)
+      : this._peekDirectional(direction.Right, fromCoords, 'nowrap', allowDisabled);
   }
 
   /**
@@ -113,14 +118,14 @@ export class GridNavigation<T extends GridNavigationCell> {
    * Gets the coordinates of the last focusable cell.
    * If a row is not provided, searches the entire grid.
    */
-  peekLast(row?: number): RowCol | undefined {
+  peekLast(row?: number, allowDisabled?: boolean): RowCol | undefined {
     const fromCoords = {
       row: row ?? this.inputs.grid.maxRowCount() - 1,
       col: this.inputs.grid.maxColCount(),
     };
     return row === undefined
-      ? this._peekDirectional(direction.Left, fromCoords, 'continuous')
-      : this._peekDirectional(direction.Left, fromCoords, 'nowrap');
+      ? this._peekDirectional(direction.Left, fromCoords, 'continuous', allowDisabled)
+      : this._peekDirectional(direction.Left, fromCoords, 'nowrap', allowDisabled);
   }
 
   /**
@@ -139,6 +144,7 @@ export class GridNavigation<T extends GridNavigationCell> {
     delta: Delta,
     fromCoords: RowCol,
     wrap: 'continuous' | 'loop' | 'nowrap',
+    allowDisabled: boolean = false,
   ): RowCol | undefined {
     const fromCell = this.inputs.grid.getCell(fromCoords);
     const maxRowCount = this.inputs.grid.maxRowCount();
@@ -190,7 +196,7 @@ export class GridNavigation<T extends GridNavigationCell> {
       if (
         nextCell !== undefined &&
         nextCell !== fromCell &&
-        this.inputs.gridFocus.isFocusable(nextCell)
+        (allowDisabled || this.inputs.gridFocus.isFocusable(nextCell))
       ) {
         return nextCoords;
       }

src/aria/private/behaviors/grid/grid-selection.spec.ts

@@ -58,6 +58,10 @@ function setupGridSelection(
   const gridSelection = new GridSelection({
     grid: gridData,
     gridFocus: gridFocus,
+    // Unused by Grid Selection.
+    enableSelection: signal(true),
+    multi: signal(false),
+    selectionMode: signal('explicit'),
     ...gridFocusInputs,
     ...inputs,
   });
@@ -207,4 +211,97 @@ describe('GridSelection', () => {
       expect(validCellIds.length).toBe(allCellIds.length - 2);
     });
   });
+
+  describe('undo', () => {
+    it('should undo a select operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+
+      gridSelection.select({row: 1, col: 1});
+      expect(cells[1][1].selected()).toBe(true);
+
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(false);
+    });
+
+    it('should undo a deselect operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells[1][1].selected.set(true);
+
+      gridSelection.deselect({row: 1, col: 1});
+      expect(cells[1][1].selected()).toBe(false);
+
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(true);
+    });
+
+    it('should undo a toggle operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells[0][0].selected.set(true);
+
+      gridSelection.toggle({row: 0, col: 0}, {row: 0, col: 1});
+      expect(cells[0][0].selected()).toBe(false);
+      expect(cells[0][1].selected()).toBe(true);
+
+      gridSelection.undo();
+      expect(cells[0][0].selected()).toBe(true);
+      expect(cells[0][1].selected()).toBe(false);
+    });
+
+    it('should undo a selectAll operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+
+      gridSelection.selectAll();
+      expect(cells.flat().every(c => c.selected())).toBe(true);
+
+      gridSelection.undo();
+      expect(cells.flat().every(c => !c.selected())).toBe(true);
+    });
+
+    it('should undo a deselectAll operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells.flat().forEach(c => c.selected.set(true));
+
+      gridSelection.deselectAll();
+      expect(cells.flat().every(c => !c.selected())).toBe(true);
+
+      gridSelection.undo();
+      expect(cells.flat().every(c => c.selected())).toBe(true);
+    });
+
+    it('should do nothing if there is nothing to undo', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells[1][1].selected.set(true);
+
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(true);
+    });
+
+    it('should only undo the last operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+
+      gridSelection.select({row: 0, col: 0});
+      gridSelection.select({row: 1, col: 1});
+      expect(cells[1][1].selected()).toBe(true);
+
+      gridSelection.undo();
+      expect(cells[0][0].selected()).toBe(true);
+      expect(cells[1][1].selected()).toBe(false);
+    });
+
+    it('should do nothing after undoing once', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      gridSelection.select({row: 1, col: 1});
+      gridSelection.undo();
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(false);
+    });
+  });
 });