Skip to content

Commit

Permalink
Merge pull request #1009 from CodeForPhilly/main
Browse files Browse the repository at this point in the history
Reconcile staging with main
  • Loading branch information
CodeWritingCow authored Nov 22, 2024
2 parents f4f6964 + f1f261b commit 5306464
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 6 deletions.
12 changes: 9 additions & 3 deletions src/components/FilterView.tsx
Original file line number Diff line number Diff line change
@@ -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 = [
{
Expand Down Expand Up @@ -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} />
Expand Down
23 changes: 21 additions & 2 deletions src/components/SidePanelControlBar.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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>
) : (
Expand Down Expand Up @@ -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>
Expand All @@ -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]"
Expand Down
4 changes: 3 additions & 1 deletion src/components/ThemeButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ type ButtonProps = Omit<NextUIButtonProps, 'color'> & {
label?: string | React.ReactNode;
color?: 'primary' | 'secondary' | 'tertiary';
isSelected?: boolean;
ariaCurrent?: boolean;
};

type Ref = HTMLButtonElement;
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down

0 comments on commit 5306464

Please sign in to comment.