@shoper/phoenix_design_system 1.11.10-0 → 1.11.10-1

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

@@ -97,7 +97,6 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
                       control-id="${this.controlId}"
                       label-text="${this.labelText}"
                       label-icon-name="${ifDefined_js.ifDefined(this.labelIconName)}"
-                      focus-priority
                   />`
             : lit.nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var icon_constants = require('../../icon/icon_constants.js');
 var observer = require('../../../core/classes/observer/observer.js');
 var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
 var behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
+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 when = require('../../../../../../external/lit/external/lit-html/directives/when.js');
@@ -20,6 +22,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     constructor() {
         super(...arguments);
         this.view = search_constants.DEFAULT_VIEW;
+        this._searchResultsRef = ref_js.createRef();
+        this._searchHistoryRef = ref_js.createRef();
         this._shouldShowHistory = false;
         this._shouldShowResults = false;
         this._shouldShowMessage = false;
@@ -29,25 +33,30 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._historyContext = new behavior_subject.BehaviorSubject({
             showLoadMore: false
         });
-        this._activeItemId = -1;
+        this._activeItemId = '-1';
         this._translations = {};
         this._bindKeys = (ev) => {
             var _a;
-            const searchItemsCount = this._getSearchItemsCount();
             switch (ev.key) {
                 case 'ArrowDown':
                     ev.preventDefault();
-                    this._activeItemId = this._activeItemId === searchItemsCount - 1 ? 0 : this._activeItemId + 1;
-                    this._scroll(search_constants.SCROLL_DIRECTIONS.down);
+                    this._handleForwardListFocus();
                     break;
                 case 'ArrowUp':
                     ev.preventDefault();
-                    this._activeItemId = this._activeItemId === 0 || this._activeItemId === -1 ? searchItemsCount - 1 : this._activeItemId - 1;
-                    this._scroll(search_constants.SCROLL_DIRECTIONS.up);
+                    this._handleBackwardListFocus();
+                    break;
+                case 'ArrowLeft':
+                    ev.preventDefault();
+                    this._handleForwardGridFocus();
+                    break;
+                case 'ArrowRight':
+                    ev.preventDefault();
+                    this._handleBackwardGridFocus();
                     break;
                 case 'Enter':
                     ev.preventDefault();
-                    if (this._activeItemId === -1)
+                    if (this._activeItemId === '-1' || !this._shouldShowResults)
                         return;
                     this._handleChooseSearchItem();
                     break;
@@ -67,17 +76,69 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                     break;
             }
         };
-        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._preventScrollingOnSearchContentBrowsing = (ev) => {
+            var _a;
+            const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
+            const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
+            if (hasArrowBeenPressed && hasSearchContainerParent) {
+                ev.preventDefault();
             }
-            return searchItemsCount;
+        };
+        this._handleForwardListFocus = () => {
+            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
+            if (!$searchItemsContainer)
+                return;
+            const $listSearchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+                const searchItemId = $el.getAttribute('data-search-item-id');
+                return !!searchItemId && !searchItemId.includes('grid');
+            });
+            this._handleForwardFocus($listSearchItems);
+        };
+        this._handleForwardGridFocus = () => {
+            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
+            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 = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : '-1';
+        };
+        this._handleBackwardListFocus = () => {
+            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
+            if (!$searchItemsContainer)
+                return;
+            const $listSearchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+                const searchItemId = $el.getAttribute('data-search-item-id');
+                return !!searchItemId && !searchItemId.includes('grid');
+            });
+            this._handleBackwardFocus($listSearchItems);
+        };
+        this._handleBackwardGridFocus = () => {
+            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
+            if (!$searchItemsContainer)
+                return;
+            const $gridSearchItems = utilities.UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+                return !!$el.getAttribute('data-search-item-id');
+            });
+            this._handleBackwardFocus($gridSearchItems);
+        };
+        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 = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : '-1';
         };
         this._hideSuggesterOnClickOutside = (ev) => {
             const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
@@ -99,10 +160,21 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         try {
             this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
             this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
+            const ariaTranslations = {
+                historyGuideAriaLabel: this.settings.historyGuideAriaLabel,
+                suggesterGuideAriaLabel: this.settings.suggesterGuideAriaLabel,
+                historyItemAriaLabel: this.settings.historyItemAriaLabel,
+                suggesterItemAriaLabel: this.settings.suggesterItemAriaLabel,
+                suggesterProductItemAriaLabel: this.settings.suggesterProductItemAriaLabel,
+                suggesterProducerItemAriaLabel: this.settings.suggesterProducerItemAriaLabel
+            };
             this._searchContextObserver = new observer.Observer((searchData) => {
                 this._searchResults = searchData.results;
                 this._searchHistory = searchData.history;
-                this._translations = searchData.translations;
+                this._translations = {
+                    ...searchData.translations,
+                    ...ariaTranslations
+                };
                 this._searchPhrase = searchData.searchPhrase;
                 this._historyContext.notify({ showLoadMore: this._searchHistory.length > search_constants.SEARCH_CONFIGURATION.historyContentLimit });
                 this._historyLimitedContent = this._searchHistory.slice(0, search_constants.SEARCH_CONFIGURATION.historyContentLimit);
@@ -153,6 +225,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             const shouldShowMessage = ev.detail.searchPhrase !== '';
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage, false);
             document.addEventListener('keyup', this._bindKeys);
+            document.addEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
@@ -163,7 +236,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 !== '-1')
                 return;
             if (this._inputField.value === '') {
                 this._updateSearchView(this._inputField.value, true);
@@ -190,7 +263,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     }
     _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
         this._shouldShowMessage = shouldShowMessage;
-        this._activeItemId = -1;
+        this._activeItemId = '-1';
         this._displaySuggester(searchPhrase);
         if (!shouldUpdateSearchPhrase)
             return;
@@ -208,36 +281,42 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         }
     }
     _displayHistorySuggestions() {
-        this._shouldShowHistory = true;
-        this._shouldShowResults = false;
+        this._handleToggleHistoryAndResults({
+            shouldShowHistory: true,
+            shouldShowResults: false
+        });
     }
     _hideHistorySuggestionsAndResults() {
-        this._shouldShowHistory = false;
-        this._shouldShowResults = false;
+        this._handleToggleHistoryAndResults({
+            shouldShowHistory: false,
+            shouldShowResults: false
+        });
     }
     _displayResults() {
-        this._shouldShowHistory = false;
-        this._shouldShowResults = true;
+        this._handleToggleHistoryAndResults({
+            shouldShowHistory: false,
+            shouldShowResults: true
+        });
     }
-    _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;
-        }
-        else {
-            top = searchContainer.scrollTop == maxScrollTop ? maxScrollTop : activeItemHeight + searchContainer.scrollTop - 30;
-        }
-        if (this._activeItemId === this._getSearchItemsCount() - 1) {
-            top = maxScrollTop;
-        }
-        if (this._activeItemId === 0) {
-            top = 0;
+    _handleToggleHistoryAndResults({ shouldShowHistory, shouldShowResults }) {
+        this._shouldShowHistory = shouldShowHistory;
+        this._shouldShowResults = shouldShowResults;
+        this._toggleSearchInputAria(shouldShowHistory, shouldShowResults);
+    }
+    _toggleSearchInputAria(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');
+            return;
         }
-        searchContainer === null || searchContainer === void 0 ? void 0 : searchContainer.scrollTo({ top, behavior: 'smooth' });
+        $input.setAttribute('aria-expanded', 'true');
+        if (shouldShowHistory)
+            $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
+        if (shouldShowResults)
+            $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
     }
     _handleChooseSearchItem() {
         const activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
@@ -248,7 +327,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     }
     _resetSearchView() {
         this._shouldShowMessage = false;
-        this._activeItemId = -1;
+        this._activeItemId = '-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();
@@ -296,12 +375,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                             module-instance-id="${this.moduleInstanceId}"
                         ></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}"
                                 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}"
@@ -365,7 +446,7 @@ 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(),

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,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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -27,7 +27,7 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
     clear: 'clearSearchPhrase',
     submit: 'submitSearchPhrase',
     close: 'close',
-    search: 'search',
+    search: 'performSearch',
     updateSearchPhrase: 'updateSearchPhrase',
     focusin: 'searchFocusIn',
     keyup: 'searchKeyUp'

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

@@ -11,6 +11,7 @@ var icon_constants = require('../../../../icon/icon_constants.js');
 var observer = require('../../../../../core/classes/observer/observer.js');
 var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
 var ref_js = require('lit-html/directives/ref.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');
 var repeat = require('../../../../../../../../external/lit/external/lit-html/directives/repeat.js');
@@ -19,6 +20,7 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
     constructor() {
         super(...arguments);
         this.buttonRef = ref_js.createRef();
+        this._loadMoreButtonId = v4['default']();
         this.history = [];
         this.translations = {};
     }
@@ -46,7 +48,7 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
 
                 <ul>
                     ${repeat.repeat(this.history, (historyElement, index) => lit.html ` <li
