fix: restore tabindex correctly when switch between mode

Author: shleewhite

packages/components/src/components/hds/advanced-table/helpers.ts

@@ -8,6 +8,16 @@ import { focusable, tabbable } from 'tabbable';
 import type { HdsAdvancedTableTdSignature } from './td';
 import type { HdsAdvancedTableThSignature } from './th';
 
+export const onFocusTrapDeactivate = (cell: HTMLDivElement) => {
+  const cellTabbableChildren = tabbable(cell);
+
+  for (const child of cellTabbableChildren) {
+    child.setAttribute('tabindex', '-1')
+  }
+
+  cell.setAttribute('tabindex', '0')
+}
+
 export const didInsertGridCell = (
   cell:
     | HdsAdvancedTableThSignature['Element']

packages/components/src/components/hds/advanced-table/td.ts

@@ -11,7 +11,7 @@ import { focusable, type FocusableElement } from 'tabbable';
 
 import type { HdsAdvancedTableHorizontalAlignment } from './types.ts';
 import { HdsAdvancedTableHorizontalAlignmentValues } from './types.ts';
-import { didInsertGridCell, handleGridCellKeyPress } from './helpers.ts';
+import { didInsertGridCell, handleGridCellKeyPress, onFocusTrapDeactivate } from './helpers.ts';
 
 export const ALIGNMENTS: string[] = Object.values(
   HdsAdvancedTableHorizontalAlignmentValues
@@ -77,6 +77,7 @@ export default class HdsAdvancedTableTd extends Component<HdsAdvancedTableTdSign
 
   @action onFocusTrapDeactivate(): void {
     this._shouldTrapFocus = false;
+    onFocusTrapDeactivate(this._element)
   }
 
   @action enableFocusTrap(): void {

packages/components/src/components/hds/advanced-table/th-sort.ts

@@ -21,7 +21,7 @@ import type {
   HdsAdvancedTableThSortOrderLabels,
 } from './types.ts';
 import type { HdsAdvancedTableThButtonSortSignature } from './th-button-sort';
-import { didInsertGridCell, handleGridCellKeyPress } from './helpers.ts';
+import { didInsertGridCell, handleGridCellKeyPress, onFocusTrapDeactivate } from './helpers.ts';
 
 export const ALIGNMENTS: string[] = Object.values(
   HdsAdvancedTableHorizontalAlignmentValues
@@ -92,6 +92,7 @@ export default class HdsAdvancedTableThSort extends Component<HdsAdvancedTableTh
 
   @action onFocusTrapDeactivate(): void {
     this._shouldTrapFocus = false;
+    onFocusTrapDeactivate(this._element)
   }
 
   @action enableFocusTrap(): void {

packages/components/src/components/hds/advanced-table/th.ts

@@ -15,7 +15,7 @@ import type {
   HdsAdvancedTableScope,
 } from './types.ts';
 import { HdsAdvancedTableHorizontalAlignmentValues } from './types.ts';
-import { didInsertGridCell, handleGridCellKeyPress } from './helpers.ts';
+import { didInsertGridCell, handleGridCellKeyPress, onFocusTrapDeactivate } from './helpers.ts';
 
 export const ALIGNMENTS: string[] = Object.values(
   HdsAdvancedTableHorizontalAlignmentValues
@@ -104,6 +104,8 @@ export default class HdsAdvancedTableTh extends Component<HdsAdvancedTableThSign
 
   @action onFocusTrapDeactivate(): void {
     this._shouldTrapFocus = false;
+    onFocusTrapDeactivate(this._element)
+
   }
 
   @action enableFocusTrap(): void {

showcase/tests/integration/components/hds/advanced-table/helpers-test.js

@@ -331,6 +331,15 @@ module(
       // cells should not be focusable anymore
       assert.dom('.hds-advanced-table__th[tabindex="0"]').doesNotExist();
       assert.dom('.hds-advanced-table__td[tabindex="0"]').doesNotExist();
+
+      await triggerKeyEvent(firstCellSortButton, 'keydown', 'Escape');
+      assert.dom(firstCell).hasAttribute('tabindex', '0');
+      assert.dom(firstCellSortButton).hasAttribute('tabindex', '-1');
+
+      // content within cells should not be focusable anymore
+      assert
+        .dom('[data-advanced-table-child-focusable=""][tabindex="0"]')
+        .doesNotExist();
     });
 
     test('it should trap focus inside a cell when not in navigation mode', async function (assert) {