@@ -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,