diff --git a/packages/atomic/src/components/common/search-box/search-input.tsx b/packages/atomic/src/components/common/search-box/search-input.tsx index 50f9bda8f6f..d18aa890219 100644 --- a/packages/atomic/src/components/common/search-box/search-input.tsx +++ b/packages/atomic/src/components/common/search-box/search-input.tsx @@ -24,7 +24,9 @@ function getPopupAttributes(props: Required['popup']) { autocomplete: 'off', autocapitalize: 'off', autocorrect: 'off', - 'aria-activedescendant': props.activeDescendant, + ...(props.activeDescendant && { + 'aria-activedescendant': props.activeDescendant, + }), 'aria-expanded': `${props.hasSuggestions && props.expanded}`, 'aria-autocomplete': 'both', 'aria-haspopup': 'true', diff --git a/packages/atomic/src/components/common/search-box/search-text-area.tsx b/packages/atomic/src/components/common/search-box/search-text-area.tsx index 26e2d36e009..b28ea489c62 100644 --- a/packages/atomic/src/components/common/search-box/search-text-area.tsx +++ b/packages/atomic/src/components/common/search-box/search-text-area.tsx @@ -24,7 +24,9 @@ function getPopupAttributes(props: Required['popup']) { autocomplete: 'off', autocapitalize: 'off', autocorrect: 'off', - 'aria-activedescendant': props.activeDescendant, + ...(props.activeDescendant && { + 'aria-activedescendant': props.activeDescendant, + }), 'aria-expanded': `${props.hasSuggestions && props.expanded}`, 'aria-autocomplete': 'both', 'aria-haspopup': 'true', diff --git a/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx b/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx index 545df9fbe79..7e740a862a2 100644 --- a/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx @@ -271,7 +271,9 @@ export class AtomicInsightSearchBox { }`} role="application" aria-label={this.bindings.i18n.t('search-suggestions-single-list')} - aria-activedescendant={this.suggestionManager.activeDescendant} + {...(this.suggestionManager.activeDescendant && { + 'aria-activedescendant': this.suggestionManager.activeDescendant, + })} > {this.renderPanel( this.suggestionManager.allSuggestionElements, diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx index e7cfdf6cbc0..7167facd32c 100644 --- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx +++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx @@ -548,11 +548,15 @@ export class AtomicSearchBox implements InitializableComponent { ); } - private renderSuggestions() { - if (!this.suggestionManager.hasSuggestions) { - return null; - } + private get shouldShowSuggestions() { + return ( + this.suggestionManager.hasSuggestions && + this.isExpanded && + !this.isSearchDisabledForEndUser(this.searchBoxState.value) + ); + } + private renderSuggestions() { return (
{ : 'suggestions-single-list' }`} class={`flex w-full z-10 absolute left-0 top-full rounded-md bg-background border border-neutral ${ - this.suggestionManager.hasSuggestions && - this.isExpanded && - !this.isSearchDisabledForEndUser(this.searchBoxState.value) - ? '' - : 'hidden' + this.shouldShowSuggestions ? '' : 'hidden' }`} role="application" aria-label={this.bindings.i18n.t( @@ -574,7 +574,9 @@ export class AtomicSearchBox implements InitializableComponent { ? 'search-suggestions-double-list' : 'search-suggestions-single-list' )} - aria-activedescendant={this.suggestionManager.activeDescendant} + {...(this.suggestionManager.activeDescendant && { + 'aria-activedescendant': this.suggestionManager.activeDescendant, + })} > {this.renderPanel( 'left',