From ca4fa9e9ac1ca0581dbf689433c160416985db57 Mon Sep 17 00:00:00 2001 From: Kyle Gerner Date: Tue, 18 Aug 2026 11:22:35 -0400 Subject: [PATCH 1/3] fix --- docs/search-ui-react.facetsprops.md | 19 +++++ ...facetsprops.showoptionssearchinputlabel.md | 17 +++++ docs/search-ui-react.filtergroupprops.md | 2 +- ...rgroupprops.showoptionssearchinputlabel.md | 6 +- docs/search-ui-react.standardfacetprops.md | 2 +- ...dfacetprops.showoptionssearchinputlabel.md | 6 +- docs/search-ui-react.staticfiltersprops.md | 2 +- ...iltersprops.showoptionssearchinputlabel.md | 6 +- etc/search-ui-react.api.md | 3 +- src/components/FacetProps.ts | 15 ++-- src/components/Facets.tsx | 11 ++- src/components/FilterGroup.tsx | 18 +++-- src/components/Filters/SearchInput.tsx | 31 +++++--- src/components/SearchI18nextProvider.tsx | 1 + tests/components/Facets.test.tsx | 72 ++++++++++++++++++- .../components/NumericalFacetContent.test.tsx | 16 ++++- .../components/SearchI18nextProvider.test.tsx | 60 ++++++++++++++++ .../components/StandardFacetContent.test.tsx | 16 ++++- tests/components/StaticFilters.test.tsx | 40 ++++++++++- 19 files changed, 308 insertions(+), 35 deletions(-) create mode 100644 docs/search-ui-react.facetsprops.showoptionssearchinputlabel.md create mode 100644 tests/components/SearchI18nextProvider.test.tsx diff --git a/docs/search-ui-react.facetsprops.md b/docs/search-ui-react.facetsprops.md index b9e421871..516e136d4 100644 --- a/docs/search-ui-react.facetsprops.md +++ b/docs/search-ui-react.facetsprops.md @@ -148,6 +148,25 @@ boolean _(Optional)_ Whether or not a search is automatically run when a filter is selected. Defaults to true. + + + +[showOptionsSearchInputLabel?](./search-ui-react.facetsprops.showoptionssearchinputlabel.md) + + + + + + + +boolean + + + + +_(Optional)_ Whether or not to display the options search input label visibly on facets that render an options search input. Defaults to false, and is overridden by the same prop on a child facet. + + diff --git a/docs/search-ui-react.facetsprops.showoptionssearchinputlabel.md b/docs/search-ui-react.facetsprops.showoptionssearchinputlabel.md new file mode 100644 index 000000000..09a29a91b --- /dev/null +++ b/docs/search-ui-react.facetsprops.showoptionssearchinputlabel.md @@ -0,0 +1,17 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) > [showOptionsSearchInputLabel](./search-ui-react.facetsprops.showoptionssearchinputlabel.md) + +## FacetsProps.showOptionsSearchInputLabel property + +Whether or not to display the options search input label visibly on facets that render an options search input. Defaults to false, and is overridden by the same prop on a child facet. + +**Signature:** + +```typescript +showOptionsSearchInputLabel?: boolean; +``` + +## Remarks + +The label is always associated with the search input so that it has an accessible name. When false, the label is visually hidden but remains available to assistive technology. Hierarchical facets do not render an options search input, so this has no effect on them. diff --git a/docs/search-ui-react.filtergroupprops.md b/docs/search-ui-react.filtergroupprops.md index ef91c8db0..741cb9942 100644 --- a/docs/search-ui-react.filtergroupprops.md +++ b/docs/search-ui-react.filtergroupprops.md @@ -183,7 +183,7 @@ boolean -_(Optional)_ Whether or not to display the visible search input label. Defaults to false. +_(Optional)_ Whether or not to display the search input label visibly. Defaults to false. diff --git a/docs/search-ui-react.filtergroupprops.showoptionssearchinputlabel.md b/docs/search-ui-react.filtergroupprops.showoptionssearchinputlabel.md index f9fcf5dd3..708f42f5a 100644 --- a/docs/search-ui-react.filtergroupprops.showoptionssearchinputlabel.md +++ b/docs/search-ui-react.filtergroupprops.showoptionssearchinputlabel.md @@ -4,10 +4,14 @@ ## FilterGroupProps.showOptionsSearchInputLabel property -Whether or not to display the visible search input label. Defaults to false. +Whether or not to display the search input label visibly. Defaults to false. **Signature:** ```typescript showOptionsSearchInputLabel?: boolean; ``` + +## Remarks + +The label is always associated with the search input so that it has an accessible name. When false, the label is visually hidden but remains available to assistive technology. diff --git a/docs/search-ui-react.standardfacetprops.md b/docs/search-ui-react.standardfacetprops.md index 01eeb0d4e..e481e192a 100644 --- a/docs/search-ui-react.standardfacetprops.md +++ b/docs/search-ui-react.standardfacetprops.md @@ -183,7 +183,7 @@ boolean -_(Optional)_ Whether or not to show the label for the search bar when present. Defaults to false. +_(Optional)_ Whether or not to display the search input label visibly. Defaults to false. diff --git a/docs/search-ui-react.standardfacetprops.showoptionssearchinputlabel.md b/docs/search-ui-react.standardfacetprops.showoptionssearchinputlabel.md index ec43d2479..df97efa84 100644 --- a/docs/search-ui-react.standardfacetprops.showoptionssearchinputlabel.md +++ b/docs/search-ui-react.standardfacetprops.showoptionssearchinputlabel.md @@ -4,10 +4,14 @@ ## StandardFacetProps.showOptionsSearchInputLabel property -Whether or not to show the label for the search bar when present. Defaults to false. +Whether or not to display the search input label visibly. Defaults to false. **Signature:** ```typescript showOptionsSearchInputLabel?: boolean; ``` + +## Remarks + +The label is always associated with the search input so that it has an accessible name. When false, the label is visually hidden but remains available to assistive technology. diff --git a/docs/search-ui-react.staticfiltersprops.md b/docs/search-ui-react.staticfiltersprops.md index 4ad9fdbce..595e2ec16 100644 --- a/docs/search-ui-react.staticfiltersprops.md +++ b/docs/search-ui-react.staticfiltersprops.md @@ -183,7 +183,7 @@ boolean -_(Optional)_ Whether or not to display the visible search input label. Defaults to false. +_(Optional)_ Whether or not to display the search input label visibly. Defaults to false. diff --git a/docs/search-ui-react.staticfiltersprops.showoptionssearchinputlabel.md b/docs/search-ui-react.staticfiltersprops.showoptionssearchinputlabel.md index af6b96e41..b99b0ba76 100644 --- a/docs/search-ui-react.staticfiltersprops.showoptionssearchinputlabel.md +++ b/docs/search-ui-react.staticfiltersprops.showoptionssearchinputlabel.md @@ -4,10 +4,14 @@ ## StaticFiltersProps.showOptionsSearchInputLabel property -Whether or not to display the visible search input label. Defaults to false. +Whether or not to display the search input label visibly. Defaults to false. **Signature:** ```typescript showOptionsSearchInputLabel?: boolean; ``` + +## Remarks + +The label is always associated with the search input so that it has an accessible name. When false, the label is visually hidden but remains available to assistive technology. diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md index 9e8114b2e..564351e4b 100644 --- a/etc/search-ui-react.api.md +++ b/etc/search-ui-react.api.md @@ -262,6 +262,7 @@ export interface FacetsProps { hierarchicalFieldIds?: string[]; onlyRenderChildren?: boolean; searchOnChange?: boolean; + showOptionsSearchInputLabel?: boolean; } // @public @@ -1174,7 +1175,7 @@ export interface VisualAutocompleteConfig { // Warnings were encountered during analysis: // -// dist/index.d.ts:1921:5 - (ae-forgotten-export) The symbol "translations" needs to be exported by the entry point index.d.ts +// dist/index.d.ts:1934: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/FacetProps.ts b/src/components/FacetProps.ts index 282aaa5f3..9236966bc 100644 --- a/src/components/FacetProps.ts +++ b/src/components/FacetProps.ts @@ -33,6 +33,16 @@ export interface FacetsProps { excludedFieldIds?: string[], /** List of field ids that should be rendered as hierarchical facets. */ hierarchicalFieldIds?: string[], + /** + * Whether or not to display the options search input label visibly on facets that render an + * options search input. Defaults to false, and is overridden by the same prop on a child facet. + * + * @remarks + * The label is always associated with the search input so that it has an accessible name. + * When false, the label is visually hidden but remains available to assistive technology. + * Hierarchical facets do not render an options search input, so this has no effect on them. + */ + showOptionsSearchInputLabel?: boolean, /** The custom facet components that will override the default rendering. * * @remarks @@ -66,10 +76,7 @@ export interface StandardFacetProps { showMoreLimit?: number, /** CSS classes for customizing the component styling. */ customCssClasses?: FilterGroupCssClasses, - /** - * Whether or not to show the label for the search bar when present. - * Defaults to false. - */ + /** {@inheritDoc FilterGroupProps.showOptionsSearchInputLabel} */ showOptionsSearchInputLabel?: boolean } diff --git a/src/components/Facets.tsx b/src/components/Facets.tsx index 871abad0f..0cb1e47d5 100644 --- a/src/components/Facets.tsx +++ b/src/components/Facets.tsx @@ -40,6 +40,7 @@ export function Facets(props: FacetsProps): React.JSX.Element { hierarchicalFieldIds, excludedFieldIds = [], customCssClasses = {}, + showOptionsSearchInputLabel, } = props; const resolvedHierarchicalFieldIds = useMemo(() => hierarchicalFieldIds ?? [], [hierarchicalFieldIds]); @@ -89,6 +90,7 @@ export function Facets(props: FacetsProps): React.JSX.Element { facetsCustomCssClasses={customCssClasses} fieldIdToCustomFacetProps={fieldIdToCustomFacetProps} hierarchicalFieldIds={resolvedHierarchicalFieldIds} + showOptionsSearchInputLabel={showOptionsSearchInputLabel} /> {(i < facets.length - 1) && } @@ -140,6 +142,7 @@ export function HierarchicalFacet(props: HierarchicalFacetProps) { return null; * @param facetsCustomCssClasses - {@link FacetsCssClasses} * @param fieldIdToCustomFacetProps - a map of fieldId to facet props * @param hierarchicalFieldIds - a list of hierarchical field ids + * @param showOptionsSearchInputLabel - whether to display the options search input label visibly * @returns {@link ReactElement} * * @internal @@ -149,20 +152,26 @@ export function Facet({ facetsCustomCssClasses, fieldIdToCustomFacetProps, hierarchicalFieldIds, + showOptionsSearchInputLabel, }: { facet: DisplayableFacet, facetsCustomCssClasses: FacetsCssClasses, fieldIdToCustomFacetProps: Map, - hierarchicalFieldIds: string[] + hierarchicalFieldIds: string[], + showOptionsSearchInputLabel?: boolean }) { let facetType: FacetType; let facetProps: FacetProps = { fieldId: facet.fieldId, label: facet.displayName, + showOptionsSearchInputLabel, }; const customFacetElement = fieldIdToCustomFacetProps.get(facet.fieldId); if (customFacetElement) { facetProps = { ...facetProps, ...customFacetElement.props }; + if (customFacetElement.props.showOptionsSearchInputLabel === undefined) { + facetProps.showOptionsSearchInputLabel = showOptionsSearchInputLabel; + } facetType = getFacetTypeFromReactElementType( (typeof customFacetElement.type === 'function') ? customFacetElement.type.name : ''); diff --git a/src/components/FilterGroup.tsx b/src/components/FilterGroup.tsx index a90a9b7de..ad77bd3bb 100644 --- a/src/components/FilterGroup.tsx +++ b/src/components/FilterGroup.tsx @@ -50,7 +50,13 @@ export interface FilterGroupProps { defaultExpanded?: boolean, /** Whether or not to display a text input to search for filter options. */ searchable?: boolean, - /** Whether or not to display the visible search input label. Defaults to false. */ + /** + * Whether or not to display the search input label visibly. Defaults to false. + * + * @remarks + * The label is always associated with the search input so that it has an accessible name. + * When false, the label is visually hidden but remains available to assistive technology. + */ showOptionsSearchInputLabel?: boolean, /** CSS classes for customizing the component styling. */ customCssClasses?: FilterGroupCssClasses, @@ -83,11 +89,9 @@ export function FilterGroup({ ...optionInput && { input: optionInput } }; }, [customCssClasses]); - const searchInputLabel = showOptionsSearchInputLabel - ? t('filterGroupSearchInputLabel', { - title - }) - : undefined; + const searchInputLabel = t('filterGroupSearchInputLabel', { + title + }); return ( } }