Merge pull request #815 from hackforla/FRONT-AccessibilityPanelTweak

Accessibility Panel Tweak
hackforla · Oct 5, 2020 · 6a5cfaa · 6a5cfaa
2 parents f7b274f + a92032f
commit 6a5cfaa
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/client/components/main/header/AccessibilityPane.jsx b/client/components/main/header/AccessibilityPane.jsx
@@ -14,6 +14,12 @@ const AccessibilityPane = () => {
     updateIsOpen(!isOpen);
   };
 
+  const handleKeyDown = e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      handleClick(e);
+    }
+  };
+
   const renderInstructions = () => ACCESSIBILITY_INSTRUCTIONS.map((element, index) => {
     if (index % 2 !== 0) {
       return (
@@ -40,7 +46,7 @@ const AccessibilityPane = () => {
     <div // eslint-disable-line
       className={dropdownClassName}
       tabIndex={0}
-      onKeyDown={handleClick}
+      onKeyDown={handleKeyDown}
       aria-expanded={isOpen}
       role="button"
     >

diff --git a/client/components/main/header/Header.jsx b/client/components/main/header/Header.jsx
@@ -23,6 +23,12 @@ const Header = () => {
     setActiveBurger(!activeBurger);
   };
 
+  const handleKeyDown = e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      handleClick(e);
+    }
+  };
+
   return (
     <nav
       className="navbar"
@@ -49,7 +55,7 @@ const Header = () => {
           aria-label="menu"
           aria-expanded={activeBurger}
           onClick={handleClick}
-          onKeyDown={handleClick}
+          onKeyDown={handleKeyDown}
         >
           <span aria-hidden="true" />
           <span aria-hidden="true" />

diff --git a/client/styles/main/_header.scss b/client/styles/main/_header.scss
@@ -106,7 +106,7 @@
       right: auto;
       left: -350px;
       top: 45px;
-      height: calc(100vh - #{$header-height + $hamburger-height});
+      height: calc(100vh - #{$header-height + $hamburger-height + 40px});
     }
   }