fix: toggle checkbox on selection column cell Space key (#7178) (#7194)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/grid/src/vaadin-grid-mixin.js

@@ -574,6 +574,10 @@ export const GridMixin = (superClass) =>
         });
       }
 
+      if (column && column._onCellKeyDown) {
+        cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
+      }
+
       const slot = document.createElement('slot');
       slot.setAttribute('name', slotName);
 
@@ -705,7 +709,7 @@ export const GridMixin = (superClass) =>
             // Header & footer
             const tagName = section === 'header' ? 'th' : 'td';
             if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
-              cell = column[`_${section}Cell`] || this._createCell(tagName);
+              cell = column[`_${section}Cell`] || this._createCell(tagName, column);
               cell._column = column;
               row.appendChild(cell);
               column[`_${section}Cell`] = cell;

packages/grid/src/vaadin-grid-selection-column-base-mixin.js

@@ -233,6 +233,16 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _onCellKeyDown(e) {
+      const target = e.composedPath()[0];
+      // Toggle on Space without having to enter interaction mode first
+      if (e.keyCode === 32 && (target === this._headerCell || (this._cells.includes(target) && !this.autoSelect))) {
+        const checkbox = target._content.firstElementChild;
+        checkbox.checked = !checkbox.checked;
+      }
+    }
+
     /** @private */
     __dragAutoScroller() {
       if (this.__dragStartIndex === undefined) {

packages/grid/test/selection.common.js

@@ -1,5 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import { click, fixtureSync, listenOnce, mousedown, nextFrame } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import {
   fire,
@@ -252,6 +253,73 @@ describe('multi selection column', () => {
     expect(grid.selectedItems).to.eql([]);
   });
 
+  it('should add the item to selectedItems on selection column cell Space key', async () => {
+    const cell = getRowCells(rows[1])[0];
+    cell.focus();
+    await sendKeys({ press: 'Space' });
+
+    expect(grid.selectedItems).to.eql([grid.items[1]]);
+  });
+
+  it('should remove the item from selectedItems on selection column cell Space key', async () => {
+    grid.selectItem(grid.items[1]);
+    const cell = getRowCells(rows[1])[0];
+
+    cell.focus();
+    await sendKeys({ press: 'Space' });
+
+    expect(grid.selectedItems).to.eql([]);
+  });
+
+  it('should add the item to selectedItems on selection column cell Space key when autoSelect is false', async () => {
+    selectionColumn.autoSelect = false;
+
+    const cell = getRowCells(rows[1])[0];
+    cell.focus();
+    await sendKeys({ press: 'Space' });
+
+    expect(grid.selectedItems).to.eql([grid.items[1]]);
+  });
+
+  it('should remove the item from selectedItems on selection column cell Space key when autoSelect is false', async () => {
+    selectionColumn.autoSelect = false;
+
+    grid.selectItem(grid.items[1]);
+    const cell = getRowCells(rows[1])[0];
+    cell.focus();
+    await sendKeys({ press: 'Space' });
+
+    expect(grid.selectedItems).to.eql([]);
+  });
+
+  it('should add the item to selectedItems on selection column checkbox Space key', async () => {
+    selectionColumn.autoSelect = false;
+
+    const cell = getRowCells(rows[1])[0];
+    cell.focus();
+
+    // Enter interaction mode to focus checkbox
+    await sendKeys({ press: 'Enter' });
+    await sendKeys({ press: 'Space' });
+
+    expect(grid.selectedItems).to.eql([grid.items[1]]);
+  });
+
+  it('should remove the item from selectedItems on selection column checkbox Space key', async () => {
+    selectionColumn.autoSelect = false;
+
+    grid.selectItem(grid.items[1]);
+
+    const cell = getRowCells(rows[1])[0];
+    cell.focus();
+
+    // Enter interaction mode to focus checkbox
+    await sendKeys({ press: 'Enter' });
+    await sendKeys({ press: 'Space' });
+
+    expect(grid.selectedItems).to.eql([]);
+  });
+
   it('should have bound the body checkbox to selected items', () => {
     const selectCheckbox = firstBodyCheckbox;
 
@@ -274,6 +342,21 @@ describe('multi selection column', () => {
     expect(selectionColumn.selectAll).to.be.true;
   });
 
+  it('should set selectAll on header cell Space key', async () => {
+    const headerCell = getRowCells(headerRows[1])[0];
+    headerCell.focus();
+    await sendKeys({ press: 'Space' });
+    expect(selectionColumn.selectAll).to.be.true;
+  });
+
+  it('should set selectAll on header cell checkbox Space key', async () => {
+    const headerCell = getRowCells(headerRows[1])[0];
+    headerCell.focus();
+    await sendKeys({ press: 'Enter' });
+    await sendKeys({ press: 'Space' });
+    expect(selectionColumn.selectAll).to.be.true;
+  });
+
   it('should select all items when select all is set', () => {
     selectionColumn.selectAll = true;