From 2f579a1e551cae63de6901c4796ee10a5ad6c8b4 Mon Sep 17 00:00:00 2001 From: Kyle Gerner Date: Wed, 25 Feb 2026 17:37:49 -0500 Subject: [PATCH 1/9] =?UTF-8?q?fix=20linting;=20added=20optional=20region?= =?UTF-8?q?=20landmark=20semantics=20to=C2=A0FilterSearch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...tergroupcssclasses.grouplegendclassname.md | 11 ++++ docs/search-ui-react.filtergroupcssclasses.md | 19 +++++++ etc/search-ui-react.api.md | 4 +- src/components/FilterGroup.tsx | 37 +++++++------ src/components/FilterSearch.tsx | 13 ++++- test-site/package-lock.json | 2 +- tests/components/Facets.test.tsx | 52 +++++++++++-------- tests/components/FilterSearch.test.tsx | 31 +++++++++++ .../components/NumericalFacetContent.test.tsx | 13 ++++- tests/components/NumericalFacets.test.tsx | 4 +- .../components/StandardFacetContent.test.tsx | 11 +++- tests/components/StandardFacets.test.tsx | 4 +- tests/components/StaticFilters.test.tsx | 18 +++++-- 13 files changed, 166 insertions(+), 53 deletions(-) create mode 100644 docs/search-ui-react.filtergroupcssclasses.grouplegendclassname.md diff --git a/docs/search-ui-react.filtergroupcssclasses.grouplegendclassname.md b/docs/search-ui-react.filtergroupcssclasses.grouplegendclassname.md new file mode 100644 index 000000000..ae56abb6a --- /dev/null +++ b/docs/search-ui-react.filtergroupcssclasses.grouplegendclassname.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) > [groupLegendClassName](./search-ui-react.filtergroupcssclasses.grouplegendclassname.md) + +## FilterGroupCssClasses.groupLegendClassName property + +**Signature:** + +```typescript +groupLegendClassName?: string; +``` diff --git a/docs/search-ui-react.filtergroupcssclasses.md b/docs/search-ui-react.filtergroupcssclasses.md index 7989d7f4f..4d2b35799 100644 --- a/docs/search-ui-react.filtergroupcssclasses.md +++ b/docs/search-ui-react.filtergroupcssclasses.md @@ -37,6 +37,25 @@ Description +[groupLegendClassName?](./search-ui-react.filtergroupcssclasses.grouplegendclassname.md) + + + + + + + +string + + + + +_(Optional)_ + + + + + [option?](./search-ui-react.filtergroupcssclasses.option.md) diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md index dd840b2af..801986e11 100644 --- a/etc/search-ui-react.api.md +++ b/etc/search-ui-react.api.md @@ -263,6 +263,8 @@ export function FilterDivider({ className }: { // @public export interface FilterGroupCssClasses { + // (undocumented) + groupLegendClassName?: string; // (undocumented) option?: string; // (undocumented) @@ -1043,7 +1045,7 @@ export interface VisualAutocompleteConfig { // Warnings were encountered during analysis: // -// dist/index.d.ts:1749:5 - (ae-forgotten-export) The symbol "translations" needs to be exported by the entry point index.d.ts +// dist/index.d.ts:1750:5 - (ae-forgotten-export) The symbol "translations" needs to be exported by the entry point index.d.ts // (No @packageDocumentation comment for this package) diff --git a/src/components/FilterGroup.tsx b/src/components/FilterGroup.tsx index c52c8abea..9d6dd168e 100644 --- a/src/components/FilterGroup.tsx +++ b/src/components/FilterGroup.tsx @@ -21,6 +21,7 @@ const DEFAULT_CUSTOM_CSS_CLASSES = {}; */ export interface FilterGroupCssClasses { titleLabel?: string, + groupLegendClassName?: string, searchInput?: string, optionsContainer?: string, option?: string, @@ -79,6 +80,22 @@ export function FilterGroup({ }; }, [customCssClasses]); + const filterOptionsAndChildren = ( +
+ + {title} + +
+ {searchable && } + + {children} +
+
+ ); + return ( {collapsible ? ( - - {searchable && } - - {children} + + {filterOptionsAndChildren} ) : ( -
- {searchable && } - - {children} -
+ filterOptionsAndChildren )}
); @@ -157,4 +162,4 @@ function CheckboxOptions({ } ); -} \ No newline at end of file +} diff --git a/src/components/FilterSearch.tsx b/src/components/FilterSearch.tsx index 5766f2c19..7b71f4eed 100644 --- a/src/components/FilterSearch.tsx +++ b/src/components/FilterSearch.tsx @@ -126,6 +126,11 @@ export interface FilterSearchProps { disableBuiltInClasses?: boolean, /** The accessible label for the dropdown input. */ ariaLabel?: string, + /** + * The accessible label for the region which contains the filter search input and its filtered content. + * If provided, this overrides `label` for the region accessible label. + */ + resultsRegionAriaLabel?: string, /** Whether to include a button to search on the user's location. Defaults to false. */ showCurrentLocationButton?: boolean, /** The props for the geolocation component, if the current location button is enabled. */ @@ -152,6 +157,7 @@ export function FilterSearch({ customCssClasses, disableBuiltInClasses = false, ariaLabel, + resultsRegionAriaLabel, showCurrentLocationButton = false, geolocationProps = {} }: FilterSearchProps): React.JSX.Element { @@ -243,6 +249,7 @@ export function FilterSearch({ }, [filterSearchResponse?.sections]); const hasResults = sections.flatMap(s => s.results).length > 0; + const regionAriaLabel = resultsRegionAriaLabel ?? label; const handleSelectDropdown = useCallback(async ( _value: string, @@ -376,7 +383,11 @@ export function FilterSearch({ ); return ( -
+
{label && (