From ff80bcf7f96ea9b2f3a8e58dbd2a0ac79514f761 Mon Sep 17 00:00:00 2001
From: Anamika T S <47971732+anamikaanu96@users.noreply.github.com>
Date: Mon, 21 Oct 2024 18:48:26 +0530
Subject: [PATCH] fix(leftNavTree): keyboard navigation (#1536)

* fix(LeftNavTree): keyboard navigation

* fix(LeftNavTree): keyboard navigation lock file
---
 .../src/components/LeftNav/LeftNavTree.js              | 10 +++++++++-
 yarn.lock                                              |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js
index ba43b6ab4..49bfc3e1c 100644
--- 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
index db651b8fa..275781135 100644
--- 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: