Merge pull request #1004 from Amberroseweeks/amberroseweeks-625-impro…

…ve-filter-button

Amberroseweeks 625 improve filter button

src/components/FilterView.tsx

@@ -1,9 +1,11 @@
+'use client';
+
 import { FC } from 'react';
-import DimensionFilter from './Filters/DimensionFilter';
 import { PiX } from 'react-icons/pi';
-import { BarClickOptions } from '@/app/find-properties/[[...opa_id]]/page';
 import { ThemeButton } from './ThemeButton';
+import { BarClickOptions } from '@/app/find-properties/[[...opa_id]]/page';
 import { rcos, neighborhoods, zoning } from './Filters/filterOptions';
+import DimensionFilter from './Filters/DimensionFilter';
 
 const filters = [
   {
@@ -59,12 +61,16 @@ interface FilterViewProps {
 const FilterView: FC<FilterViewProps> = ({ updateCurrentView }) => {
   return (
     <div className="relative p-6">
+      {/* Add ID to the close button */}
       <ThemeButton
         color="secondary"
         className="right-4 lg:right-[24px] absolute top-8 min-w-[3rem]"
         aria-label="Close filter panel"
         startContent={<PiX />}
-        onPress={() => updateCurrentView('filter')}
+        id="close-filter-button" // Add an ID to this button
+        onPress={() => {
+          updateCurrentView('filter');
+        }}
       />
       {filters.map((attr) => (
         <DimensionFilter key={attr.property} {...attr} />

src/components/SidePanelControlBar.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import React, { FC, useMemo, useRef } from 'react';
+import React, { FC, useMemo, useRef, useEffect } from 'react';
 import { BarClickOptions } from '@/app/find-properties/[[...opa_id]]/page';
 import { BookmarkSimple, DownloadSimple, Funnel } from '@phosphor-icons/react';
 import { ThemeButton } from './ThemeButton';
 import { useFilter } from '@/context/FilterContext';
 import { getPropertyIdsFromLocalStorage } from '@/utilities/localStorage';
+import FilterView from './FilterView'; // Import the FilterView component
 
 type SidePanelControlBarProps = {
   currentView: string;
@@ -30,7 +31,10 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
 }) => {
   const filterRef = useRef<HTMLButtonElement | null>(null);
   const savedRef = useRef<HTMLButtonElement | null>(null);
+  const filterfocusRef = useRef<HTMLButtonElement | null>(null);
+
   const { dispatch, appFilter } = useFilter();
+  const filterViewRef = useRef<any>(null); // Reference for the FilterView component
 
   const filterCount: number = useMemo(() => {
     let count = 0;
@@ -67,6 +71,17 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
     }
   };
 
+  // Focus the "X" button inside FilterView after filter is expanded
+  useEffect(() => {
+    if (currentView === 'filter') {
+      // Focus the "X" button inside FilterView using its ID
+      const closeButton = document.getElementById('close-filter-button');
+      if (closeButton) {
+        closeButton.focus();
+      }
+    }
+  });
+
   return loading ? (
     <div>{/* Keep empty while loading */}</div>
   ) : (
@@ -116,6 +131,7 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
                 ? 'Filter'
                 : `Filter ${filterCount} filters active`
             }
+            aria-expanded={currentView === 'filter'}
             label={
               <div className="lg:space-x-1 body-md">
                 <span className="max-lg:hidden">Filter</span>
@@ -124,7 +140,10 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
                 )}
               </div>
             }
-            onPress={() => updateCurrentView('filter')}
+            onPress={() => {
+              updateCurrentView('filter');
+              filterfocusRef.current?.focus(); // Focus the filter button after pressing
+            }}
             isSelected={currentView === 'filter' || filterCount !== 0}
             startContent={<Funnel />}
             className="max-lg:min-w-[4rem]"

src/components/ThemeButton.tsx

@@ -7,6 +7,7 @@ type ButtonProps = Omit<NextUIButtonProps, 'color'> & {
   label?: string | React.ReactNode;
   color?: 'primary' | 'secondary' | 'tertiary';
   isSelected?: boolean;
+  ariaCurrent?: boolean;
 };
 
 type Ref = HTMLButtonElement;
@@ -93,6 +94,7 @@ const ThemeButton = forwardRef<Ref, ButtonProps>(function ThemeButton(
     ? `cursor-not-allowed ${removedTransitionStyles}`
     : '';
   const iconStyles = 'w-5 h-5 text-xl';
+  const ariaCurrent = isSelected ? { 'aria-current': 'true' } : {};
 
   return (
     <NextUIButton
@@ -103,7 +105,7 @@ const ThemeButton = forwardRef<Ref, ButtonProps>(function ThemeButton(
       className={`${basedStyles}  ${colorStyles} ${padding} ${disabledStyles} ${className}`}
       ref={ref}
       aria-disabled={isDisabled}
-      aria-current={isSelected ? 'true' : undefined}
+      ariaCurrent
       startContent={
         startContent ? (
           <span className={iconStyles}>{startContent}</span>