diff --git a/src/components/TreeView/TreeDepiction/DomainTileButton.tsx b/src/components/TreeView/TreeDepiction/DomainTileButton.tsx index 7ba4f4ed2a..79b4c9a677 100644 --- 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"} > diff --git a/src/components/TreeView/TreeDepiction/tests/__snapshots__/DomainTileButton.test.tsx.snap b/src/components/TreeView/TreeDepiction/tests/__snapshots__/DomainTileButton.test.tsx.snap index d20d19ef87..54348ecbd6 100644 --- 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" >
@@ -680,7 +680,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -770,7 +770,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -860,7 +860,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -936,7 +936,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -1039,7 +1039,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -1386,7 +1386,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -1684,7 +1684,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -1760,7 +1760,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -1936,7 +1936,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -2752,7 +2752,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -2842,7 +2842,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -2932,7 +2932,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -3008,7 +3008,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -3197,7 +3197,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -3300,7 +3300,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -4089,7 +4089,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
@@ -4179,7 +4179,7 @@ Array [ "width": "95%", } } - tabIndex={0} + tabIndex={-1} type="button" >
diff --git a/src/components/TreeView/TreeNavigator.tsx b/src/components/TreeView/TreeNavigator.tsx index 0c17b769d1..232966d617 100644 --- 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 => { - const domain = getArrowKeyDomain(e); + const navigateDomainByKey = async (e: KeyboardEvent): Promise => { + 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 ; } 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,