-                            class="${search_constants.SEARCH_CLASS_NAMES.item} ${index === this.activeItemId ? search_constants.SEARCH_CLASS_NAMES.itemActive : ''}"
+                            class="${search_constants.SEARCH_CLASS_NAMES.item} ${String(index) === this.activeItemId ? search_constants.SEARCH_CLASS_NAMES.itemActive : ''}"
                         >
                             <h-search-history-select
                                 item-label="${historyElement.label}"
@@ -54,13 +56,14 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
                                 data-suggested-value="${historyElement.label}"
                                 data-search-item-id="${index}"
                                 module-instance-id="${this.moduleInstanceId}"
+                                aria-label=${this.translations.historyAriaLabel ? `${this.translations.historyAriaLabel} ${historyElement.label}` : undefined}
                             >
                                 <h-icon icon-name="icon-clock"></h-icon>
 
                                 <span class="${search_constants.SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
                             </h-search-history-select>
 
-                            <h-search-history-remove item-id="${historyElement.id}">
+                            <h-search-history-remove data-search-item-id="${index}-grid" item-id="${historyElement.id}">
                                 <h-icon
                                     icon-name="icon-x"
                                     clickable=${true}
@@ -71,7 +74,11 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
                         </li>`)}
                 </ul>
 
-                <h-search-history-load-more class="${search_constants.SEARCH_CLASS_NAMES.historyLoadMore}" ${ref_js.ref(this.buttonRef)}>
+                <h-search-history-load-more
+                    class="${search_constants.SEARCH_CLASS_NAMES.historyLoadMore}"
+                    data-search-item-id="${this._loadMoreButtonId}"
+                    ${ref_js.ref(this.buttonRef)}
+                >
                     ${this.translations.loadMore}
                 </h-search-history-load-more>`);
     }
@@ -81,8 +88,8 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Array)
 ], exports.HSearchHistory.prototype, "history", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], exports.HSearchHistory.prototype, "activeItemId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object }),

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.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;AACA,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/input/search_input.js

@@ -15,8 +15,8 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
     }
     connectedCallback() {
         super.connectedCallback();
-        this._input = this.querySelector('input[type="search"]');
-        if (!this._input) {
+        this.input = this.querySelector('input[type="search"]');
+        if (!this.input) {
             throw new Error('Search input not found');
         }
         this._setupInitialValue();
@@ -28,7 +28,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         if (!searchPhraseRegArray)
             return;
         const searchQuery = searchPhraseRegArray[1].replace(/\+/g, ' ');
-        this._input.value = decodeURIComponent(this._deserializeInputPhrase(searchQuery));
+        this.input.value = decodeURIComponent(this._deserializeInputPhrase(searchQuery));
     }
     _deserializeInputPhrase(value) {
         if (value.indexOf('%2f') !== -1) {
@@ -46,14 +46,14 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
         return value;
     }
     _setupListeners() {
-        this._input.addEventListener('focusin', (ev) => {
+        this.input.addEventListener('focusin', (ev) => {
             this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusin, {
                 detail: {
                     searchPhrase: ev.target.value
                 }
             });
         });
-        this._input.addEventListener('keyup', (ev) => {
+        this.input.addEventListener('keyup', (ev) => {
             if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
                 return;
             if (ev.key !== 'Enter') {
@@ -74,8 +74,8 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
                 }
             });
         });
-        this._input.addEventListener('search', (ev) => {
-            if (this._input.value !== '') {
+        this.input.addEventListener('search', (ev) => {
+            if (this.input.value !== '') {
                 return;
             }
             this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.search, {
@@ -88,13 +88,13 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
             if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
                 return;
             this._isSearchPhraseCleared = true;
-            this._input.value = '';
-            this._input.focus();
+            this.input.value = '';
+            this.input.focus();
         });
         document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.updateSearchPhrase, (ev) => {
             if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
                 return;
-            this._input.value = ev.detail.searchPhrase;
+            this.input.value = ev.detail.searchPhrase;
             this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
                 detail: {
                     searchPhrase: ev.detail.searchPhrase

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

@@ -31,11 +31,13 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
                 ${repeat.repeat(this.producers, (producer, index) => {
             var _a, _b;
             return lit.html `<li
-                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.producers + index ===
+                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.producers + index) ===
                 this.activeItemId
                 ? search_constants.SEARCH_CLASS_NAMES.itemActive
                 : ''}"
                         data-search-item-id="${this.initialItemIds.producers + index}"
+                        aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
+                        tabindex="0"
                     >
                         <a
                             href="${producer.url}"
@@ -56,8 +58,8 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Array)
 ], exports.HSearchProducerContent.prototype, "producers", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], exports.HSearchProducerContent.prototype, "activeItemId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object, reflect: true }),
@@ -71,6 +73,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'search-phrase' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchProducerContent.prototype, "searchPhrase", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchProducerContent.prototype, "producerAriaLabel", void 0);
 exports.HSearchProducerContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProducerContent)
 ], exports.HSearchProducerContent);

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.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,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/results/search_product_content.js

@@ -44,11 +44,13 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
                 ${repeat.repeat(this.products, (product, index) => {
             var _a, _b;
             return lit.html ` <li
-                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${this.initialItemIds.products + index ===
+                        class="${search_constants.SEARCH_CLASS_NAMES.item} ${search_constants.SEARCH_CLASS_NAMES.itemHoverable} ${String(this.initialItemIds.products + index) ===
                 this.activeItemId
                 ? search_constants.SEARCH_CLASS_NAMES.itemActive
                 : ''}"
                         data-search-item-id="${this.initialItemIds.products + index}"
+                        aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
+                        tabindex="0"
                     >
                         <a
                             href="${product.url}"
@@ -97,8 +99,8 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchProductContent.prototype, "settings", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], exports.HSearchProductContent.prototype, "activeItemId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object, reflect: true }),
@@ -108,6 +110,10 @@ tslib_es6.__decorate([
     decorators.property({ type: Object }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSearchProductContent.prototype, "translations", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchProductContent.prototype, "productAriaLabel", void 0);
 exports.HSearchProductContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProductContent)
 ], exports.HSearchProductContent);

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.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,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/results/search_results.js

@@ -7,6 +7,7 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.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');
 var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
@@ -14,6 +15,8 @@ var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
 exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this._loadMoreButtonId = v4['default']();
+        this._goToProductsForButtonId = v4['default']();
         this.searchPhrase = '';
         this.translations = {};
         this._productPage = 1;
@@ -72,6 +75,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                         locale="${this.locale}"
                         view="${this.view}"
                         module-instance-id="${this.moduleInstanceId}"
+                        .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
                     >
                     </h-search-suggestion-content>`)}
                 ${when.when((_c = this.results.products) === null || _c === void 0 ? void 0 : _c.length, () => lit.html `
@@ -82,16 +86,23 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                                 active-item-id="${this.activeItemId}"
                                 .initialItemIds="${this._getInitialItemsIds()}"
                                 .translations="${this.translations}"
+                                .productAriaLabel=${this.settings.suggesterProductItemAriaLabel}
                             ></h-search-product-content>
 
                             ${when.when(this.settings.isLoadingMoreSearchResultsEnabled, () => when.when(this._areMoreProductsAvailable(), () => lit.html `<button
                                                 class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
                                                 @click="${this.handleLoadMoreProducts}"
                                                 type="button"
+                                                data-search-item-id="${this._loadMoreButtonId}"
                                             >
                                                 ${this.translations.loadMore}
                                             </button>`), () => lit.html `
-                                    <button class="${search_constants.SEARCH_CLASS_NAMES.productButton}" @click="${this.handleGoToProductsFor}" type="button">
+                                    <button
+                                        class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
+                                        @click="${this.handleGoToProductsFor}"
+                                        type="button"
+                                        data-search-item-id="${this._goToProductsForButtonId}"
+                                    >
                                         ${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
                                     </button>
                                 `)}
@@ -104,6 +115,7 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                             .initialItemIds="${this._getInitialItemsIds()}"
                             .translations="${this.translations}"
                             search-phrase="${this.searchPhrase}"
+                            .producerAriaLabel=${this.settings.suggesterProducerItemAriaLabel}
                         ></h-search-producer-content>`)}
             `;
         });
@@ -130,8 +142,8 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearchResults.prototype, "locale", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Number, attribute: 'active-item-id' }),
-    tslib_es6.__metadata("design:type", Number)
+    decorators.property({ type: String, attribute: 'active-item-id' }),
+    tslib_es6.__metadata("design:type", String)
 ], exports.HSearchResults.prototype, "activeItemId", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Object }),

package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.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,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,8DAAkE;AACnF,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}