fix: add keyboard handlers to sp-table-cell-head (#4473)

* fix: add keyboard handlers to sp-table-cell-head * fix: add tests * fix: add active --------- Co-authored-by: Rajdeep Chandra <rajrock38@gmail.com>
adobe · Jun 24, 2024 · 794263e · 794263e
1 parent 369fee7
commit 794263e
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 0 deletions.
diff --git a/packages/table/src/TableHeadCell.ts b/packages/table/src/TableHeadCell.ts
@@ -46,6 +46,9 @@ export class TableHeadCell extends SpectrumElement {
         return [styles, arrowStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public active = false;
+
     @property({ reflect: true })
     public override role = 'columnheader';
 
@@ -58,6 +61,47 @@ export class TableHeadCell extends SpectrumElement {
     @property({ attribute: 'sort-key' })
     public sortKey = '';
 
+    protected handleKeydown(event: KeyboardEvent): void {
+        const { code } = event;
+        switch (code) {
+            case 'Space':
+                event.preventDefault();
+                this.addEventListener('keyup', this.handleKeyup);
+                this.active = true;
+                break;
+            /* c8 ignore next 2 */
+            default:
+                break;
+        }
+    }
+
+    private handleKeypress(event: KeyboardEvent): void {
+        const { code } = event;
+        switch (code) {
+            case 'Enter':
+            case 'NumpadEnter':
+                this.click();
+                break;
+            /* c8 ignore next 2 */
+            default:
+                break;
+        }
+    }
+
+    protected handleKeyup(event: KeyboardEvent): void {
+        const { code } = event;
+        switch (code) {
+            case 'Space':
+                this.active = false;
+                this.removeEventListener('keyup', this.handleKeyup);
+                this.click();
+                break;
+            /* c8 ignore next 2 */
+            default:
+                break;
+        }
+    }
+
     protected handleClick(): void {
         if (!this.sortable) return;
         if (this.sortDirection) {
@@ -93,6 +137,8 @@ export class TableHeadCell extends SpectrumElement {
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('keypress', this.handleKeypress);
     }
 
     protected override update(changes: PropertyValues): void {

diff --git a/packages/table/test/virtualized-table.test.ts b/packages/table/test/virtualized-table.test.ts
@@ -187,6 +187,51 @@ describe('Virtualized Table', () => {
         expect(tableHeadCell1.getAttribute('sort-direction')).to.equal('asc');
     });
 
+    it('dispatches `sorted` events using the keyboard', async () => {
+        const test = await fixture<Table>(virtualized());
+        const el = test.shadowRoot?.querySelector('sp-table') as Table;
+
+        const tableHeadCell1 = el.querySelector(
+            '[sortable][sort-direction]'
+        ) as TableHeadCell;
+        const tableHeadCell2 = el.querySelector(
+            '[sortable]:not([sort-direction])'
+        ) as TableHeadCell;
+
+        tableHeadCell2.focus();
+        await nextFrame();
+        await sendKeys({
+            press: 'Enter',
+        });
+        await nextFrame();
+
+        expect(tableHeadCell1.hasAttribute('sort-direction')).to.be.false;
+        expect(tableHeadCell2.hasAttribute('sort-direction')).to.be.true;
+        expect(tableHeadCell2.getAttribute('sort-direction')).to.equal('asc');
+
+        tableHeadCell2.focus();
+        await nextFrame();
+        await sendKeys({
+            press: 'Space',
+        });
+        await nextFrame();
+
+        expect(tableHeadCell1.hasAttribute('sort-direction')).to.be.false;
+        expect(tableHeadCell2.hasAttribute('sort-direction')).to.be.true;
+        expect(tableHeadCell2.getAttribute('sort-direction')).to.equal('desc');
+
+        tableHeadCell1.focus();
+        await nextFrame();
+        await sendKeys({
+            press: 'Enter',
+        });
+        await nextFrame();
+
+        expect(tableHeadCell2.hasAttribute('sort-direction')).to.be.false;
+        expect(tableHeadCell1.hasAttribute('sort-direction')).to.be.true;
+        expect(tableHeadCell1.getAttribute('sort-direction')).to.equal('asc');
+    });
+
     it('dispatches `change` events', async () => {
         const changeSpy = spy();
         const el = await fixture<Table>(html`