tabIndex and arrowControls

Author: RafaelGB

src/components/Table.tsx

@@ -45,6 +45,7 @@ import {
 import HeaderContextMenuWrapper from "components/contextMenu/HeaderContextMenuWrapper";
 import TableActions from "components/tableActions/TableActions";
 import PaginationTable from "components/navbar/PaginationTable";
+import onKeyDownArrowKeys from "./behavior/ArrowKeysNavigation";
 
 const defaultColumn: Partial<ColumnDef<RowDataType>> = {
   minSize: DatabaseLimits.MIN_COLUMN_WIDTH,
@@ -221,6 +222,7 @@ export function Table(tableData: TableDataType) {
           onMouseOver={obsidianMdLinksOnMouseOverMenuCallback(view)}
           /** Obsidian to open an internal link in a new pane */
           onClick={obsidianMdLinksOnClickCallback(stateManager, view, filePath)}
+          onKeyDown={onKeyDownArrowKeys}
           style={{
             width: table.getCenterTotalSize(),
           }}

src/components/behavior/ArrowKeysNavigation.ts

@@ -0,0 +1,60 @@
+import { c } from "helpers/StylesHelper";
+import { KeyboardEventHandler } from "react";
+
+type TabIndexElement = HTMLDivElement | HTMLSpanElement;
+
+const onKeyDownArrowKeys: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    const currentInput = activeDocument.activeElement;
+    if (currentInput === null || !currentInput.classList.contains(c('tabIndex'))) return;
+
+    const currentTd = currentInput.parentElement;
+    const currentTr = currentTd.parentElement;
+    const index = Array.from(currentTr.children).indexOf(currentTd);
+
+    switch (event.key) {
+        case "ArrowLeft":
+            // Left pressed
+            const TdLeft = currentTd.previousElementSibling;
+            if (!TdLeft) break;
+            const TdLeftTabIndex = TdLeft.getElementsByClassName(c('tabIndex'))[0] as TabIndexElement;
+            if (!TdLeftTabIndex) break;
+            TdLeftTabIndex.focus();
+            break;
+        case "ArrowRight":
+            // Right pressed
+            const TdRight = currentTd.nextElementSibling;
+            if (!TdRight) break;
+            const TdRightTabIndex = TdRight.getElementsByClassName(c('tabIndex'))[0] as TabIndexElement;
+            if (!TdRightTabIndex) break;
+            TdRightTabIndex.focus();
+            break;
+        case "ArrowUp":
+            // Up pressed
+            const TrUp = currentTr
+                .previousElementSibling
+                ?.children;
+            if (!TrUp) break;
+
+            const TdUp = (Array.from(TrUp)[index]
+                .getElementsByClassName(c('tabIndex'))[0] as TabIndexElement);
+
+            if (!TdUp) break;
+            TdUp.focus();
+            break;
+        case "ArrowDown":
+            // Down pressed
+            const TrDown = currentTr
+                .nextElementSibling
+                ?.children;
+            if (TrDown === undefined) break;
+
+            const TdDown = (Array.from(TrDown)[index]
+                .getElementsByClassName(c('tabIndex'))[0] as TabIndexElement);
+
+            if (TdDown === undefined) break;
+            TdDown.focus();
+            break;
+    }
+}
+
+export default onKeyDownArrowKeys;

src/components/cellTypes/CalendarCell.tsx

@@ -100,7 +100,7 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
     />
   ) : (
     <span
-      className={`${c("calendar")}`}
+      className={`${c("calendar tabIndex")}`}
       onClick={handleSpanOnClick}
       style={{ width: column.getSize() }}
       onKeyDown={(e) => {

src/components/cellTypes/CalendarTimeCell.tsx

@@ -101,7 +101,7 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
     />
   ) : (
     <span
-      className={`${c("calendar")}`}
+      className={`${c("calendar tabIndex")}`}
       style={{ width: column.getSize() }}
       onClick={handleSpanOnClick}
       onKeyDown={(e) => {

src/components/cellTypes/CheckboxCell.tsx

@@ -44,7 +44,10 @@ function CheckboxCell(props: CellComponentProps) {
   };
 
   return (
-    <div key={`checkbox-div-${row.index}`} className={`${c("checkbox")}`}>
+    <div
+      key={`checkbox-div-${row.index}`}
+      className={`${c("checkbox tabIndex")}`}
+    >
       <input
         type="checkbox"
         checked={checkboxCell}

src/components/cellTypes/NumberCell.tsx

@@ -93,7 +93,11 @@ const NumberCell = (props: CellComponentProps) => {
   ) : (
     <span
       className={c(
-        getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
+        getAlignmentClassname(
+          tableColumn.config,
+          configInfo.getLocalSettings(),
+          ["tabIndex"]
+        )
       )}
       onDoubleClick={handleEditableOnclick}
       style={{ width: column.getSize() }}

src/components/cellTypes/RelationCell.tsx

@@ -111,7 +111,11 @@ const RelationCell = (mdProps: CellComponentProps) => {
       onClick={handleOnClick}
       style={{ width: column.getSize() }}
       className={c(
-        getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
+        getAlignmentClassname(
+          tableColumn.config,
+          configInfo.getLocalSettings(),
+          ["tabIndex"]
+        )
       )}
       onKeyDown={(e) => {
         if (e.key === "Enter") {

src/components/cellTypes/SelectCell.tsx

@@ -138,7 +138,8 @@ const SelectCell = (popperProps: CellComponentProps) => {
           className={c(
             getAlignmentClassname(
               tableColumn.config,
-              configInfo.getLocalSettings()
+              configInfo.getLocalSettings(),
+              ["tabIndex"]
             )
           )}
           onClick={() => setShowSelect(true)}

src/components/cellTypes/TagsCell.tsx

@@ -142,8 +142,9 @@ const TagsCell = (tagsProps: CellComponentProps) => {
           className={c(
             getAlignmentClassname(
               tableColumn.config,
-              configInfo.getLocalSettings()
-            ).concat(" tags-container")
+              configInfo.getLocalSettings(),
+              ["tabIndex", "tags-container"]
+            )
           )}
           onClick={() => setShowSelectTags(true)}
           style={{ width: column.getSize() }}

src/components/cellTypes/TextCell.tsx

@@ -97,7 +97,11 @@ const TextCell = (props: CellComponentProps) => {
       }}
       style={{ width: column.getSize() }}
       className={c(
-        getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
+        getAlignmentClassname(
+          tableColumn.config,
+          configInfo.getLocalSettings(),
+          ["tabIndex"]
+        )
       )}
       tabIndex={0}
     />