Table keyboard interaction (draft / partial implementation)

packages/nimble-components/src/anchor/index.ts

@@ -1,4 +1,4 @@
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import {
     DesignSystem,
     Anchor as FoundationAnchor,
@@ -8,6 +8,7 @@ import { AnchorBase } from '../anchor-base';
 import { styles } from './styles';
 import { template } from './template';
 import type { AnchorAppearance } from './types';
+import type { TabIndexOverride } from '../patterns/tab-index-override/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,7 +19,7 @@ declare global {
 /**
  * A nimble-styled anchor
  */
-export class Anchor extends AnchorBase {
+export class Anchor extends AnchorBase implements TabIndexOverride {
     /**
      * @public
      * @remarks
@@ -47,6 +48,10 @@ export class Anchor extends AnchorBase {
      */
     @attr({ attribute: 'contenteditable' })
     public override contentEditable!: string;
+
+    /** @internal */
+    @observable
+    public tabIndexOverride = 0;
 }
 
 // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.

packages/nimble-components/src/anchor/template.ts

@@ -19,6 +19,7 @@ AnchorOptions
     ><a
         class="control"
         part="control"
+        tabindex="${x => x.tabIndexOverride}"
         download="${x => x.download}"
         href=${x => x.href}
         hreflang="${x => x.hreflang}"

packages/nimble-components/src/checkbox/index.ts

@@ -1,11 +1,13 @@
 import {
     DesignSystem,
     Checkbox as FoundationCheckbox,
-    CheckboxOptions,
-    checkboxTemplate as template
+    CheckboxOptions
 } from '@microsoft/fast-foundation';
+import { observable } from '@microsoft/fast-element';
 import { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
+import { checkboxTemplate as template } from './template';
+import type { TabIndexOverride } from '../patterns/tab-index-override/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -16,7 +18,11 @@ declare global {
 /**
  * A nimble-styled checkbox control.
  */
-export class Checkbox extends FoundationCheckbox {}
+export class Checkbox extends FoundationCheckbox implements TabIndexOverride {
+    /** @internal */
+    @observable
+    public tabIndexOverride = 0;
+}
 
 const nimbleCheckbox = Checkbox.compose<CheckboxOptions>({
     baseName: 'checkbox',

packages/nimble-components/src/checkbox/template.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/prefer-optional-chain */
+import { ViewTemplate, html, slotted } from '@microsoft/fast-element';
+import type {
+    CheckboxOptions,
+    OverrideFoundationElementDefinition
+} from '@microsoft/fast-foundation';
+import type { Checkbox } from '.';
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
+ * @public
+ */
+export const checkboxTemplate = (
+    _: unknown,
+    definition: OverrideFoundationElementDefinition<CheckboxOptions>
+): ViewTemplate<Checkbox> => html<Checkbox>`
+    <template
+        role="checkbox"
+        aria-checked="${x => x.checked}"
+        aria-required="${x => x.required}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        tabindex="${x => (x.disabled ? null : x.tabIndexOverride)}"
+        @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+        @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+        class="${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}"
+    >
+        <div part="control" class="control">
+            <slot name="checked-indicator">
+                ${definition.checkedIndicator || ''}
+            </slot>
+            <slot name="indeterminate-indicator">
+                ${definition.indeterminateIndicator || ''}
+            </slot>
+        </div>
+        <label
+            part="label"
+            class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length
+        ? 'label'
+        : 'label label__hidden')}"
+        >
+            <slot ${slotted('defaultSlottedNodes')}></slot>
+        </label>
+    </template>
+`;

packages/nimble-components/src/menu-button/index.ts

@@ -17,6 +17,7 @@ import { styles } from './styles';
 import { template } from './template';
 import type { ButtonPattern } from '../patterns/button/types';
 import type { AnchoredRegion } from '../anchored-region';
+import type { TabIndexOverride } from '../patterns/tab-index-override/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -27,7 +28,9 @@ declare global {
 /**
  * A nimble-styled menu button control.
  */
-export class MenuButton extends FoundationElement implements ButtonPattern {
+export class MenuButton
+    extends FoundationElement
+    implements ButtonPattern, TabIndexOverride {
     @attr
     public appearance: ButtonAppearance = ButtonAppearance.outline;
 
@@ -64,6 +67,10 @@ export class MenuButton extends FoundationElement implements ButtonPattern {
     @observable
     public readonly slottedMenus?: HTMLElement[];
 
+    /** @internal */
+    @observable
+    public tabIndexOverride = 0;
+
     /**
      * Used to maintain the internal state of whether the last menu item should be focused instead
      * of the first menu item the next time the menu is opened.

packages/nimble-components/src/menu-button/template.ts

@@ -16,6 +16,7 @@ export const template = html<MenuButton>`
             ?content-hidden="${x => x.contentHidden}"
             ?checked="${x => x.open}"
             ?disabled="${x => x.disabled}"
+            :tabIndexOverride="${x => x.tabIndexOverride}"
             aria-haspopup="true"
             aria-expanded="${x => x.open}"
             @change="${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}"

packages/nimble-components/src/patterns/tab-index-override/types.ts

@@ -0,0 +1,7 @@
+/**
+ * Implemented by controls that typically set tabindex="0" in their templates,
+ * but allow overriding that behavior in some Nimble-internal cases (i.e. the table)
+ */
+export interface TabIndexOverride {
+    tabIndexOverride: number;
+}

packages/nimble-components/src/table-column/anchor/cell-view/index.ts

@@ -57,6 +57,10 @@ TableColumnAnchorColumnConfig
     public override focusedRecycleCallback(): void {
         this.anchor?.blur();
     }
+
+    public override get tabbableChildren(): HTMLElement[] {
+        return this.anchor !== undefined ? [this.anchor] : [];
+    }
 }
 
 const anchorCellView = TableColumnAnchorCellView.compose({

packages/nimble-components/src/table-column/anchor/cell-view/template.ts

@@ -19,6 +19,7 @@ export const template = html<TableColumnAnchorCellView>`
             <${anchorTag}
                 ${ref('anchor')}
                 ${overflow('hasOverflow')}
+                :tabIndexOverride="${_ => -1}"
                 href="${x => x.cellRecord?.href}"
                 hreflang="${x => x.columnConfig?.hreflang}"
                 ping="${x => x.columnConfig?.ping}"

packages/nimble-components/src/table-column/base/cell-view/index.ts

@@ -29,6 +29,14 @@ export abstract class TableCellView<
     @observable
     public recordId?: string;
 
+    /**
+     * Gets the child elements in this cell view that should be able to be reached via Tab/ Shift-Tab,
+     * if any.
+     */
+    public get tabbableChildren(): HTMLElement[] {
+        return [];
+    }
+
     private delegatedEvents: readonly string[] = [];
 
     /**

packages/nimble-components/src/table-column/base/tests/types.ts

@@ -5,7 +5,8 @@ export const ExampleSortType = {
     secondColumnDescendingFirstColumnAscending:
         'SecondColumnDescendingFirstColumnAscending',
     firstColumnAscendingSecondColumnDisabled:
-        'FirstColumnAscendingSecondColumnDisabled'
+        'FirstColumnAscendingSecondColumnDisabled',
+    allColumnsDisabled: 'AllColumnsDisabled'
 } as const;
 export type ExampleSortType =
     (typeof ExampleSortType)[keyof typeof ExampleSortType];

packages/nimble-components/src/table/components/cell/index.ts

@@ -9,6 +9,7 @@ import type {
 } from '../../../table-column/base/types';
 import { styles } from './styles';
 import { template } from './template';
+import type { TableCellView } from '../../../table-column/base/cell-view';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -52,6 +53,11 @@ export class TableCell<
 
     public readonly actionMenuButton?: MenuButton;
 
+    /** @internal */
+    public get cellView(): TableCellView<TCellRecord> {
+        return this.shadowRoot?.firstElementChild as TableCellView<TCellRecord>;
+    }
+
     public onActionMenuBeforeToggle(
         event: CustomEvent<MenuButtonToggleEventDetail>
     ): void {
@@ -64,6 +70,15 @@ export class TableCell<
         this.menuOpen = event.detail.newState;
         this.$emit('cell-action-menu-toggle', event.detail);
     }
+
+    /** @internal */
+    public onActionMenuButtonBlur(): void {
+        // The table keyboard navigation code adds a 'focused' class on action menu buttons before focusing them
+        // via keyboard, to ensure they're visible to focus. This code ensures we remove that CSS class when the menu
+        // button is no longer focused (which may not be for a keyboard nav reason, i.e. a mouse click elsewhere on
+        // the table)
+        this.actionMenuButton!.classList.remove('focused');
+    }
 }
 
 const nimbleTableCell = TableCell.compose({

packages/nimble-components/src/table/components/cell/styles.ts

@@ -1,10 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+    borderHoverColor,
     controlHeight,
     controlSlimHeight,
     mediumPadding
 } from '../../../theme-provider/design-tokens';
+import { focusVisible } from '../../../utilities/style/focus';
 
 export const styles = css`
     ${display('flex')}
@@ -22,6 +24,11 @@ export const styles = css`
         --ni-private-table-cell-action-menu-display: block;
     }
 
+    :host(${focusVisible}) {
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
     .cell-view {
         overflow: hidden;
         display: flex;
@@ -36,4 +43,8 @@ export const styles = css`
         height: ${controlSlimHeight};
         align-self: center;
     }
+
+    .action-menu.focused {
+        display: block;
+    }
 `;

packages/nimble-components/src/table/components/cell/template.ts

@@ -16,9 +16,11 @@ export const template = html<TableCell>`
             <${menuButtonTag} ${ref('actionMenuButton')}
                 content-hidden
                 appearance="${ButtonAppearance.ghost}"
+                :tabIndexOverride="${_ => -1}"
                 @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}"
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}"
                 @click="${(_, c) => c.event.stopPropagation()}"
+                @blur="${x => x.onActionMenuButtonBlur()}"
                 class="action-menu"
                 title="${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}"
             >

packages/nimble-components/src/table/components/group-row/index.ts

@@ -8,6 +8,7 @@ import type { TableColumn } from '../../../table-column/base';
 import { styles } from './styles';
 import { template } from './template';
 import {
+    TableRowFocusableElements,
     TableRowSelectionState,
     TableRowSelectionToggleEventDetail
 } from '../../types';
@@ -29,6 +30,9 @@ export class TableGroupRow extends FoundationElement {
     @observable
     public nestingLevel = 0;
 
+    @observable
+    public dataIndex?: number;
+
     @observable
     public immediateChildCount?: number;
 
@@ -100,6 +104,11 @@ export class TableGroupRow extends FoundationElement {
         this.$emit('group-selection-toggle', detail);
     }
 
+    /** @internal */
+    public getFocusableElements(): TableRowFocusableElements {
+        return { selectionCheckbox: this.selectionCheckbox, cells: [] };
+    }
+
     private selectionStateChanged(): void {
         this.setSelectionCheckboxState();
     }

packages/nimble-components/src/table/components/group-row/styles.ts

@@ -3,6 +3,7 @@ import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import {
     applicationBackgroundColor,
+    borderHoverColor,
     borderWidth,
     controlHeight,
     fillHoverColor,
@@ -14,6 +15,7 @@ import { hexToRgbaCssColor } from '../../../utilities/style/colors';
 import { themeBehavior } from '../../../utilities/style/theme';
 import { userSelectNone } from '../../../utilities/style/user-select';
 import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
+import { focusVisible } from '../../../utilities/style/focus';
 
 export const styles = css`
     ${display('grid')}
@@ -55,6 +57,11 @@ export const styles = css`
         background-color: ${fillHoverColor};
     }
 
+    :host(${focusVisible}) {
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${mediumPadding} + ${standardPadding} * 2 *

packages/nimble-components/src/table/components/header/styles.ts

@@ -1,12 +1,14 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
+    borderHoverColor,
     controlHeight,
     iconColor,
     mediumPadding,
     tableHeaderFont,
     tableHeaderFontColor
 } from '../../../theme-provider/design-tokens';
+import { focusVisible } from '../../../utilities/style/focus';
 
 export const styles = css`
     ${display('flex')}
@@ -23,6 +25,11 @@ export const styles = css`
         cursor: default;
     }
 
+    :host(${focusVisible}) {
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
     .sort-indicator,
     .grouped-indicator {
         flex: 0 0 auto;