Feature complete keyboard nav

ni · May 17, 2024 · 0ba987e · 0ba987e
1 parent 247b51a
commit 0ba987e
Show file tree

Hide file tree

Showing 12 changed files with 485 additions and 136 deletions.
diff --git a/packages/nimble-components/src/table/components/group-row/index.ts b/packages/nimble-components/src/table/components/group-row/index.ts
@@ -87,7 +87,7 @@ export class TableGroupRow extends FoundationElement {
     }
 
     /** @internal */
-    public onSelectionChange(event: CustomEvent): void {
+    public onSelectionCheckboxChange(event: CustomEvent): void {
         if (this.ignoreSelectionChangeEvents) {
             return;
         }

diff --git a/packages/nimble-components/src/table/components/group-row/template.ts b/packages/nimble-components/src/table/components/group-row/template.ts
@@ -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)}"

diff --git a/packages/nimble-components/src/table/components/row/index.ts b/packages/nimble-components/src/table/components/row/index.ts
@@ -162,18 +162,20 @@ 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;
-        const detail: TableRowSelectionToggleEventDetail = {
-            oldState: !checked,
-            newState: checked
-        };
+        this.onSelectionChange(!checked, checked);
+    }
+
+    /** @internal */
+    public onSelectionChange(oldState: boolean, newState: boolean): void {
+        this.selected = newState;
+        const detail: TableRowSelectionToggleEventDetail = { oldState, newState };
         this.$emit('row-selection-toggle', detail);
     }
 
@@ -365,6 +367,16 @@ export class TableRow<
             this.ignoreSelectionChangeEvents = false;
         }
     }
+
+    private readonly rowFocusInHandler = (event: FocusEvent): void => {
+        // const path = event.composedPath();
+        // console.log('row focus in', this, path, event.target, event.relatedTarget);
+    };
+
+    private readonly rowFocusOutHandler = (event: FocusEvent): void => {
+        // const path = event.composedPath();
+        // console.log('row focus out', this, path, event.target, event.relatedTarget);
+    };
 }
 
 const nimbleTableRow = TableRow.compose({

diff --git a/packages/nimble-components/src/table/components/row/styles.ts b/packages/nimble-components/src/table/components/row/styles.ts
@@ -132,16 +132,16 @@ export const styles = css`
 
     /* TODO: Scope this to only hasDataHierarchy; ~4px more padding on left, so border doesn't touch expand/collapse button border */
     nimble-table-cell:first-of-type${focusVisible} {
-        margin-left: -24px;
-        padding-left: 32px;
+        margin-left: calc(-28px * var(--ni-private-cell-focus-offset-multiplier));
+        padding-left: calc(24px * var(--ni-private-cell-focus-offset-multiplier) + 8px);
     }
 
-    .is-in-hierarchy nimble-table-cell:first-of-type${focusVisible}::before {
+    /*.is-in-hierarchy */
+    nimble-table-cell:first-of-type${focusVisible}::before {
         content: '';
         display: block;
         width: calc(
-            var(--ni-nimble-control-height) *
-                var(--ni-private-table-cell-nesting-level)
+            (var(--ni-nimble-control-height) * var(--ni-private-table-cell-nesting-level) + 4px) * var(--ni-private-cell-focus-offset-multiplier)
         );
         height: 32px;
         box-sizing: border-box;

diff --git a/packages/nimble-components/src/table/components/row/template.ts b/packages/nimble-components/src/table/components/row/template.ts
@@ -34,7 +34,7 @@ export const template = html<TableRow>`
                         ${ref('selectionCheckbox')}
                         class="selection-checkbox"
                         ${notFocusable()}
-                        @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 => tableRowSelectLabel.getValueFor(x)}"
                         aria-label="${x => tableRowSelectLabel.getValueFor(x)}"

diff --git a/packages/nimble-components/src/table/index.ts b/packages/nimble-components/src/table/index.ts
@@ -337,6 +337,7 @@ export class Table<
         this.viewport.addEventListener('scroll', this.onViewPortScroll, {
             passive: true
         });
+        this.keyboardNavigationManager.connect();
         document.addEventListener('keydown', this.onKeyDown);
         document.addEventListener('keyup', this.onKeyUp);
     }
@@ -416,6 +417,11 @@ export class Table<
         return true;
     }
 
+    /** @internal */
+    public onRowFocusIn(event: FocusEvent): void {
+        this.keyboardNavigationManager.onRowFocusIn(event);
+    }
+
     /** @internal */
     public onAllRowsSelectionChange(event: CustomEvent): void {
         event.stopPropagation();
@@ -699,6 +705,7 @@ export class Table<
     private async handleRowActionMenuToggleEvent(
         event: CustomEvent<TableActionMenuToggleEventDetail>
     ): Promise<void> {
+        this.keyboardNavigationManager.onRowActionMenuToggle(event);
         const detail = await this.getActionMenuToggleEventDetail(event);
         this.$emit('action-menu-toggle', detail);
         if (!event.detail.newState) {