@shoper/phoenix_design_system 1.11.13 → 1.11.14

package/build/cjs/packages/phoenix/src/components/form/search/search.js

@@ -15,6 +15,7 @@ var behavior_subject = require('../../../core/classes/behavior_subject/behavior_
 var ref_js = require('lit-html/directives/ref.js');
 var context_provider_controller = require('../../../core/context/context_provider_controller.js');
 var global_constants = require('../../../global_constants.js');
+var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
 var when = require('../../../../../../external/lit/external/lit-html/directives/when.js');
 var search_constants = require('./search_constants.js');
 
@@ -22,8 +23,11 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     constructor() {
         super(...arguments);
         this.view = search_constants.DEFAULT_VIEW;
+        this._id = v4['default']();
+        this._searchContentContainerId = v4['default']();
         this._searchResultsRef = ref_js.createRef();
         this._searchHistoryRef = ref_js.createRef();
+        this._searchMessageRef = ref_js.createRef();
         this._shouldShowHistory = false;
         this._shouldShowResults = false;
         this._shouldShowMessage = false;
@@ -33,84 +37,225 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._historyContext = new behavior_subject.BehaviorSubject({
             showLoadMore: false
         });
-        this._activeItemId = -1;
+        this._activeItemId = `${this._id}-1`;
         this._translations = {};
+        this._containerRole = 'grid';
         this._bindKeys = (ev) => {
-            var _a;
             switch (ev.key) {
                 case 'ArrowDown':
                     ev.preventDefault();
-                    this._focusOutsideActiveItemsForward();
-                    this._scroll(search_constants.SCROLL_DIRECTIONS.down);
+                    this._handleForwardListFocus();
                     break;
                 case 'ArrowUp':
-                    ev.preventDefault();
-                    this._focusOutsideActiveItemsBackward();
-                    this._scroll(search_constants.SCROLL_DIRECTIONS.up);
+                    this._handleBackwardListFocus(ev);
+                    break;
+                case 'ArrowLeft':
+                    if (this._containerRole === 'grid') {
+                        ev.preventDefault();
+                        this._handleBackwardGridFocus();
+                    }
+                    if (this._containerRole === 'listbox')
+                        this._handleMoveToInputField();
+                    break;
+                case 'ArrowRight':
+                    if (this._containerRole === 'grid') {
+                        ev.preventDefault();
+                        this._handleForwardGridFocus();
+                    }
+                    if (this._containerRole === 'listbox')
+                        this._handleMoveToInputField();
                     break;
                 case 'Enter':
                     ev.preventDefault();
-                    if (this._activeItemId === -1 || !this._shouldShowResults)
+                    if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
                         return;
                     this._handleChooseSearchItem();
                     break;
                 case 'Escape':
                     ev.preventDefault();
-                    this._inputField.blur();
-                    this._resetSearchView();
+                    if (this._shouldShowHistory || this._shouldShowHistory || this._shouldShowResults) {
+                        this._inputField.focus();
+                        this._shouldShowMessage = false;
+                        this._hideHistorySuggestionsAndResults();
+                    }
+                    else {
+                        this._inputField.value = '';
+                    }
+                    break;
+                case 'End':
+                    ev.preventDefault();
+                    this._handleFocusOnInputWithCaretEnd();
+                    break;
+                case 'Home':
+                    ev.preventDefault();
+                    this._handleFocusOnInputWithCaretStart();
+                    break;
+                case 'Backspace':
+                    this._handleMoveToInputField();
                     break;
                 case 'Tab':
-                    const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
-                    if (!isFocusedOnSearchInput) {
-                        const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
-                        searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
-                        this._resetSearchView();
-                        document.removeEventListener('keyup', this._bindKeys);
-                    }
+                    const isFocusedOnSearchInput = document.activeElement === this._inputField;
+                    if (!isFocusedOnSearchInput)
+                        ev.preventDefault();
+                    break;
+                default:
+                    const isAWriteableCharacter = ev.key.length === 1;
+                    if (isAWriteableCharacter)
+                        this._handleWriteableCharacter(ev);
                     break;
             }
         };
-        this._focusOutsideActiveItemsForward = () => {
+        this._handleSearchTabNavigation = (ev) => {
+            if (ev.key !== 'Tab')
+                return;
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (ev.shiftKey && !isFocusedOnSearchInput) {
+                this._focusOnPreviousElementBeforeSearchInput(ev);
+                return;
+            }
+            if (!isFocusedOnSearchInput) {
+                const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
+                searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
+                this._resetSearchView();
+                this._removeSearchKeyboardNavigation();
+                this._focusOnNextElementAfterSearchInput(ev);
+            }
+        };
+        this._focusOnPreviousElementBeforeSearchInput = async (ev) => {
+            ev.preventDefault();
+            const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
+            searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
+            this._resetSearchView();
+            this._removeSearchKeyboardNavigation();
+            utilities.UiDomUtils.getPreviousFocusableElement(this._inputField).focus();
+        };
+        this._focusOnNextElementAfterSearchInput = async (ev) => {
+            ev.preventDefault();
+            utilities.UiDomUtils.getNextFocusableElement(this._inputField).focus();
+        };
+        this._preventScrollingOnSearchContentBrowsing = (ev) => {
             var _a;
-            const $activeElement = document.activeElement;
-            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
+            const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
+            const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
+            const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
+            if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
+                ev.preventDefault();
+            }
+        };
+        this._handleForwardListFocus = () => {
+            var _a, _b;
+            const $searchItemsContainer = this._findSearchItemsContainer();
             if (!$searchItemsContainer)
                 return;
-            const $searchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+            const isActiveElementASearchItem = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id'));
+            const isActiveElementAGridSearchItem = isActiveElementASearchItem && !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-search-grid-item'));
+            const $listSearchItems = this._findListSearchItems($searchItemsContainer, isActiveElementAGridSearchItem);
+            this._handleForwardFocus($listSearchItems);
+        };
+        this._handleForwardGridFocus = () => {
+            const $searchItemsContainer = this._findSearchItemsContainer();
+            if (!$searchItemsContainer)
+                return;
+            const $gridSearchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
                 return !!$el.getAttribute('data-search-item-id');
             });
+            this._handleForwardFocus($gridSearchItems);
+        };
+        this._handleForwardFocus = ($searchItems) => {
+            var _a;
+            const $activeElement = document.activeElement;
             const indexOfCurrentElement = $searchItems.indexOf($activeElement);
             const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
             const $nextSearchItemElement = $searchItems[indexOfNextElement];
             $nextSearchItemElement.focus();
-            this._activeItemId = (_a = Number($nextSearchItemElement.getAttribute('data-search-item-id'))) !== null && _a !== void 0 ? _a : -1;
+            this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
         };
