fix(appbar-accessibility): Fix app bar accessibility

Canadian-Geospatial-Platform · Feb 28, 2024 · 83fb4c6 · 83fb4c6
1 parent f47c139
commit 83fb4c6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator-style.ts b/packages/geoview-core/src/core/components/geolocator/geolocator-style.ts
@@ -1,4 +1,5 @@
-import { Input, styled } from '@mui/material';
+import { Input, styled, InputProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
 
 export const sxClasses = {
   root: {
@@ -90,4 +91,4 @@ export const StyledInputField = styled(Input)(({ theme }) => ({
     transition: theme.transitions.create('width'),
     width: '100%',
   },
-})) as unknown as typeof Input;
+})) as React.ComponentType<InputProps & { theme?: Theme }>;
diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator.tsx b/packages/geoview-core/src/core/components/geolocator/geolocator.tsx
@@ -1,10 +1,10 @@
-import { ChangeEvent, useCallback, useRef, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import debounce from 'lodash/debounce';
 import { CloseIcon, SearchIcon, AppBar, Box, Divider, IconButton, ProgressBar, Toolbar } from '@/ui';
 import { StyledInputField, sxClasses } from './geolocator-style';
 import { OL_ZOOM_DURATION } from '@/core/utils/constant';
-import { useUIAppbarGeolocatorActive } from '@/core/stores/store-interface-and-intial-values/ui-state';
+import { useUIAppbarGeolocatorActive, useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useAppGeolocatorServiceURL, useAppDisplayLanguage } from '@/core/stores/store-interface-and-intial-values/app-state';
 import { GeolocatorResult } from './geolocator-result';
 import { logger } from '@/core/utils/logger';
@@ -38,8 +38,10 @@ export function Geolocator() {
 
   // set the active (visible) or not active (hidden) from geolocator button click
   const active = useUIAppbarGeolocatorActive();
+  const { setGeolocatorActive } = useUIStoreActions();
 
   const urlRef = useRef<string>(`${geolocatorServiceURL}&lang=${displayLanguage}`);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   /**
    * Send fetch call to the service for given search term.
@@ -68,6 +70,7 @@ export function Geolocator() {
    */
   const resetSearch = useCallback(() => {
     setIsSearchInputVisible(false);
+    setGeolocatorActive(false);
     setSearchValue('');
     setData(undefined);
   }, []);
@@ -105,6 +108,29 @@ export function Geolocator() {
     }
   };
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setGeolocatorActive(false);
+    }
+  };
+
+  useEffect(() => {
+    if (searchInputRef.current && active) {
+      searchInputRef.current?.click();
+    }
+    setSearchValue(active ? searchValue : '');
+
+    if (active) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+
   return (
     <Box sx={sxClasses.root} visibility={active ? 'visible' : 'hidden'} id="geolocator-search">
       <Box sx={sxClasses.geolocator}>
@@ -123,21 +149,18 @@ export function Geolocator() {
                 getGeolocations(searchValue);
               }}
             >
-              {isSearchInputVisible && (
-                <StyledInputField placeholder={t('geolocator.search')!} autoFocus onChange={onChange} value={searchValue} />
-              )}
+              <StyledInputField ref={searchInputRef} placeholder={t('geolocator.search')!} onChange={onChange} value={searchValue} />
 
               <Box sx={{ display: 'flex', marginLeft: 'auto', alignItems: 'center' }}>
                 <IconButton
+                  tabIndex={0}
                   size="small"
                   edge="end"
                   color="inherit"
                   sx={{ mr: 4 }}
                   disabled={isSearchInputVisible && !searchValue.length}
                   onClick={() => {
-                    if (!isSearchInputVisible) {
-                      setIsSearchInputVisible(true);
-                    } else if (searchValue.length) {
+                    if (searchValue.length) {
                       doRequest.cancel();
                       getGeolocations(searchValue);
                     }
@@ -148,7 +171,7 @@ export function Geolocator() {
                 {isSearchInputVisible && (
                   <>
                     <Divider orientation="vertical" variant="middle" flexItem />
-                    <IconButton size="small" edge="end" color="inherit" sx={{ mr: 2, ml: 4 }} onClick={resetSearch}>
+                    <IconButton tabIndex={0} size="small" edge="end" color="inherit" sx={{ mr: 2, ml: 4 }} onClick={resetSearch}>
                       <CloseIcon fontSize="small" />
                     </IconButton>
                   </>