ni · msmithNI · Apr 4, 2024 · Apr 30, 2024 · May 2, 2024 · May 2, 2024
@@ -57,6 +57,14 @@ TableColumnAnchorColumnConfig
     public override focusedRecycleCallback(): void {
         this.anchor?.blur();
     }
+
+    public override get tabbableChildren(): HTMLElement[] {
+        // this.anchor can be initialized even when not active in the template, so make sure it's in our DOM
+        if (this.anchor?.getRootNode() === this.shadowRoot) {
+            return [this.anchor];
+        }
+        return [];
+    }
 }
 
 const anchorCellView = TableColumnAnchorCellView.compose({

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

@@ -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[] = [];
 
     /**

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

@@ -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 {

@@ -1,10 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../../../utilities/style/display';
 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;
     }
@@ -34,4 +41,8 @@ export const styles = css`
         height: ${controlSlimHeight};
         align-self: center;
     }
+
+    .action-menu.focused {
+        display: block;
+    }
 `;
@@ -16,6 +16,7 @@ export const template = html<TableCell>`
             <${menuButtonTag} ${ref('actionMenuButton')}
                 content-hidden
                 appearance="${ButtonAppearance.ghost}"
+                tabindex="-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()}"

@@ -1,16 +1,17 @@
 import { attr, observable } from '@microsoft/fast-element';
 import {
-    Checkbox,
     DesignSystem,
     FoundationElement
 } from '@microsoft/fast-foundation';
 import type { TableColumn } from '../../../table-column/base';
 import { styles } from './styles';
 import { template } from './template';
 import {
+    TableRowFocusableElements,
     TableRowSelectionState,
     TableRowSelectionToggleEventDetail
 } from '../../types';
+import type { Checkbox } from '../../../checkbox';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -29,6 +30,9 @@ export class TableGroupRow extends FoundationElement {
     @observable
     public nestingLevel = 0;
 
+    @observable
+    public dataIndex?: number;
+
     @observable
     public immediateChildCount?: number;
 
@@ -83,7 +87,7 @@ export class TableGroupRow extends FoundationElement {
     }
 
     /** @internal */
-    public onSelectionChange(event: CustomEvent): void {
+    public onSelectionCheckboxChange(event: CustomEvent): void {
         if (this.ignoreSelectionChangeEvents) {
             return;
         }
@@ -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();
     }

@@ -3,6 +3,7 @@ import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../../utilities/style/display';
 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 *

@@ -24,7 +24,7 @@ export const template = html<TableGroupRow>`
                 <${checkboxTag}
                     ${ref('selectionCheckbox')}
                     class="selection-checkbox"
-                    @change="${(x, c) => x.onSelectionChange(c.event as CustomEvent)}"
+                    @change="${(x, c) => x.onSelectionCheckboxChange(c.event as CustomEvent)}"
                     @click="${(_, c) => c.event.stopPropagation()}"
                     title="${x => tableGroupSelectAllLabel.getValueFor(x)}"
                     aria-label="${x => tableGroupSelectAllLabel.getValueFor(x)}"

@@ -1,12 +1,14 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../../../utilities/style/display';
 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;

@@ -6,7 +6,6 @@ import {
     volatile
 } from '@microsoft/fast-element';
 import {
-    Checkbox,
     DesignSystem,
     FoundationElement
 } from '@microsoft/fast-foundation';
@@ -18,15 +17,17 @@ import type {
     TableFieldName,
     TableRecord,
     TableRowExpansionToggleEventDetail,
+    TableRowFocusableElements,
     TableRowSelectionToggleEventDetail
 } from '../../types';
 import type { TableColumn } from '../../../table-column/base';
 import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
-import { TableCell } from '../cell';
+import { TableCell, tableCellTag } from '../cell';
 import {
     ColumnInternals,
     isColumnInternalsProperty
 } from '../../../table-column/base/models/column-internals';
+import type { Checkbox } from '../../../checkbox';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -77,6 +78,9 @@ export class TableRow<
     @observable
     public nestingLevel = 0;
 
+    @observable
+    public dataIndex?: number;
+
     @attr({ attribute: 'is-parent-row', mode: 'boolean' })
     public isParentRow = false;
 
@@ -109,6 +113,10 @@ export class TableRow<
     @observable
     public readonly selectionCheckbox?: Checkbox;
 
+    /** @internal */
+    @observable
+    public readonly expandCollapseButton?: HTMLElement;
+
     /** @internal */
     public readonly cellContainer!: HTMLSpanElement;
 
@@ -133,6 +141,11 @@ export class TableRow<
         return this.isParentRow && this.nestingLevel > 0;
     }
 
+    @volatile
+    public get isInHierarchy(): boolean {
+        return this.isParentRow || this.nestingLevel > 0;
+    }
+
     // Programmatically updating the selection state of a checkbox fires the 'change' event.
     // Therefore, selection change events that occur due to programmatically updating
     // the selection checkbox 'checked' value should be ingored.
@@ -149,17 +162,22 @@ export class TableRow<
     }
 
     /** @internal */
-    public onSelectionChange(event: CustomEvent): void {
+    public onSelectionCheckboxChange(event: CustomEvent): void {
         if (this.ignoreSelectionChangeEvents) {
             return;
         }
 
         const checkbox = event.target as Checkbox;
         const checked = checkbox.checked;
-        this.selected = checked;
+        this.onSelectionChange(!checked, checked);
+    }
+
+    /** @internal */
+    public onSelectionChange(oldState: boolean, newState: boolean): void {
+        this.selected = newState;
         const detail: TableRowSelectionToggleEventDetail = {
-            oldState: !checked,
-            newState: checked
+            oldState,
+            newState
         };
         this.$emit('row-selection-toggle', detail);
     }
@@ -213,14 +231,27 @@ export class TableRow<
         }
     }
 
-    public onRowExpandToggle(event: Event): void {
+    /** @internal */
+    public getFocusableElements(): TableRowFocusableElements {
+        const result: TableRowFocusableElements = { cells: [] };
+        result.selectionCheckbox = this.selectionCheckbox;
+        this.shadowRoot!.querySelectorAll(tableCellTag).forEach(cell => {
+            result.cells.push({
+                actionMenuButton: cell.actionMenuButton,
+                cell
+            });
+        });
+        return result;
+    }
+
+    public onRowExpandToggle(event?: Event): void {
         const expandEventDetail: TableRowExpansionToggleEventDetail = {
             oldState: this.expanded,
             newState: !this.expanded,
             recordId: this.recordId!
         };
         this.$emit('row-expand-toggle', expandEventDetail);
-        event.stopImmediatePropagation();
+        event?.stopImmediatePropagation();
         // To avoid a visual glitch with improper expand/collapse icons performing an
         // animation (due to visual re-use apparently), we apply a class to the
         // contained expand-collapse button temporarily. We use the 'transitionend' event