-        this._focusOutsideActiveItemsBackward = () => {
-            var _a;
-            const $activeElement = document.activeElement;
-            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
+        this._handleMoveToInputField = () => {
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (isFocusedOnSearchInput)
+                return;
+            this._inputField.focus();
+        };
+        this._handleBackwardListFocus = (ev) => {
+            var _a, _b;
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            const hasPopup = this._shouldShowHistory || this._shouldShowHistory || this._shouldShowResults;
+            if (isFocusedOnSearchInput || !hasPopup)
+                return;
+            ev.preventDefault();
+            const $searchItemsContainer = this._findSearchItemsContainer();
+            if (!$searchItemsContainer)
+                return;
+            const isActiveElementASearchItem = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id'));
+            const isActiveElementAGridSearchItem = isActiveElementASearchItem && !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-search-grid-item'));
+            const $listSearchItems = this._findListSearchItems($searchItemsContainer, isActiveElementAGridSearchItem);
+            this._handleBackwardFocus($listSearchItems);
+        };
+        this._findListSearchItems = ($searchItemsContainer, shouldFindGridList) => {
+            return utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+                const searchItemId = $el.getAttribute('data-search-item-id');
+                const isListSearchItem = !!searchItemId && !$el.getAttribute('data-search-grid-item');
+                const isGridSearchItem = !!searchItemId && $el.getAttribute('data-search-grid-item');
+                return shouldFindGridList ? isGridSearchItem : isListSearchItem;
+            });
+        };
+        this._handleBackwardGridFocus = () => {
+            const $searchItemsContainer = this._findSearchItemsContainer();
             if (!$searchItemsContainer)
                 return;
-            const $searchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+            const $gridSearchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
                 return !!$el.getAttribute('data-search-item-id');
             });
