From 586ee6246ff71e199885b92a1b15252214e2d428 Mon Sep 17 00:00:00 2001
From: Ramin Farhadi <ra680091@CMN9J7HFG4MN.local>
Date: Tue, 27 Aug 2024 16:16:38 -0400
Subject: [PATCH] added the arrow-up arrow-down function.

---
 src/App.tsx                      |  8 ++++----
 src/components/MapMenu.tsx       |  2 +-
 src/components/SearchResults.tsx | 35 ++++++++++++++++++++++++++++----
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 216d19d..510012f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -83,7 +83,7 @@ function App() {
 
   const [visibility, setVisibility] = useState<Visibility>({
     locations: {
-      buildings: true,
+      buildings: false,
       housing: false,
       dining: false,
       retail: false,
@@ -802,7 +802,7 @@ function App() {
               <Campuses campus={campusData} onclick={campusHandler} />
           </div>
 
-        <div className='h3 mb-3 mt-0 my-md-0'><a href='#copyright' 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'
@@ -810,7 +810,7 @@ function App() {
             menuId='social-links'
             remoteMenuId={FOOTER_SOCIAL_ID}
           /> 
-        <div className='ucf-footer-nav'>
+        <div id="additional-links" className='ucf-footer-nav'>
           <NavigationMenu
             listItemClasses='nav-item my-2'
             anchorClasses='nav-link text-white py-0'
@@ -818,7 +818,7 @@ function App() {
             remoteMenuId={FOOTER_MENU_ID} />
         </div>
       
-        <div id="copyright" className='copyright'>
+        <div className='copyright'>
 		      © <a className='text-white' href='https://www.ucf.edu/'>University of Central Florida</a>
         </div>
       </footer>
diff --git a/src/components/MapMenu.tsx b/src/components/MapMenu.tsx
index 87d911d..4bb8afb 100644
--- a/src/components/MapMenu.tsx
+++ b/src/components/MapMenu.tsx
@@ -221,7 +221,7 @@ export default function MapMenu(props: MapMenuProps) {
         <div className='order-1 order-sm-3 col-8 col-sm-4 px-0'>
         <div className='d-flex justify-content-end me-3'>
         <div className="btn-group btn-outline-warning btn-group-sm my-1" role="group" aria-label="Basic checkbox toggle button group">     
-            <a className="btn dropdown-toggle rounded-end-0 d-flex align-items-center" id="accessibility" href="#accessibility" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <a className="btn dropdown-toggle rounded-end-0 rounded-start-0 d-flex align-items-center" id="accessibility" href="#accessibility" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               <img width={42} src={accessibilityIcon} alt="Accessibility Dropdown menu" />
             </a>
               <ul className="dropdown-menu">
diff --git a/src/components/SearchResults.tsx b/src/components/SearchResults.tsx
index 65aab46..8d14ee8 100644
--- 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,9 +29,35 @@ export default function SearchResults(props: SearchResultsProps) {
     });
   },[searchQuery])
 
+  // 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
+          }
+        }
+      }
+    }
+  };
+
 
   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'
@@ -73,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'>