diff --git a/.storybook/snapshots/__snapshots__/mapboxmap--multiple-pins.png b/.storybook/snapshots/__snapshots__/mapboxmap--multiple-pins.png index 2635ba46..6f63a4a4 100644 Binary files a/.storybook/snapshots/__snapshots__/mapboxmap--multiple-pins.png and b/.storybook/snapshots/__snapshots__/mapboxmap--multiple-pins.png differ diff --git a/docs/search-ui-react.facetsprops.md b/docs/search-ui-react.facetsprops.md index b9e42187..516e136d 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 00000000..4665cf66 --- /dev/null +++ b/docs/search-ui-react.facetsprops.showoptionssearchinputlabel.md @@ -0,0 +1,18 @@ + + +[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 ef91c8db..741cb994 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 f9fcf5dd..a8512cee 100644 --- a/docs/search-ui-react.filtergroupprops.showoptionssearchinputlabel.md +++ b/docs/search-ui-react.filtergroupprops.showoptionssearchinputlabel.md @@ -4,10 +4,15 @@ ## 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 01eeb0d4..e481e192 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 ec43d247..a8449e15 100644 --- a/docs/search-ui-react.standardfacetprops.showoptionssearchinputlabel.md +++ b/docs/search-ui-react.standardfacetprops.showoptionssearchinputlabel.md @@ -4,10 +4,15 @@ ## 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 4ad9fdbc..595e2ec1 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 af6b96e4..fb6ba190 100644 --- a/docs/search-ui-react.staticfiltersprops.showoptionssearchinputlabel.md +++ b/docs/search-ui-react.staticfiltersprops.showoptionssearchinputlabel.md @@ -4,10 +4,15 @@ ## 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 9e8114b2..564351e4 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 282aaa5f..9236966b 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 871abad0..0cb1e47d 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 a90a9b7d..ad77bd3b 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 ( } }