fix(leftNavTree): keyboard navigation (#1536)

* fix(LeftNavTree): keyboard navigation * fix(LeftNavTree): keyboard navigation lock file
carbon-design-system · Oct 21, 2024 · ff80bcf · ff80bcf
1 parent 307cccb
commit ff80bcf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js
@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useLocation } from '@reach/router';
 import { Theme, TreeNode, TreeView } from '@carbon/react';
-import { Link } from 'gatsby';
+import { Link, navigate } from 'gatsby';
 
 import cx from 'classnames';
 import slugify from 'slugify';
@@ -110,6 +110,13 @@ const LeftNavTree = ({ items, theme, pathPrefix }) => {
       evalNode.pages?.some((page) => page.id === treeActiveItem?.id)
     );
 
+  const handleKeyDownEvent = (event, path) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      navigate(path);
+    }
+  };
+
   function renderTree({ nodes }) {
     if (!nodes) {
       return;
@@ -136,6 +143,7 @@ const LeftNavTree = ({ items, theme, pathPrefix }) => {
           label={label}
           value={node.title}
           isExpanded={isTreeNodeExpanded(node)}
+          onKeyDown={(event) => handleKeyDownEvent(event, node.path)}
           className={cx({
             'cds--tree-node--active': node.id === treeActiveItem?.id,
             'cds--tree-node--selected': node.id === treeActiveItem?.id,

diff --git a/yarn.lock b/yarn.lock
@@ -10530,7 +10530,7 @@ __metadata:
   dependencies:
     "@carbon/icons-react": "npm:^11.43.0"
     gatsby: "npm:^5.13.6"
-    gatsby-theme-carbon: "npm:^4.1.5"
+    gatsby-theme-carbon: "npm:^4.1.6"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
   languageName: unknown
@@ -11831,7 +11831,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"gatsby-theme-carbon@npm:^4.1.5, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
+"gatsby-theme-carbon@npm:^4.1.6, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon":
   version: 0.0.0-use.local
   resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon"
   dependencies: