[TreeView] Improve Enter key behavior (#3221)

sillsdev · Jul 10, 2024 · b06fac6 · b06fac6
1 parent 8b152c2
commit b06fac6
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 30 deletions.
diff --git a/src/components/TreeView/TreeDepiction/DomainTileButton.tsx b/src/components/TreeView/TreeDepiction/DomainTileButton.tsx
@@ -105,6 +105,7 @@ export default function DomainTileButton(
         margin: "2.5%",
         padding: "5px",
       }}
+      tabIndex={-1}
       variant={"outlined"}
     >
       <DomainTile {...props} />

diff --git a/src/components/TreeView/TreeDepiction/tests/__snapshots__/DomainTileButton.test.tsx.snap b/src/components/TreeView/TreeDepiction/tests/__snapshots__/DomainTileButton.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`DomainTileButton renders tile and matches the latest snapshot 1`] = `
       "width": "95%",
     }
   }
-  tabIndex={0}
+  tabIndex={-1}
   type="button"
 >
   <div

diff --git a/src/components/TreeView/TreeDepiction/tests/__snapshots__/index.test.tsx.snap b/src/components/TreeView/TreeDepiction/tests/__snapshots__/index.test.tsx.snap
@@ -32,7 +32,7 @@ Array [
           "width": "95%",
         }
       }
-      tabIndex={0}
+      tabIndex={-1}
       type="button"
     >
       <div>
@@ -680,7 +680,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -770,7 +770,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -860,7 +860,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -936,7 +936,7 @@ Array [
           "width": "95%",
         }
       }
-      tabIndex={0}
+      tabIndex={-1}
       type="button"
     >
       <div>
@@ -1039,7 +1039,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div
@@ -1310,7 +1310,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -1386,7 +1386,7 @@ Array [
           "width": "95%",
         }
       }
-      tabIndex={0}
+      tabIndex={-1}
       type="button"
     >
       <div>
@@ -1684,7 +1684,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -1760,7 +1760,7 @@ Array [
           "width": "95%",
         }
       }
-      tabIndex={0}
+      tabIndex={-1}
       type="button"
     >
       <div>
@@ -1936,7 +1936,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div
@@ -2662,7 +2662,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -2752,7 +2752,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -2842,7 +2842,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -2932,7 +2932,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -3008,7 +3008,7 @@ Array [
           "width": "95%",
         }
       }
-      tabIndex={0}
+      tabIndex={-1}
       type="button"
     >
       <div>
@@ -3197,7 +3197,7 @@ Array [
           "width": "95%",
         }
       }
-      tabIndex={0}
+      tabIndex={-1}
       type="button"
     >
       <div>
@@ -3300,7 +3300,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div
@@ -3449,7 +3449,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div
@@ -3999,7 +3999,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -4089,7 +4089,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>
@@ -4179,7 +4179,7 @@ Array [
               "width": "95%",
             }
           }
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <div>

diff --git a/src/components/TreeView/TreeNavigator.tsx b/src/components/TreeView/TreeNavigator.tsx
@@ -9,11 +9,16 @@ export interface TreeNavigatorProps {
 }
 
 export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
-  const { getFirstChild, getNextSibling, getParent, getPrevSibling } =
-    useTreeNavigation(props);
+  const {
+    getCurrent,
+    getFirstChild,
+    getNextSibling,
+    getParent,
+    getPrevSibling,
+  } = useTreeNavigation(props);
 
   // Navigate tree via arrow keys.
-  const getArrowKeyDomain = (e: KeyboardEvent): SemanticDomain | undefined => {
+  const getKeyDomain = (e: KeyboardEvent): SemanticDomain | undefined => {
     const rtl = document.body.dir === "rtl";
     switch (e.key) {
       case Key.ArrowLeft:
@@ -24,25 +29,28 @@ export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
         return getParent();
       case Key.ArrowDown:
         return getFirstChild();
+      case Key.Enter:
+        return getCurrent();
     }
   };
 
-  const navigateDomainArrowKeys = async (e: KeyboardEvent): Promise<void> => {
-    const domain = getArrowKeyDomain(e);
+  const navigateDomainByKey = async (e: KeyboardEvent): Promise<void> => {
+    const domain = getKeyDomain(e);
     if (domain) {
       await props.animate(domain);
     }
   };
 
   useEffect(() => {
-    window.addEventListener("keydown", navigateDomainArrowKeys);
-    return () => window.removeEventListener("keydown", navigateDomainArrowKeys);
+    window.addEventListener("keydown", navigateDomainByKey);
+    return () => window.removeEventListener("keydown", navigateDomainByKey);
   });
 
   return <Fragment />;
 }
 
 interface TreeNavigation {
+  getCurrent: () => SemanticDomain | undefined;
   getFirstChild: () => SemanticDomain | undefined;
   getNextSibling: () => SemanticDomain | undefined;
   getParent: () => SemanticDomain | undefined;
@@ -53,6 +61,7 @@ interface TreeNavigation {
 export function useTreeNavigation(props: TreeNavigatorProps): TreeNavigation {
   const dom = props.currentDomain;
   return {
+    getCurrent: () => dom,
     getFirstChild: () => (dom.children.length ? dom.children[0] : undefined),
     getNextSibling: () => dom.next,
     getParent: () => dom.parent,