fix: always include suggestions popup in the DOM (#3860)

But hide them when needed. This will ensure the DOM element referenced by the aria-controls always exists. That's (kind of) what Google is doing KIT-3125
coveo · Apr 30, 2024 · c13d91f · c13d91f
1 parent d94f9e0
commit c13d91f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git 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<Props>['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
@@ -24,7 +24,9 @@ function getPopupAttributes(props: Required<Props>['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/...ges/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx b/...ges/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
@@ -548,11 +548,15 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
     );
   }
 
-  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 (
       <div
         id={`${this.id}-popup`}
@@ -562,19 +566,17 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
             : '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(
           this.suggestionManager.isDoubleList
             ? 'search-suggestions-double-list'
             : 'search-suggestions-single-list'
         )}
-        aria-activedescendant={this.suggestionManager.activeDescendant}
+        {...(this.suggestionManager.activeDescendant && {
+          'aria-activedescendant': this.suggestionManager.activeDescendant,
+        })}
       >
         {this.renderPanel(
           'left',