FIX: wrap form around input and replace querySelectors with useRef

ipni · Apr 5, 2024 · 554c7e3 · 554c7e3
1 parent 295c4da
commit 554c7e3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import Image from "next/image";
 
 import {
@@ -9,9 +9,13 @@ import {
 
 function Header(props) {
   const scrolled = props.scrolled;
-
+  
   const pagePos = props.pagePos;
 
+  const burgerWrapperRef = useRef()
+  const dropdownButtonRef = useRef()
+  const lastItemRef = useRef()
+
   // On Window Resize Store the Windows Width
   const [width, setWidth] = useState(0);
   const handleResize = () => setWidth(window.innerWidth);
@@ -46,23 +50,19 @@ function Header(props) {
     // var viewportWidth =
     //   window.innerWidth || document.documentElement.clientWidth;
 
-    const burgerWrapper = document.querySelector(".mainMenu.device");
-
 
-    // trap focus in the burger menu for accessibility purposes
-    const firstFocusableEl = burgerWrapper.querySelector('button:not([disabled])')
-    const lastFocusableEl = burgerWrapper.querySelector('ul li:last-child a')
+    const burgerWrapper = burgerWrapperRef.current
 
     burgerWrapper.addEventListener("keydown", e => {
       if (e.key === 'Tab') {
         if (e.shiftKey)  {
-          if (document.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
+          if (document.activeElement === dropdownButtonRef.current) {
+            lastItemRef.current.focus();
             e.preventDefault();
           }
         } else {
-          if (document.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
+          if (document.activeElement === lastItemRef.current) {
+            dropdownButtonRef.current.focus();
             e.preventDefault();
           }
         }
@@ -169,8 +169,9 @@ function Header(props) {
           </div>
         </div>
       </header>
-      <nav className="mainMenu device">
+      <nav ref={burgerWrapperRef} className="mainMenu device">
         <button
+          ref={dropdownButtonRef}
           aria-label="Dropdown menu"
           tabIndex="0"
           className="noStyle navbar-toggle menuActive"
@@ -198,6 +199,7 @@ function Header(props) {
           </li>
           <li>
             <a
+              ref={lastItemRef}
               href="https://status.cid.contact/"
               target="_blank"
               rel="noreferrer"

diff --git a/pages/index.js b/pages/index.js
@@ -839,7 +839,7 @@ export default function Home(props) {
               }
             >
               <div className="container">
-                <div className="formRow">
+                <form className="formRow">
                   <div className="selectInputWrapper">
                     <CustomSelect
                       selectedOption={selectedOption}
@@ -891,7 +891,7 @@ export default function Home(props) {
                   >
                     <span>Search</span>
                   </button>
-                </div>
+                </form>
                 {searchError && <p className="errorNotice">{searchError}</p>}
                 {!searchError && displayData && (
                   <div className="accordionWrapper">

diff --git a/sass/_about.scss b/sass/_about.scss
@@ -22,6 +22,9 @@
     align-items: center;
 
     .imgCol {
+      display: flex;
+      justify-content: center;
+
       img {
         display: block;
         height: auto;