accessibility touch-up

UCF · Aug 27, 2024 · 0a57d9f · 0a57d9f
2 parents 5683539 + 586ee62
commit 0a57d9f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -801,7 +801,7 @@ function App() {
               <Campuses campus={campusData} onclick={campusHandler} />
           </div>
 
-        <div className='h3 mb-3 mt-0 my-md-0'><a href="#additional-links" aria-label="additional links" className='text-white text-decoration-none'>&#65088;</a></div>
+        <div className='h3 mb-3 mt-0 my-md-0'><a href='#additional-links' aria-label="slide to addtional links menu" className='text-white text-decoration-none'>&#65088;</a></div>
         <NavigationMenu 
             listClasses='ucf-footer-social mb-2 list-unstyled list-group list-group-horizontal d-flex justify-content-center'
             listItemClasses='ucf-footer-social-item ms-1'

diff --git a/src/components/SearchResults.tsx b/src/components/SearchResults.tsx
@@ -4,7 +4,7 @@ import closeIcon from '../assets/xmark-solid.png';
 import searchIcon from '../assets/search-white.png';
 
 import './SearchResults.scss';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 import ReactGA from "react-ga4"
 
@@ -19,7 +19,8 @@ interface SearchResultsProps {
 export default function SearchResults(props: SearchResultsProps) {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [searchBoxVisibility,setSearchBoxVisibility] = useState<boolean>(false);
-
+  const resultsRef = useRef<HTMLUListElement | null>(null);
+
   useEffect(() => {
     ReactGA.event({
       category: "map_search",
@@ -28,18 +29,35 @@ export default function SearchResults(props: SearchResultsProps) {
     });
   },[searchQuery])
 
-  // useEffect(() => {
-
-  //   ReactGA.gtag('event', 'search', {
-  //     'event_category': 'map_search',
-  //     'event_label': `${debouncedSearchQuery}`,
-  //     'link_text': `${debouncedSearchQuery}`,
-  // });
+  // function for handeling arrow down - arrow up 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (resultsRef.current) {
+        const options = Array.from(resultsRef.current.querySelectorAll('a'));
+        const currentIndex = options.findIndex(option => option === document.activeElement);
+        let nextIndex;
+
+        if (e.key === 'ArrowDown') {
+          nextIndex = currentIndex + 1;
+          if (nextIndex < options.length) {
+            options[nextIndex].focus();
+          }
+        } else if (e.key === 'ArrowUp') {
+          nextIndex = currentIndex - 1;
+          if (nextIndex >= 0) {
+            options[nextIndex].focus();
+          } else {
+            (e.currentTarget.querySelector('input') as HTMLElement).focus(); // Focus the search input
+          }
+        }
+      }
+    }
+  };
 
-  // },[debouncedSearchQuery])
 
   return (
-    <div className='search-control-wrapper rounded mt-2'>
+    <div className='search-control-wrapper rounded mt-2' onKeyDown={handleKeyDown}>
       <div className='input-group' role='search'>
       <input
         className='form-control'
@@ -82,7 +100,7 @@ export default function SearchResults(props: SearchResultsProps) {
       {searchQuery && props.searchResults && searchBoxVisibility && (
         <div className='search-results-container'>
           <h2 className='sr-only'>Search Results</h2>
-          <ul role="listbox" tabIndex={-1} id='search-results' className='search-results'>
+          <ul ref={resultsRef} role="listbox" tabIndex={-1} id='search-results' className='search-results'>
             {props.searchResults.map((result: Feature) => {
               return (
                 <li key={`${result!.properties!.Name}_${result!.properties!.BldgNum}`} className='list-item search-result'>