+            this._handleBackwardFocus($gridSearchItems);
+        };
+        this._findSearchItemsContainer = () => {
+            const containers = [
+                this._searchHistoryRef.value,
+                this._searchResultsRef.value,
+                this._searchMessageRef.value
+            ];
+            return containers.find(container => container && !utilities.UiDomUtils.isElementEmpty(container));
+        };
+        this._handleBackwardFocus = ($searchItems) => {
+            var _a;
+            const $activeElement = document.activeElement;
             const indexOfCurrentElement = $searchItems.indexOf($activeElement);
             const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
             const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
             $previousSearchItemElement.focus();
-            this._activeItemId = (_a = Number($previousSearchItemElement.getAttribute('data-search-item-id'))) !== null && _a !== void 0 ? _a : -1;
+            this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
         };
-        this._getSearchItemsCount = () => {
-            if (this._shouldShowHistory)
-                return this._historyLimitedContent.length;
-            let searchItemsCount = this._searchResults.products.length +
-                this._searchResults.categories.length +
-                this._searchResults.suggestions.length +
-                this._searchResults.producers.length;
-            if (this._searchResults.products.length && this._searchResults.suggestions.length) {
-                searchItemsCount += 1;
+        this._setActiveItemId = (newActiveItemId) => {
+            this._activeItemId = newActiveItemId;
+            if (document.activeElement !== this._inputField) {
+                this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
+            }
+        };
+        this._removeSearchKeyboardNavigation = () => {
+            document.removeEventListener('keydown', this._bindKeys);
+            document.removeEventListener('keyup', this._handleSearchTabNavigation);
+        };
+        this._handleFocusOnInputWithCaretEnd = () => {
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (isFocusedOnSearchInput)
+                return;
+            this._inputField.focus();
+            const endPosition = this._inputField.value.length;
+            this._inputField.setSelectionRange(endPosition, endPosition);
+        };
+        this._handleFocusOnInputWithCaretStart = () => {
+            this._inputField.focus();
+            this._inputField.setSelectionRange(0, 0);
+        };
+        this._handleWriteableCharacter = (ev) => {
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (isFocusedOnSearchInput)
+                return;
+            this._inputField.focus();
+            const isAPrintableCharacter = ev.key.match(/\P{C}/u);
+            if (ev.key.length !== 1 || !isAPrintableCharacter) {
+                ev.preventDefault();
             }
-            return searchItemsCount;
         };
         this._hideSuggesterOnClickOutside = (ev) => {
             const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
@@ -125,6 +270,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                 ? this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened)
                 : this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
         };
+        this._preventSubmitOnSearchClear = (ev) => {
+            const $searchClear = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.clearButton);
+            if (ev.key === 'Enter' && ev.target === $searchClear) {
+                ev.preventDefault();
+            }
+        };
     }
     async connectedCallback() {
         super.connectedCallback();
@@ -163,7 +314,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('click', this._hideSuggesterOnClickOutside);
+        document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
         window.removeEventListener('resize', this._switchTypeOfSearchView);
+        this._searchForm.removeEventListener('keydown', this._preventSubmitOnSearchClear);
     }
     _setupContext() {
         this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -172,8 +325,11 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     _setupInitialSearchPhrase() {
         var _a;
         const searchInput = this.querySelector('input[type="search"]');
+        const searchForm = this.closest('form');
         if (searchInput)
             this._inputField = searchInput;
+        if (searchForm)
+            this._searchForm = searchForm;
         if (!((_a = this._inputField) === null || _a === void 0 ? void 0 : _a.value))
             return;
         this._searchPhrase = this._inputField.value;
@@ -192,11 +348,17 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     }
     _setupListeners() {
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusin, (ev) => {
+            var _a, _b, _c;
+            const $target = (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.relatedTarget;
+            if ($target === null || $target === void 0 ? void 0 : $target.closest(`[id="${this._searchContentContainerId}"]`))
+                return;
             const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
             searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(search_constants.SEARCH_CLASS_NAMES.outline);
-            const shouldShowMessage = ev.detail.searchPhrase !== '';
-            this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage, false);
-            document.addEventListener('keyup', this._bindKeys);
+            const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
+            this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
+            document.addEventListener('keydown', this._bindKeys);
+            document.addEventListener('keyup', this._handleSearchTabNavigation);
+            document.addEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
@@ -207,7 +369,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             this._updateSearchView('', false);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
-            if (this._activeItemId !== -1)
+            if (this._activeItemId !== `${this._id}-1`)
                 return;
             if (this._inputField.value === '') {
                 this._updateSearchView(this._inputField.value, true);
@@ -231,10 +393,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         });
         document.addEventListener('click', this._hideSuggesterOnClickOutside);
         window.addEventListener('resize', this._switchTypeOfSearchView);
+        this._searchForm.addEventListener('keydown', this._preventSubmitOnSearchClear);
     }
     _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
         this._shouldShowMessage = shouldShowMessage;
-        this._activeItemId = -1;
+        this._setActiveItemId(`${this._id}-1`);
+        this._inputField.setAttribute('aria-activedescendant', '');
         this._displaySuggester(searchPhrase);
         if (!shouldUpdateSearchPhrase)
             return;
@@ -272,57 +436,58 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     _handleToggleHistoryAndResults({ shouldShowHistory, shouldShowResults }) {
         this._shouldShowHistory = shouldShowHistory;
         this._shouldShowResults = shouldShowResults;
-        this._toggleSearchInputAria(shouldShowHistory, shouldShowResults);
+        this._toggleSearchInputAttributes(shouldShowHistory, shouldShowResults);
+        this._toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults);
     }
