From 0ad088e9727beecc1458f9025b048846aa00ae1c Mon Sep 17 00:00:00 2001 From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com> Date: Thu, 30 May 2024 17:22:11 -0500 Subject: [PATCH] Remove 'single interactive element' special case --- .../models/keyboard-navigation-manager.ts | 60 ++++--------------- 1 file changed, 13 insertions(+), 47 deletions(-) diff --git a/packages/nimble-components/src/table/models/keyboard-navigation-manager.ts b/packages/nimble-components/src/table/models/keyboard-navigation-manager.ts index 7a492a6a9a..d484abe380 100644 --- a/packages/nimble-components/src/table/models/keyboard-navigation-manager.ts +++ b/packages/nimble-components/src/table/models/keyboard-navigation-manager.ts @@ -181,9 +181,7 @@ implements Subscriber { this.setCellActionMenuFocusState(row.dataIndex!, columnIndex, false); } else { const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement); - if (contentIndex === 0 && this.cellHasSingleInteractiveElement(cell)) { - this.setCellFocusState(columnIndex, row.dataIndex!, false); - } else if (contentIndex > -1) { + if (contentIndex > -1) { this.setCellContentFocusState(contentIndex, row.dataIndex!, columnIndex, false); } } @@ -201,9 +199,6 @@ implements Subscriber { if (cell) { if (this.focusType === TableFocusType.cellActionMenu && cell.actionMenuButton) { this.setActionMenuButtonFocused(cell.actionMenuButton, false); - } - if (this.focusType === TableFocusType.cell && this.cellHasSingleInteractiveElement(cell)) { - this.setRowFocusState(); } else { this.setCellFocusState(this.columnIndex, this.rowIndex, false); } @@ -342,10 +337,6 @@ implements Subscriber { if (this.focusType === TableFocusType.cell) { const row = this.getCurrentRow(); const rowElements = row!.getFocusableElements(); - if (this.currentCellHasSingleInteractiveElement(rowElements)) { - // already focused (single interactive element special case), so we don't want to set cellContent focus type - return false; - } return this.focusFirstInteractiveElementInCurrentCell(rowElements); } return false; @@ -529,31 +520,22 @@ implements Subscriber { while (cellIndex < this.table.visibleColumns.length) { const firstCellTabbableIndex = focusStates.length; const cellInfo = rowElements.cells[cellIndex]!; - const cellHasSingleInteractiveElement = this.cellHasSingleInteractiveElement(cellInfo.cell); - if (cellHasSingleInteractiveElement) { - focusStates.push({ focusType: TableFocusType.cell, columnIndex: cellIndex }); - } else { - const cellViewTabbableChildren = cellInfo.cell.cellView.tabbableChildren; - for (let i = 0; i < cellViewTabbableChildren.length; i++) { - focusStates.push({ focusType: TableFocusType.cellContent, columnIndex: cellIndex, cellContentIndex: i }); - if (this.focusType === TableFocusType.cellContent && this.columnIndex === cellIndex && this.cellContentIndex === i) { - startIndex = focusStates.length - 1; - } + const cellViewTabbableChildren = cellInfo.cell.cellView.tabbableChildren; + for (let i = 0; i < cellViewTabbableChildren.length; i++) { + focusStates.push({ focusType: TableFocusType.cellContent, columnIndex: cellIndex, cellContentIndex: i }); + if (this.focusType === TableFocusType.cellContent && this.columnIndex === cellIndex && this.cellContentIndex === i) { + startIndex = focusStates.length - 1; } - if (cellInfo.actionMenuButton) { - focusStates.push({ focusType: TableFocusType.cellActionMenu, columnIndex: cellIndex }); - if (this.focusType === TableFocusType.cellActionMenu && this.columnIndex === cellIndex) { - startIndex = focusStates.length - 1; - } + } + if (cellInfo.actionMenuButton) { + focusStates.push({ focusType: TableFocusType.cellActionMenu, columnIndex: cellIndex }); + if (this.focusType === TableFocusType.cellActionMenu && this.columnIndex === cellIndex) { + startIndex = focusStates.length - 1; } } const lastCellTabbableIndex = focusStates.length - 1; if (this.focusType === TableFocusType.cell && this.columnIndex === cellIndex) { - if (this.cellHasSingleInteractiveElement(cellInfo.cell)) { // Single interactive element (already focused, for cell focusType) - startIndex = firstCellTabbableIndex; // Start at single interactive element - } else { - startIndex = shiftKeyPressed ? lastCellTabbableIndex + 1 : firstCellTabbableIndex - 1; - } + startIndex = shiftKeyPressed ? lastCellTabbableIndex + 1 : firstCellTabbableIndex - 1; } cellIndex += 1; } @@ -794,15 +776,7 @@ implements Subscriber { focusableElement = rowElements.selectionCheckbox; break; case TableFocusType.cell: { - const cellInfo = rowElements.cells[this.columnIndex]!; - // For cells with a single focusable element, and no action menu, we focus the - // child element instead of the cell itself (as it's the only thing the user can - // interact with) - if (this.currentCellHasSingleInteractiveElement(rowElements)) { - focusableElement = cellInfo.cell.cellView.tabbableChildren[0]; - } else { - focusableElement = cellInfo.cell; - } + focusableElement = rowElements.cells[this.columnIndex]!.cell; break; } case TableFocusType.cellActionMenu: @@ -975,14 +949,6 @@ implements Subscriber { return this.trySetCellContentFocus(rowElements, 0) || this.trySetCellActionMenuFocus(rowElements); } - private currentCellHasSingleInteractiveElement(rowElements: TableRowFocusableElements): boolean { - return this.cellHasSingleInteractiveElement(rowElements.cells[this.columnIndex]!.cell); - } - - private cellHasSingleInteractiveElement(cell: TableCell): boolean { - return !cell.actionMenuButton && cell.cellView.tabbableChildren.length === 1; - } - private hasRowOrCellFocusType(): boolean { switch (this.focusType) { case TableFocusType.cell: