From 14efedf3339bdbfff06ede15be5091164d9b927c Mon Sep 17 00:00:00 2001
From: Jorge Gonzalez <jorgegonzalez@users.noreply.github.com>
Date: Tue, 30 Nov 2021 17:16:12 -0500
Subject: [PATCH 1/8] fix: sidenav focus issue with keyboard navigation

---
 .../src/components/Header/Header.jsx          | 35 ++++++++++---------
 .../src/components/NavItem/NavItem.jsx        |  1 +
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index 1b1837cac..78010094d 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -41,7 +41,11 @@ function HeaderComp() {
             Menu
           </button>
         </div>
-        <nav aria-label="Primary navigation" className="usa-nav">
+        <nav
+          role="navigation"
+          aria-label="Primary navigation"
+          className="usa-nav"
+        >
           <div className="usa-nav__inner">
             <button type="button" className="usa-nav__close">
               <img src={closeIcon} alt="close" />
@@ -82,7 +86,7 @@ function HeaderComp() {
                   } usa-nav__secondary-item`}
                 >
                   {user && user.email && (
-                    <a href="/">
+                    <a href="/" tabIndex="0">
                       <FontAwesomeIcon
                         className="margin-right-1"
                         icon={faUserCircle}
@@ -91,20 +95,19 @@ function HeaderComp() {
                     </a>
                   )}
                 </li>
-                {authenticated && (
-                  <li className="usa-nav__secondary-item">
-                    <a
-                      className="sign-out-link"
-                      href={`${process.env.REACT_APP_BACKEND_URL}/logout/oidc`}
-                    >
-                      <FontAwesomeIcon
-                        className="margin-right-1"
-                        icon={faSignOutAlt}
-                      />
-                      Sign Out
-                    </a>
-                  </li>
-                )}
+                <li className="usa-nav__secondary-item">
+                  <a
+                    className="sign-out-link"
+                    href={`${process.env.REACT_APP_BACKEND_URL}/logout/oidc`}
+                    tabIndex="0"
+                  >
+                    <FontAwesomeIcon
+                      className="margin-right-1"
+                      icon={faSignOutAlt}
+                    />
+                    Sign Out
+                  </a>
+                </li>
               </ul>
             </div>
           </div>
diff --git a/tdrs-frontend/src/components/NavItem/NavItem.jsx b/tdrs-frontend/src/components/NavItem/NavItem.jsx
index 9725d550f..2eab1270e 100644
--- a/tdrs-frontend/src/components/NavItem/NavItem.jsx
+++ b/tdrs-frontend/src/components/NavItem/NavItem.jsx
@@ -13,6 +13,7 @@ function NavItem({ pathname, tabTitle, href }) {
   return (
     <li className="usa-nav__primary-item">
       <a
+        tabIndex="0"
         href={href}
         key={tabTitle}
         // dash-case the tabTitle string (e.g. Data Files => data-files)

From 9fab24ab4b3b21b3bad7ec6311482312a1dd55e5 Mon Sep 17 00:00:00 2001
From: Aaron Beavers <foamy125@gmail.com>
Date: Thu, 2 Dec 2021 16:18:57 -0500
Subject: [PATCH 2/8] Work on tablocking header menu

---
 .../src/components/Header/Header.jsx          | 68 ++++++++++++++++++-
 .../src/components/NavItem/NavItem.jsx        |  1 -
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index 78010094d..f77ddf49d 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 import closeIcon from 'uswds/dist/img/close.svg'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -18,9 +18,71 @@ import NavItem from '../NavItem/NavItem'
  */
 function HeaderComp() {
   const pathname = useSelector((state) => state.router.location.pathname)
+  const [isMenuVisible, setIsMenuVisible] = useState(false)
   const user = useSelector((state) => state.auth.user)
   const authenticated = useSelector((state) => state.auth.authenticated)
 
+  const menuRef = useRef()
+
+  const handleTabKey = (e) => {
+    if (menuRef.current.classList.contains('is-visible')) {
+      e.preventDefault()
+      const focusableMenuElements = [
+        ...menuRef.current.querySelectorAll('button'),
+        ...menuRef.current.querySelectorAll('a'),
+      ]
+
+      console.log(focusableMenuElements)
+
+      const firstElement = focusableMenuElements[0]
+      const lastIndex = focusableMenuElements.length - 1
+      const lastElement = focusableMenuElements[lastIndex]
+
+      let tabIndex
+      console.log(document.activeElement)
+
+      if (focusableMenuElements.includes(document.activeElement)) {
+        tabIndex =
+          focusableMenuElements.findIndex(
+            (e) => document.activeElement === e
+          ) || 0
+        console.log('starting with', tabIndex, focusableMenuElements[tabIndex])
+        if (!e.shiftKey && tabIndex >= lastIndex) {
+          console.log('return to first element')
+          tabIndex = 0
+        } else if (e.shiftKey && tabIndex === 0) {
+          console.log('return to last element')
+          tabIndex = lastIndex
+        } else if (e.shiftKey) {
+          console.log('move back one')
+          tabIndex -= 1
+        } else {
+          console.log('move forward one')
+          tabIndex += 1
+        }
+      } else {
+        console.log('refocus to close')
+        tabIndex = 0
+      }
+      console.log('ending on index', tabIndex, focusableMenuElements[tabIndex])
+      focusableMenuElements[tabIndex].focus()
+    }
+
+    return null
+  }
+
+  const keyListenersMap = new Map([[9, handleTabKey]])
+
+  useEffect(() => {
+    function keyListener(e) {
+      const listener = keyListenersMap.get(e.keyCode)
+      return listener && listener(e)
+    }
+    document.addEventListener('keydown', keyListener)
+
+    return () => document.removeEventListener('keydown', keyListener)
+  }, [])
+
   const isOFASystemAdmin = () => {
     return user?.roles?.some((role) => role.name === 'OFA System Admin')
   }
@@ -42,6 +104,7 @@ function HeaderComp() {
           </button>
         </div>
         <nav
+          ref={menuRef}
           role="navigation"
           aria-label="Primary navigation"
           className="usa-nav"
@@ -86,7 +149,7 @@ function HeaderComp() {
                   } usa-nav__secondary-item`}
                 >
                   {user && user.email && (
-                    <a href="/" tabIndex="0">
+                    <a href="/">
                       <FontAwesomeIcon
                         className="margin-right-1"
                         icon={faUserCircle}
@@ -99,7 +162,6 @@ function HeaderComp() {
                   <a
                     className="sign-out-link"
                     href={`${process.env.REACT_APP_BACKEND_URL}/logout/oidc`}
-                    tabIndex="0"
                   >
                     <FontAwesomeIcon
                       className="margin-right-1"
diff --git a/tdrs-frontend/src/components/NavItem/NavItem.jsx b/tdrs-frontend/src/components/NavItem/NavItem.jsx
index 2eab1270e..9725d550f 100644
--- a/tdrs-frontend/src/components/NavItem/NavItem.jsx
+++ b/tdrs-frontend/src/components/NavItem/NavItem.jsx
@@ -13,7 +13,6 @@ function NavItem({ pathname, tabTitle, href }) {
   return (
     <li className="usa-nav__primary-item">
       <a
-        tabIndex="0"
         href={href}
         key={tabTitle}
         // dash-case the tabTitle string (e.g. Data Files => data-files)

From fc4144c672ef0b964983fad13d1b5fb247fccec1 Mon Sep 17 00:00:00 2001
From: Aaron Beavers <foamy125@gmail.com>
Date: Fri, 10 Dec 2021 10:29:27 -0500
Subject: [PATCH 3/8] fix tab key navigation order

---
 .../src/components/Header/Header.jsx          | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index 40d73f50c..59859fd8f 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -24,51 +24,39 @@ function HeaderComp() {
 
   const menuRef = useRef()
 
+  let tabIndex = 0
   const handleTabKey = (e) => {
+    e.preventDefault()
+    console.log(document.activeElement)
     if (menuRef.current.classList.contains('is-visible')) {
-      e.preventDefault()
       const focusableMenuElements = [
         ...menuRef.current.querySelectorAll('button'),
         ...menuRef.current.querySelectorAll('a'),
       ]
 
-      console.log(focusableMenuElements)
-
       const firstElement = focusableMenuElements[0]
       const lastIndex = focusableMenuElements.length - 1
       const lastElement = focusableMenuElements[lastIndex]
 
-      let tabIndex
-      console.log(document.activeElement)
-
       if (focusableMenuElements.includes(document.activeElement)) {
-        tabIndex =
-          focusableMenuElements.findIndex(
-            (e) => document.activeElement === e
-          ) || 0
-        console.log('starting with', tabIndex, focusableMenuElements[tabIndex])
         if (!e.shiftKey && tabIndex >= lastIndex) {
-          console.log('return to first element')
           tabIndex = 0
         } else if (e.shiftKey && tabIndex === 0) {
-          console.log('return to last element')
           tabIndex = lastIndex
         } else if (e.shiftKey) {
-          console.log('move back one')
           tabIndex -= 1
         } else {
-          console.log('move forward one')
           tabIndex += 1
         }
       } else {
-        console.log('refocus to close')
         tabIndex = 0
       }
-      console.log('ending on index', tabIndex, focusableMenuElements[tabIndex])
+
       focusableMenuElements[tabIndex].focus()
+      console.log('ending on index', tabIndex, focusableMenuElements[tabIndex])
     }
 
-    return null
+    return false
   }
 
   const keyListenersMap = new Map([[9, handleTabKey]])

From 3c9c4e546f9ff24be55e06560ab8cfafaaf5f995 Mon Sep 17 00:00:00 2001
From: Aaron Beavers <foamy125@gmail.com>
Date: Mon, 13 Dec 2021 13:19:18 -0500
Subject: [PATCH 4/8] removed some logs, added an ignore comment for jest

---
 tdrs-frontend/src/components/Header/Header.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index 59859fd8f..07f933724 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -26,8 +26,9 @@ function HeaderComp() {
 
   let tabIndex = 0
   const handleTabKey = (e) => {
+
     e.preventDefault()
-    console.log(document.activeElement)
+    /* istanbul ignore if */
     if (menuRef.current.classList.contains('is-visible')) {
       const focusableMenuElements = [
         ...menuRef.current.querySelectorAll('button'),
@@ -53,7 +54,6 @@ function HeaderComp() {
       }
 
       focusableMenuElements[tabIndex].focus()
-      console.log('ending on index', tabIndex, focusableMenuElements[tabIndex])
     }
 
     return false

From b81e107ac41180fab7c719924b56ef9a99aaa35c Mon Sep 17 00:00:00 2001
From: Aaron Beavers <foamy125@gmail.com>
Date: Wed, 15 Dec 2021 14:40:26 -0500
Subject: [PATCH 5/8] add more ignore comments

---
 tdrs-frontend/src/components/Header/Header.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index 07f933724..c50a2dca5 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -25,6 +25,7 @@ function HeaderComp() {
   const menuRef = useRef()
 
   let tabIndex = 0
+  /* istanbul ignore next  */
   const handleTabKey = (e) => {
 
     e.preventDefault()
@@ -61,6 +62,7 @@ function HeaderComp() {
 
   const keyListenersMap = new Map([[9, handleTabKey]])
 
+  /* istanbul ignore next  */
   useEffect(() => {
     function keyListener(e) {
       const listener = keyListenersMap.get(e.keyCode)

From 099e3df2a96c2bf14f8e863ae77a2060c2d37cae Mon Sep 17 00:00:00 2001
From: Aaron Beavers <foamy125@gmail.com>
Date: Wed, 22 Dec 2021 11:47:54 -0500
Subject: [PATCH 6/8] remove white space

---
 tdrs-frontend/src/components/Header/Header.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index c50a2dca5..473643373 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -27,7 +27,6 @@ function HeaderComp() {
   let tabIndex = 0
   /* istanbul ignore next  */
   const handleTabKey = (e) => {
-
     e.preventDefault()
     /* istanbul ignore if */
     if (menuRef.current.classList.contains('is-visible')) {

From 82d67bbfcafcf99b0b7f5fd0014cf39758b423ec Mon Sep 17 00:00:00 2001
From: Aaron Beavers <foamy125@gmail.com>
Date: Wed, 12 Jan 2022 12:17:23 -0500
Subject: [PATCH 7/8] Move preventDefault inside condition

---
 tdrs-frontend/src/components/Header/Header.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index 473643373..b9d6655e6 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -27,9 +27,10 @@ function HeaderComp() {
   let tabIndex = 0
   /* istanbul ignore next  */
   const handleTabKey = (e) => {
-    e.preventDefault()
     /* istanbul ignore if */
     if (menuRef.current.classList.contains('is-visible')) {
+      e.preventDefault()
+      console.log('is visible')
       const focusableMenuElements = [
         ...menuRef.current.querySelectorAll('button'),
         ...menuRef.current.querySelectorAll('a'),

From 3ab63f5642b1156d699682fb86236fa512c45538 Mon Sep 17 00:00:00 2001
From: Aaron Beavers <foamy125@gmail.com>
Date: Wed, 19 Jan 2022 14:46:45 -0500
Subject: [PATCH 8/8] add authenication garud for sign out removed on accident

---
 .../src/components/Header/Header.jsx          | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/tdrs-frontend/src/components/Header/Header.jsx b/tdrs-frontend/src/components/Header/Header.jsx
index b9d6655e6..46730c726 100644
--- a/tdrs-frontend/src/components/Header/Header.jsx
+++ b/tdrs-frontend/src/components/Header/Header.jsx
@@ -150,18 +150,20 @@ function HeaderComp() {
                     </a>
                   )}
                 </li>
-                <li className="usa-nav__secondary-item">
-                  <a
-                    className="sign-out-link"
-                    href={`${process.env.REACT_APP_BACKEND_URL}/logout/oidc`}
-                  >
-                    <FontAwesomeIcon
-                      className="margin-right-1"
-                      icon={faSignOutAlt}
-                    />
-                    Sign Out
-                  </a>
-                </li>
+                {authenticated && (
+                  <li className="usa-nav__secondary-item">
+                    <a
+                      className="sign-out-link"
+                      href={`${process.env.REACT_APP_BACKEND_URL}/logout/oidc`}
+                    >
+                      <FontAwesomeIcon
+                        className="margin-right-1"
+                        icon={faSignOutAlt}
+                      />
+                      Sign Out
+                    </a>
+                  </li>
+                )}
               </ul>
             </div>
           </div>