-    _toggleSearchInputAria(shouldShowHistory, shouldShowResults) {
+    _toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
         var _a;
         const $input = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.input;
         if (!$input)
             return;
         if (!shouldShowHistory && !shouldShowResults) {
             $input.removeAttribute('aria-label');
+            $input.setAttribute('aria-activedescendant', '');
             return;
         }
         $input.setAttribute('aria-expanded', 'true');
-        if (shouldShowHistory)
+        if (shouldShowHistory) {
             $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
-        if (shouldShowResults)
-            $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
-    }
-    _scroll(direction) {
-        const searchContainer = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.container}`);
-        const maxScrollTop = searchContainer.scrollHeight - searchContainer.clientHeight;
-        const activeItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
-        const activeItemHeight = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.getBoundingClientRect().height) || 0;
-        let top;
-        if (direction === search_constants.SCROLL_DIRECTIONS.up) {
-            top = searchContainer.scrollTop == 0 ? 0 : searchContainer.scrollTop + 30 - activeItemHeight;
+            $input.setAttribute('aria-haspopup', 'grid');
         }
-        else {
-            top = searchContainer.scrollTop == maxScrollTop ? maxScrollTop : activeItemHeight + searchContainer.scrollTop - 30;
+        if (shouldShowResults) {
+            $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
+            this._inputField.removeAttribute('aria-haspopup');
         }
-        if (this._activeItemId === this._getSearchItemsCount() - 1) {
-            top = maxScrollTop;
+    }
+    _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
+        if (shouldShowHistory) {
+            this._containerRole = 'grid';
         }
-        if (this._activeItemId === 0) {
-            top = 0;
+        if (shouldShowResults) {
+            this._containerRole = 'listbox';
         }
-        searchContainer === null || searchContainer === void 0 ? void 0 : searchContainer.scrollTo({ top, behavior: 'smooth' });
     }
     _handleChooseSearchItem() {
-        const activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
-        const elementToClick = activeSearchItem.dataset.suggestedValue
-            ? activeSearchItem
-            : activeSearchItem.querySelector('a');
-        elementToClick.click();
+        const $activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
+        if (!$activeSearchItem)
+            return;
+        const $linkElement = $activeSearchItem.querySelector('a');
+        const $suggestedElement = $linkElement || $activeSearchItem;
+        const $elementToClick = $activeSearchItem.dataset.suggestedValue ? $suggestedElement : $linkElement;
+        if (!$elementToClick) {
+            $activeSearchItem.click();
+        }
+        else {
+            $elementToClick.click();
+        }
     }
     _resetSearchView() {
         this._shouldShowMessage = false;
-        this._activeItemId = -1;
+        this._setActiveItemId(`${this._id}-1`);
         const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
         searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
         this._hideHistorySuggestionsAndResults();
-        document.removeEventListener('keyup', this._bindKeys);
+        this._removeSearchKeyboardNavigation();
     }
     _submitSearchPhrase(searchPhrase) {
         this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
@@ -357,33 +522,48 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                 <div class="labeled-icon__signature">${this._translations.search}</div>
             </div>
 
-            ${when.when(this._isSuggesterLayerVisible(), () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.container}">
-                    ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
-                            .history="${this._historyLimitedContent}"
-                            .results="${this._searchResults}"
-                            .translations="${this._translations}"
-                            search-phrase="${this._searchPhrase}"
-                            module-instance-id="${this.moduleInstanceId}"
-                        ></h-search-message>`)}
-                    ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
-                                ${ref_js.ref(this._searchHistoryRef)}
+            ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
+                    <div
+                        class="${search_constants.SEARCH_CLASS_NAMES.container}"
+                        id="${this._searchContentContainerId}"
+                        role="${this._containerRole}"
+                    >
+                        ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
+                                ${ref_js.ref(this._searchMessageRef)}
                                 .history="${this._historyLimitedContent}"
