From 20e19e360d565c00fb3cc93f56e68637bcc9059f Mon Sep 17 00:00:00 2001
From: Adam Bottega <adambottega@gmail.com>
Date: Thu, 28 Dec 2023 13:47:08 +1100
Subject: [PATCH] Passed focus to SideNavExpanded when opened

---
 lib/components/SideNav/index.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/lib/components/SideNav/index.js b/lib/components/SideNav/index.js
index 99bd7645..6d71f104 100644
--- a/lib/components/SideNav/index.js
+++ b/lib/components/SideNav/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import styled from "styled-components";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
@@ -500,6 +500,16 @@ const SideNav = ({ items, sideNavHeight }) => {
     return () => window.removeEventListener("resize", debounceResize);
   });
 
+  // Initialize a ref for SideNavExpanded
+  const expandedRef = useRef(null);
+
+  // Use a useEffect to focus on the expanded item
+  useEffect(() => {
+    if (expandedItem !== null && expandedRef.current) {
+      expandedRef.current.focus();
+    }
+  }, [expandedItem]);
+
   // Toggle nav item names on click of panel control button
   // const [showItemNames, setShowItemNames] = useState(false);
   // const toggleItemNames = () => {
@@ -675,6 +685,7 @@ const SideNav = ({ items, sideNavHeight }) => {
             <PanelControl
               onClick={() => handleItemClick(allItems[expandedItem])}
               aria-label="toggle panel"
+              ref={expandedRef}
             >
               {isGreaterThan900 === true ? (
                 <Icon icon={["fas", "chevron-left"]} />