-                                .translations="${this._translations}"
-                                active-item-id="${this._activeItemId}"
-                                module-instance-id="${this.moduleInstanceId}"
-                            ></h-search-history>`)}
-                    ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
-                                ${ref_js.ref(this._searchResultsRef)}
                                 .results="${this._searchResults}"
-                                search-phrase="${this._searchPhrase}"
-                                .settings="${this.settings}"
-                                locale="${this.locale}"
-                                view="${this.view}"
                                 .translations="${this._translations}"
-                                active-item-id="${this._activeItemId}"
+                                search-phrase="${this._searchPhrase}"
                                 module-instance-id="${this.moduleInstanceId}"
-                            ></h-search-results>`)}
-                </div>`)}
+                            ></h-search-message>`)}
+                        ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
+                                    ${ref_js.ref(this._searchHistoryRef)}
+                                    .history="${this._historyLimitedContent}"
+                                    .translations="${this._translations}"
+                                    active-item-id="${this._activeItemId}"
+                                    search-id="${this._id}"
+                                    module-instance-id="${this.moduleInstanceId}"
+                                ></h-search-history>`)}
+                        ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
+                                    ${ref_js.ref(this._searchResultsRef)}
+                                    .results="${this._searchResults}"
+                                    search-phrase="${this._searchPhrase}"
+                                    .settings="${this.settings}"
+                                    locale="${this.locale}"
+                                    view="${this.view}"
+                                    .translations="${this._translations}"
+                                    active-item-id="${this._activeItemId}"
+                                    search-id="${this._id}"
+                                    module-instance-id="${this.moduleInstanceId}"
+                                ></h-search-results>`)}
+                    </div>
+                `, () => lit.html `
+                <div
+                    class="${search_constants.SEARCH_CLASS_NAMES.container}"
+                    id="${this._searchContentContainerId}"
+                    role="${this._containerRole}"
+                    hidden
+                ></div>`)}
         `;
     }
 };
@@ -437,12 +617,16 @@ tslib_es6.__decorate([
 ], exports.HSearch.prototype, "_historyContext", void 0);
 tslib_es6.__decorate([
     decorators.state(),
-    tslib_es6.__metadata("design:type", Number)
+    tslib_es6.__metadata("design:type", String)
 ], exports.HSearch.prototype, "_activeItemId", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearch.prototype, "_translations", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearch.prototype, "_containerRole", void 0);
 exports.HSearch = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.search)
 ], exports.HSearch);

package/build/cjs/packages/phoenix/src/components/form/search/search.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js

@@ -36,6 +36,11 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
         this.addEventListener('click', this._dispatchClearEvent);
         document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, this._handleClearButtonOnPhraseEnter);
     }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        const newTabIndex = this._shouldShow ? '0' : '-1';
+        this.setAttribute('tabindex', newTabIndex);
+    }
     async _searchContextSetup() {
         try {
             this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}