@getlupa/vue 0.7.8 → 0.8.0

package/dist/lupaSearch.js

@@ -3166,8 +3166,8 @@ const useSearchBoxStore = defineStore("searchBox", () => {
 const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
 const _hoisted_2$P = { class: "lupa-input-clear" };
 const _hoisted_3$B = { id: "lupa-search-box-input" };
-const _hoisted_4$r = ["value"];
-const _hoisted_5$f = ["placeholder"];
+const _hoisted_4$s = ["value"];
+const _hoisted_5$g = ["aria-label", "placeholder"];
 const _hoisted_6$9 = {
   key: 0,
   class: "lupa-close-label"
@@ -3216,6 +3216,10 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return __spreadValues({}, (_a = props.options.inputAttributes) != null ? _a : {});
     });
+    const ariaLabel = vue.computed(() => {
+      var _a;
+      return (_a = labels.value.searchInputAriaLabel) != null ? _a : "Search input";
+    });
     vue.watch(suggestedValue, () => {
       if (suggestedValue.value.override) {
         input.value = suggestedValue.value.item.suggestion;
@@ -3259,22 +3263,24 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_3$B, [
           vue.createElementVNode("input", {
             class: "lupa-hint",
+            "aria-hidden": "true",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$r),
+          }, null, 8, _hoisted_4$s),
           vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
             ref_key: "mainInput",
             ref: mainInput,
             autocomplete: "off",
+            "aria-label": ariaLabel.value,
             class: "lupa-search-box-input-field",
             "data-cy": "lupa-search-box-input-field",
             type: "text",
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$f), [
+          }), null, 16, _hoisted_5$g), [
             [vue.vModelText, inputValue.value]
           ])
         ]),
@@ -3440,11 +3446,11 @@ const _hoisted_3$A = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$q = {
+const _hoisted_4$r = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
-const _hoisted_5$e = {
+const _hoisted_5$f = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
@@ -3486,8 +3492,8 @@ const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$18)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$N, vue.toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$A, [
-          vue.createElementVNode("span", _hoisted_4$q, vue.toDisplayString(facetLabel.value), 1),
-          vue.createElementVNode("span", _hoisted_5$e, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
+          vue.createElementVNode("span", _hoisted_4$r, vue.toDisplayString(facetLabel.value), 1),
+          vue.createElementVNode("span", _hoisted_5$f, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : vue.createCommentVNode("", true)
       ]);
     };
@@ -3894,8 +3900,8 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$11 = ["innerHTML"];
 const _hoisted_2$K = { key: 0 };
 const _hoisted_3$z = { key: 1 };
-const _hoisted_4$p = { class: "lupa-search-box-custom-label" };
-const _hoisted_5$d = { class: "lupa-search-box-custom-text" };
+const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
+const _hoisted_5$e = { class: "lupa-search-box-custom-text" };
 const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
@@ -3927,8 +3933,8 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$K, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
-          vue.createElementVNode("div", _hoisted_4$p, vue.toDisplayString(label.value), 1),
-          vue.createElementVNode("div", _hoisted_5$d, vue.toDisplayString(text.value), 1)
+          vue.createElementVNode("div", _hoisted_4$q, vue.toDisplayString(label.value), 1),
+          vue.createElementVNode("div", _hoisted_5$e, vue.toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
@@ -4268,7 +4274,7 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
 const _hoisted_1$_ = ["href"];
 const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$x = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$o = {
+const _hoisted_4$p = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -4303,6 +4309,10 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
     });
+    const customDocumentHtmlAttributes = vue.computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.panelOptions).customDocumentHtmlAttributes) == null ? void 0 : _b.call(_a, props.item)) != null ? _c : {};
+    });
     const handleClick = (event) => {
       emit("product-click", {
         item: props.item,
@@ -4317,12 +4327,13 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
       isInStock.value = props.panelOptions.isInStock ? yield props.panelOptions.isInStock(props.item) : true;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("a", {
-        class: vue.normalizeClass(["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }]),
+      return vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
+        class: ["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }],
+        href: link.value
+      }, customDocumentHtmlAttributes.value, {
         "data-cy": "lupa-search-box-product",
-        href: link.value,
         onClick: handleClick
-      }, [
+      }), [
         vue.createElementVNode("div", _hoisted_2$I, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(imageElements.value, (element) => {
             return vue.openBlock(), vue.createBlock(_sfc_main$13, {
@@ -4347,7 +4358,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, [
+        addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$p, [
           vue.createVNode(_sfc_main$13, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -4357,7 +4368,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
             isInStock: isInStock.value
           }, null, 8, ["item", "element", "labels", "link", "isInStock"])
         ])) : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1$_);
+      ], 16, _hoisted_1$_);
     };
   }
 });
@@ -4583,7 +4594,7 @@ const _hoisted_3$w = {
   key: 0,
   class: "lupa-panel-title"
 };
-const _hoisted_4$n = {
+const _hoisted_4$o = {
   key: 1,
   id: "lupa-search-box-panel"
 };
@@ -4764,7 +4775,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : vue.createCommentVNode("", true)
-        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$n, [
+        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, [
           vue.createVNode(_sfc_main$1h, {
             options: _ctx.options.history,
             history: history.value,
@@ -5158,7 +5169,7 @@ const _hoisted_3$v = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$m = { key: 1 };
+const _hoisted_4$n = { key: 1 };
 const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
@@ -5209,7 +5220,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
                 class: "lupa-did-you-mean lupa-highlighted-search-text",
                 "data-cy": "did-you-mean-value",
                 onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-              }, vue.toDisplayString(didYouMeanValue.value) + " ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$m, vue.toDisplayString(label) + " ", 1))
+              }, vue.toDisplayString(didYouMeanValue.value) + " ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$n, vue.toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -5259,7 +5270,7 @@ const _hoisted_3$u = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$l = ["innerHTML"];
+const _hoisted_4$m = ["innerHTML"];
 const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsTitle",
   props: {
@@ -5308,7 +5319,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
           key: 2,
           class: "lupa-result-page-description-top",
           innerHTML: descriptionTop.value
-        }, null, 8, _hoisted_4$l)) : vue.createCommentVNode("", true)
+        }, null, 8, _hoisted_4$m)) : vue.createCommentVNode("", true)
       ]);
     };
   }
@@ -5354,7 +5365,7 @@ const _hoisted_3$s = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$k = { class: "lupa-current-filter-list" };
+const _hoisted_4$l = { class: "lupa-current-filter-list" };
 const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "CurrentFilters",
   props: {
@@ -5420,7 +5431,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           }, null, 2)) : vue.createCommentVNode("", true)
         ]),
         !_ctx.expandable || isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s, [
-          vue.createElementVNode("div", _hoisted_4$k, [
+          vue.createElementVNode("div", _hoisted_4$l, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(displayFilters), (filter) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$W, {
                 key: filter.key + "_" + filter.value,
@@ -5488,8 +5499,8 @@ const _hoisted_1$Q = {
 };
 const _hoisted_2$A = { class: "lupa-category-back" };
 const _hoisted_3$r = ["href"];
-const _hoisted_4$j = ["href"];
-const _hoisted_5$c = { class: "lupa-child-category-list" };
+const _hoisted_4$k = ["href"];
+const _hoisted_5$d = { class: "lupa-child-category-list" };
 const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "CategoryFilter",
   props: {
@@ -5593,9 +5604,9 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
             href: parentUrlLink.value,
             class: vue.normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, vue.toDisplayString(parentTitle.value), 11, _hoisted_4$j)
+          }, vue.toDisplayString(parentTitle.value), 11, _hoisted_4$k)
         ], 2),
-        vue.createElementVNode("div", _hoisted_5$c, [
+        vue.createElementVNode("div", _hoisted_5$d, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(categoryChildren.value, (child) => {
             return vue.openBlock(), vue.createBlock(_sfc_main$U, {
               key: getCategoryKey(child),
@@ -5614,8 +5625,8 @@ const _hoisted_1$P = {
 };
 const _hoisted_2$z = ["placeholder"];
 const _hoisted_3$q = { class: "lupa-terms-list" };
-const _hoisted_4$i = ["onClick"];
-const _hoisted_5$b = { class: "lupa-term-checkbox-wrapper" };
+const _hoisted_4$j = ["onClick"];
+const _hoisted_5$c = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$8 = { class: "lupa-term-checkbox-label" };
 const _hoisted_7$6 = { class: "lupa-term-label" };
 const _hoisted_8$1 = {
@@ -5711,7 +5722,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
               key: item.title,
               onClick: ($event) => handleFacetClick(item)
             }, [
-              vue.createElementVNode("div", _hoisted_5$b, [
+              vue.createElementVNode("div", _hoisted_5$c, [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(["lupa-term-checkbox", { checked: isChecked(item) }])
                 }, null, 2)
@@ -5720,7 +5731,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
                 vue.createElementVNode("span", _hoisted_7$6, vue.toDisplayString(item.title), 1),
                 _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$1, "(" + vue.toDisplayString(item.count) + ")", 1)) : vue.createCommentVNode("", true)
               ])
-            ], 10, _hoisted_4$i);
+            ], 10, _hoisted_4$j);
           }), 128))
         ]),
         displayShowMore.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -6720,12 +6731,12 @@ const _hoisted_3$p = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$h = {
+const _hoisted_4$i = {
   key: 0,
   class: "lupa-stats-range-label"
 };
-const _hoisted_5$a = { class: "lupa-stats-from" };
-const _hoisted_6$7 = ["max", "min", "pattern"];
+const _hoisted_5$b = { class: "lupa-stats-from" };
+const _hoisted_6$7 = ["max", "min", "pattern", "aria-label"];
 const _hoisted_7$5 = { key: 0 };
 const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("div", { class: "lupa-stats-separator" }, null, -1);
 const _hoisted_9 = {
@@ -6733,7 +6744,7 @@ const _hoisted_9 = {
   class: "lupa-stats-range-label"
 };
 const _hoisted_10 = { class: "lupa-stats-to" };
-const _hoisted_11 = ["max", "min", "pattern"];
+const _hoisted_11 = ["max", "min", "pattern", "aria-label"];
 const _hoisted_12 = { key: 0 };
 const _hoisted_13 = {
   key: 2,
@@ -6861,6 +6872,20 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     const sliderInputFormat = vue.computed(() => {
       return isPrice.value ? `[0-9]+([${separator.value}][0-9]{1,2})?` : void 0;
     });
+    const sliderAria = vue.computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        "aria-label": ((_b = (_a = props.options.stats) == null ? void 0 : _a.labels) == null ? void 0 : _b.sliderDotAriaLabel) ? `${(_d = (_c = props.options.stats) == null ? void 0 : _c.labels) == null ? void 0 : _d.sliderDotAriaLabel} - ${(_e = props.facet) == null ? void 0 : _e.label}` : `Range slider control dot for ${(_f = props.facet) == null ? void 0 : _f.label}`
+      };
+    });
+    const ariaLabelFrom = vue.computed(() => {
+      var _a, _b, _c, _d, _e;
+      return `${(_b = (_a = props.facet) == null ? void 0 : _a.label) != null ? _b : ""} ${(_e = (_d = (_c = props.options.stats) == null ? void 0 : _c.labels) == null ? void 0 : _d.ariaFrom) != null ? _e : rangeLabelFrom.value}`;
+    });
+    const ariaLabelTo = vue.computed(() => {
+      var _a, _b, _c, _d, _e;
+      return `${(_b = (_a = props.facet) == null ? void 0 : _a.label) != null ? _b : ""} ${(_e = (_d = (_c = props.options.stats) == null ? void 0 : _c.labels) == null ? void 0 : _d.ariaTo) != null ? _e : rangeLabelTo.value}`;
+    });
     vue.watch(currentMinValue, () => {
       innerSliderRange.value = [];
     });
@@ -6890,15 +6915,16 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
         !isInputVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, vue.toDisplayString(statsSummary.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$p, [
           vue.createElementVNode("div", null, [
-            rangeLabelFrom.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$h, vue.toDisplayString(rangeLabelFrom.value), 1)) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_5$a, [
+            rangeLabelFrom.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$i, vue.toDisplayString(rangeLabelFrom.value), 1)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_5$b, [
               vue.withDirectives(vue.createElementVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
                 type: "text",
                 maxlength: "8",
                 max: facetMax.value,
                 min: facetMin.value,
-                pattern: sliderInputFormat.value
+                pattern: sliderInputFormat.value,
+                "aria-label": ariaLabelFrom.value
               }, null, 8, _hoisted_6$7), [
                 [
                   vue.vModelText,
@@ -6920,7 +6946,8 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
                 maxlength: "8",
                 max: facetMax.value,
                 min: facetMin.value,
-                pattern: sliderInputFormat.value
+                pattern: sliderInputFormat.value,
+                "aria-label": ariaLabelTo.value
               }, null, 8, _hoisted_11), [
                 [
                   vue.vModelText,
@@ -6941,11 +6968,12 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
             max: facetMax.value,
             lazy: true,
             step: interval.value,
+            aria: sliderAria.value,
             modelValue: sliderRange.value,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => sliderRange.value = $event),
             onSlide: handleDragging,
             onEnd: handleChange
-          }, null, 8, ["min", "max", "step", "modelValue"])
+          }, null, 8, ["min", "max", "step", "aria", "modelValue"])
         ])) : vue.createCommentVNode("", true)
       ]);
     };
@@ -6954,11 +6982,11 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$N = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_2$x = { class: "lupa-term-checkbox-label" };
 const _hoisted_3$o = { class: "lupa-term-label" };
-const _hoisted_4$g = {
+const _hoisted_4$h = {
   key: 0,
   class: "lupa-term-count"
 };
-const _hoisted_5$9 = {
+const _hoisted_5$a = {
   key: 0,
   class: "lupa-facet-level"
 };
@@ -7015,10 +7043,10 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
           ]),
           vue.createElementVNode("div", _hoisted_2$x, [
             vue.createElementVNode("span", _hoisted_3$o, vue.toDisplayString(_ctx.item.title) + vue.toDisplayString(" "), 1),
-            _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$g, "(" + vue.toDisplayString(_ctx.item.count) + ")", 1)) : vue.createCommentVNode("", true)
+            _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$h, "(" + vue.toDisplayString(_ctx.item.count) + ")", 1)) : vue.createCommentVNode("", true)
           ])
         ]),
-        showChildren.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$9, [
+        showChildren.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$a, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(treeItem.value.children, (itemChild) => {
             return vue.openBlock(), vue.createBlock(_component_HierarchyFacetLevel, {
               key: itemChild.title,
@@ -7451,8 +7479,8 @@ const _hoisted_1$H = {
 };
 const _hoisted_2$t = ["onClick"];
 const _hoisted_3$m = { class: "lupa-mobile-sidebar-content" };
-const _hoisted_4$f = { class: "lupa-sidebar-top" };
-const _hoisted_5$8 = { class: "lupa-sidebar-title" };
+const _hoisted_4$g = { class: "lupa-sidebar-top" };
+const _hoisted_5$9 = { class: "lupa-sidebar-title" };
 const _hoisted_6$6 = {
   key: 0,
   class: "lupa-sidebar-filter-count"
@@ -7490,8 +7518,8 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
           onClick: vue.withModifiers(handleMobileToggle, ["stop"])
         }, null, 8, _hoisted_2$t),
         vue.createElementVNode("div", _hoisted_3$m, [
-          vue.createElementVNode("div", _hoisted_4$f, [
-            vue.createElementVNode("div", _hoisted_5$8, [
+          vue.createElementVNode("div", _hoisted_4$g, [
+            vue.createElementVNode("div", _hoisted_5$9, [
               vue.createTextVNode(vue.toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$6, vue.toDisplayString(vue.unref(currentFilterCount)), 1)) : vue.createCommentVNode("", true)
             ]),
@@ -7517,7 +7545,7 @@ const _hoisted_3$l = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$e = { key: 2 };
+const _hoisted_4$f = { key: 2 };
 const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
@@ -7558,7 +7586,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                 return handleNavigation(e, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
               }
             }, vue.toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$s)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$l, vue.toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$e, " / ")) : vue.createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$f, " / ")) : vue.createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -7659,7 +7687,7 @@ const _hoisted_2$r = {
   class: "lupa-page-number-separator"
 };
 const _hoisted_3$k = ["onClick"];
-const _hoisted_4$d = {
+const _hoisted_4$e = {
   key: 0,
   class: "lupa-page-number-separator"
 };
@@ -7750,7 +7778,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
           }, vue.toDisplayString(page), 11, _hoisted_3$k);
         }), 128)),
         showLastPage.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$d, "...")) : vue.createCommentVNode("", true),
+          showLastPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, "...")) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: "lupa-page-number lupa-page-number-last",
             onClick: _cache[2] || (_cache[2] = () => {
@@ -7775,6 +7803,7 @@ const _hoisted_1$B = {
 };
 const _hoisted_2$q = { id: "lupa-select" };
 const _hoisted_3$j = { class: "lupa-select-label" };
+const _hoisted_4$d = ["aria-label"];
 const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsPageSize",
   props: {
@@ -7797,6 +7826,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("label", _hoisted_3$j, vue.toDisplayString(_ctx.label), 1),
           vue.createElementVNode("select", {
             class: "lupa-select-dropdown",
+            "aria-label": _ctx.label,
             "data-cy": "lupa-page-size-select-dropdown",
             onChange: handleSelect,
             ref_key: "select",
@@ -7805,7 +7835,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options.sizes, (option) => {
               return vue.openBlock(), vue.createElementBlock("option", { key: option }, vue.toDisplayString(option), 1);
             }), 128))
-          ], 544)
+          ], 40, _hoisted_4$d)
         ])
       ]);
     };
@@ -7817,7 +7847,8 @@ const _hoisted_1$A = {
 };
 const _hoisted_2$p = { id: "lupa-select" };
 const _hoisted_3$i = { class: "lupa-select-label" };
-const _hoisted_4$c = ["value"];
+const _hoisted_4$c = ["aria-label"];
+const _hoisted_5$8 = ["value"];
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsSort",
   props: {
@@ -7871,6 +7902,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("label", _hoisted_3$i, vue.toDisplayString(_ctx.options.label), 1),
           vue.withDirectives(vue.createElementVNode("select", {
             class: "lupa-select-dropdown",
+            "aria-label": _ctx.options.label,
             "data-cy": "lupa-sort-select-dropdown",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedKey.value = $event),
             onChange: handleSelect,
@@ -7880,9 +7912,9 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
               return vue.openBlock(), vue.createElementBlock("option", {
                 key: option.key,
                 value: option.key
-              }, vue.toDisplayString(option.label), 9, _hoisted_4$c);
+              }, vue.toDisplayString(option.label), 9, _hoisted_5$8);
             }), 128))
-          ], 544), [
+          ], 40, _hoisted_4$c), [
             [vue.vModelSelect, selectedKey.value]
           ])
         ])
@@ -8864,6 +8896,10 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       }
       return (_b = (_a = props.options) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate;
     });
+    const customDocumentHtmlAttributes = vue.computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.options).customDocumentHtmlAttributes) == null ? void 0 : _b.call(_a, props.product)) != null ? _c : {};
+    });
     const getGroupElements = (group) => {
       var _a, _b;
       return (_b = (_a = props.options.elements) == null ? void 0 : _a.filter((e) => e.group === group)) != null ? _b : [];
@@ -8920,12 +8956,11 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       var _a;
-      return vue.openBlock(), vue.createElementBlock("div", {
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         id: "lupa-search-result-product-card",
         "data-cy": "lupa-search-result-product-card",
-        class: vue.normalizeClass(["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]),
-        onClick: handleClick
-      }, [
+        class: ["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]
+      }, customDocumentHtmlAttributes.value, { onClick: handleClick }), [
         vue.createVNode(_sfc_main$w, { options: badgesOptions.value }, null, 8, ["options"]),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["lupa-search-result-product-contents", listLayoutClass.value])
@@ -8987,7 +9022,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
             ], 2);
           }), 128))
         ], 2)
-      ], 2);
+      ], 16);
     };
   }
 });
@@ -9314,7 +9349,8 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
         "queryKey",
         "idKey",
         "titleKey",
-        "routingBehavior"
+        "routingBehavior",
+        "customDocumentHtmlAttributes"
       ]);
     });
     const similarQueriesLabels = vue.computed(() => {

package/dist/lupaSearch.mjs

@@ -3164,8 +3164,8 @@ const useSearchBoxStore = defineStore("searchBox", () => {
 const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
 const _hoisted_2$P = { class: "lupa-input-clear" };
 const _hoisted_3$B = { id: "lupa-search-box-input" };
-const _hoisted_4$r = ["value"];
-const _hoisted_5$f = ["placeholder"];
+const _hoisted_4$s = ["value"];
+const _hoisted_5$g = ["aria-label", "placeholder"];
 const _hoisted_6$9 = {
   key: 0,
   class: "lupa-close-label"
@@ -3214,6 +3214,10 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
       var _a;
       return __spreadValues({}, (_a = props.options.inputAttributes) != null ? _a : {});
     });
+    const ariaLabel = computed(() => {
+      var _a;
+      return (_a = labels.value.searchInputAriaLabel) != null ? _a : "Search input";
+    });
     watch(suggestedValue, () => {
       if (suggestedValue.value.override) {
         input.value = suggestedValue.value.item.suggestion;
@@ -3257,22 +3261,24 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_3$B, [
           createElementVNode("input", {
             class: "lupa-hint",
+            "aria-hidden": "true",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$r),
+          }, null, 8, _hoisted_4$s),
           withDirectives(createElementVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
             ref_key: "mainInput",
             ref: mainInput,
             autocomplete: "off",
+            "aria-label": ariaLabel.value,
             class: "lupa-search-box-input-field",
             "data-cy": "lupa-search-box-input-field",
             type: "text",
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$f), [
+          }), null, 16, _hoisted_5$g), [
             [vModelText, inputValue.value]
           ])
         ]),
@@ -3438,11 +3444,11 @@ const _hoisted_3$A = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$q = {
+const _hoisted_4$r = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
-const _hoisted_5$e = {
+const _hoisted_5$f = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
@@ -3484,8 +3490,8 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$18)) : (openBlock(), createElementBlock("div", _hoisted_2$N, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$A, [
-          createElementVNode("span", _hoisted_4$q, toDisplayString(facetLabel.value), 1),
-          createElementVNode("span", _hoisted_5$e, toDisplayString(_ctx.suggestion.facet.title), 1)
+          createElementVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
+          createElementVNode("span", _hoisted_5$f, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -3892,8 +3898,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$11 = ["innerHTML"];
 const _hoisted_2$K = { key: 0 };
 const _hoisted_3$z = { key: 1 };
-const _hoisted_4$p = { class: "lupa-search-box-custom-label" };
-const _hoisted_5$d = { class: "lupa-search-box-custom-text" };
+const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
+const _hoisted_5$e = { class: "lupa-search-box-custom-text" };
 const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
@@ -3925,8 +3931,8 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$K, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$z, [
-          createElementVNode("div", _hoisted_4$p, toDisplayString(label.value), 1),
-          createElementVNode("div", _hoisted_5$d, toDisplayString(text.value), 1)
+          createElementVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
+          createElementVNode("div", _hoisted_5$e, toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
@@ -4266,7 +4272,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
 const _hoisted_1$_ = ["href"];
 const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$x = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$o = {
+const _hoisted_4$p = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -4301,6 +4307,10 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
       var _a;
       return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
     });
+    const customDocumentHtmlAttributes = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.panelOptions).customDocumentHtmlAttributes) == null ? void 0 : _b.call(_a, props.item)) != null ? _c : {};
+    });
     const handleClick = (event) => {
       emit("product-click", {
         item: props.item,
@@ -4315,12 +4325,13 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
       isInStock.value = props.panelOptions.isInStock ? yield props.panelOptions.isInStock(props.item) : true;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("a", {
-        class: normalizeClass(["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }]),
+      return openBlock(), createElementBlock("a", mergeProps({
+        class: ["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }],
+        href: link.value
+      }, customDocumentHtmlAttributes.value, {
         "data-cy": "lupa-search-box-product",
-        href: link.value,
         onClick: handleClick
-      }, [
+      }), [
         createElementVNode("div", _hoisted_2$I, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
             return openBlock(), createBlock(_sfc_main$13, {
@@ -4345,7 +4356,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
+        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
           createVNode(_sfc_main$13, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -4355,7 +4366,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
             isInStock: isInStock.value
           }, null, 8, ["item", "element", "labels", "link", "isInStock"])
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$_);
+      ], 16, _hoisted_1$_);
     };
   }
 });
@@ -4581,7 +4592,7 @@ const _hoisted_3$w = {
   key: 0,
   class: "lupa-panel-title"
 };
-const _hoisted_4$n = {
+const _hoisted_4$o = {
   key: 1,
   id: "lupa-search-box-panel"
 };
@@ -4762,7 +4773,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
-        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
           createVNode(_sfc_main$1h, {
             options: _ctx.options.history,
             history: history.value,
@@ -5156,7 +5167,7 @@ const _hoisted_3$v = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$m = { key: 1 };
+const _hoisted_4$n = { key: 1 };
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
@@ -5207,7 +5218,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
                 class: "lupa-did-you-mean lupa-highlighted-search-text",
                 "data-cy": "did-you-mean-value",
                 onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$m, toDisplayString(label) + " ", 1))
+              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$n, toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : createCommentVNode("", true)
@@ -5257,7 +5268,7 @@ const _hoisted_3$u = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$l = ["innerHTML"];
+const _hoisted_4$m = ["innerHTML"];
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsTitle",
   props: {
@@ -5306,7 +5317,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           key: 2,
           class: "lupa-result-page-description-top",
           innerHTML: descriptionTop.value
-        }, null, 8, _hoisted_4$l)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_4$m)) : createCommentVNode("", true)
       ]);
     };
   }
@@ -5352,7 +5363,7 @@ const _hoisted_3$s = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$k = { class: "lupa-current-filter-list" };
+const _hoisted_4$l = { class: "lupa-current-filter-list" };
 const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "CurrentFilters",
   props: {
@@ -5418,7 +5429,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           }, null, 2)) : createCommentVNode("", true)
         ]),
         !_ctx.expandable || isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3$s, [
-          createElementVNode("div", _hoisted_4$k, [
+          createElementVNode("div", _hoisted_4$l, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayFilters), (filter) => {
               return openBlock(), createBlock(_sfc_main$W, {
                 key: filter.key + "_" + filter.value,
@@ -5486,8 +5497,8 @@ const _hoisted_1$Q = {
 };
 const _hoisted_2$A = { class: "lupa-category-back" };
 const _hoisted_3$r = ["href"];
-const _hoisted_4$j = ["href"];
-const _hoisted_5$c = { class: "lupa-child-category-list" };
+const _hoisted_4$k = ["href"];
+const _hoisted_5$d = { class: "lupa-child-category-list" };
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "CategoryFilter",
   props: {
@@ -5591,9 +5602,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             href: parentUrlLink.value,
             class: normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, toDisplayString(parentTitle.value), 11, _hoisted_4$j)
+          }, toDisplayString(parentTitle.value), 11, _hoisted_4$k)
         ], 2),
-        createElementVNode("div", _hoisted_5$c, [
+        createElementVNode("div", _hoisted_5$d, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(categoryChildren.value, (child) => {
             return openBlock(), createBlock(_sfc_main$U, {
               key: getCategoryKey(child),
@@ -5612,8 +5623,8 @@ const _hoisted_1$P = {
 };
 const _hoisted_2$z = ["placeholder"];
 const _hoisted_3$q = { class: "lupa-terms-list" };
-const _hoisted_4$i = ["onClick"];
-const _hoisted_5$b = { class: "lupa-term-checkbox-wrapper" };
+const _hoisted_4$j = ["onClick"];
+const _hoisted_5$c = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$8 = { class: "lupa-term-checkbox-label" };
 const _hoisted_7$6 = { class: "lupa-term-label" };
 const _hoisted_8$1 = {
@@ -5709,7 +5720,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
               key: item.title,
               onClick: ($event) => handleFacetClick(item)
             }, [
-              createElementVNode("div", _hoisted_5$b, [
+              createElementVNode("div", _hoisted_5$c, [
                 createElementVNode("span", {
                   class: normalizeClass(["lupa-term-checkbox", { checked: isChecked(item) }])
                 }, null, 2)
@@ -5718,7 +5729,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", _hoisted_7$6, toDisplayString(item.title), 1),
                 _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_8$1, "(" + toDisplayString(item.count) + ")", 1)) : createCommentVNode("", true)
               ])
-            ], 10, _hoisted_4$i);
+            ], 10, _hoisted_4$j);
           }), 128))
         ]),
         displayShowMore.value ? (openBlock(), createElementBlock("div", {
@@ -6718,12 +6729,12 @@ const _hoisted_3$p = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$h = {
+const _hoisted_4$i = {
   key: 0,
   class: "lupa-stats-range-label"
 };
-const _hoisted_5$a = { class: "lupa-stats-from" };
-const _hoisted_6$7 = ["max", "min", "pattern"];
+const _hoisted_5$b = { class: "lupa-stats-from" };
+const _hoisted_6$7 = ["max", "min", "pattern", "aria-label"];
 const _hoisted_7$5 = { key: 0 };
 const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", { class: "lupa-stats-separator" }, null, -1);
 const _hoisted_9 = {
@@ -6731,7 +6742,7 @@ const _hoisted_9 = {
   class: "lupa-stats-range-label"
 };
 const _hoisted_10 = { class: "lupa-stats-to" };
-const _hoisted_11 = ["max", "min", "pattern"];
+const _hoisted_11 = ["max", "min", "pattern", "aria-label"];
 const _hoisted_12 = { key: 0 };
 const _hoisted_13 = {
   key: 2,
@@ -6859,6 +6870,20 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const sliderInputFormat = computed(() => {
       return isPrice.value ? `[0-9]+([${separator.value}][0-9]{1,2})?` : void 0;
     });
+    const sliderAria = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        "aria-label": ((_b = (_a = props.options.stats) == null ? void 0 : _a.labels) == null ? void 0 : _b.sliderDotAriaLabel) ? `${(_d = (_c = props.options.stats) == null ? void 0 : _c.labels) == null ? void 0 : _d.sliderDotAriaLabel} - ${(_e = props.facet) == null ? void 0 : _e.label}` : `Range slider control dot for ${(_f = props.facet) == null ? void 0 : _f.label}`
+      };
+    });
+    const ariaLabelFrom = computed(() => {
+      var _a, _b, _c, _d, _e;
+      return `${(_b = (_a = props.facet) == null ? void 0 : _a.label) != null ? _b : ""} ${(_e = (_d = (_c = props.options.stats) == null ? void 0 : _c.labels) == null ? void 0 : _d.ariaFrom) != null ? _e : rangeLabelFrom.value}`;
+    });
+    const ariaLabelTo = computed(() => {
+      var _a, _b, _c, _d, _e;
+      return `${(_b = (_a = props.facet) == null ? void 0 : _a.label) != null ? _b : ""} ${(_e = (_d = (_c = props.options.stats) == null ? void 0 : _c.labels) == null ? void 0 : _d.ariaTo) != null ? _e : rangeLabelTo.value}`;
+    });
     watch(currentMinValue, () => {
       innerSliderRange.value = [];
     });
@@ -6888,15 +6913,16 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$O, [
         !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$y, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$p, [
           createElementVNode("div", null, [
-            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$h, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_5$a, [
+            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$i, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_5$b, [
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
                 type: "text",
                 maxlength: "8",
                 max: facetMax.value,
                 min: facetMin.value,
-                pattern: sliderInputFormat.value
+                pattern: sliderInputFormat.value,
+                "aria-label": ariaLabelFrom.value
               }, null, 8, _hoisted_6$7), [
                 [
                   vModelText,
@@ -6918,7 +6944,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                 maxlength: "8",
                 max: facetMax.value,
                 min: facetMin.value,
-                pattern: sliderInputFormat.value
+                pattern: sliderInputFormat.value,
+                "aria-label": ariaLabelTo.value
               }, null, 8, _hoisted_11), [
                 [
                   vModelText,
@@ -6939,11 +6966,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             max: facetMax.value,
             lazy: true,
             step: interval.value,
+            aria: sliderAria.value,
             modelValue: sliderRange.value,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => sliderRange.value = $event),
             onSlide: handleDragging,
             onEnd: handleChange
-          }, null, 8, ["min", "max", "step", "modelValue"])
+          }, null, 8, ["min", "max", "step", "aria", "modelValue"])
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -6952,11 +6980,11 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
 const _hoisted_1$N = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_2$x = { class: "lupa-term-checkbox-label" };
 const _hoisted_3$o = { class: "lupa-term-label" };
-const _hoisted_4$g = {
+const _hoisted_4$h = {
   key: 0,
   class: "lupa-term-count"
 };
-const _hoisted_5$9 = {
+const _hoisted_5$a = {
   key: 0,
   class: "lupa-facet-level"
 };
@@ -7013,10 +7041,10 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           ]),
           createElementVNode("div", _hoisted_2$x, [
             createElementVNode("span", _hoisted_3$o, toDisplayString(_ctx.item.title) + toDisplayString(" "), 1),
-            _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$g, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
+            _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$h, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
           ])
         ]),
-        showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_5$9, [
+        showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_5$a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(treeItem.value.children, (itemChild) => {
             return openBlock(), createBlock(_component_HierarchyFacetLevel, {
               key: itemChild.title,
@@ -7449,8 +7477,8 @@ const _hoisted_1$H = {
 };
 const _hoisted_2$t = ["onClick"];
 const _hoisted_3$m = { class: "lupa-mobile-sidebar-content" };
-const _hoisted_4$f = { class: "lupa-sidebar-top" };
-const _hoisted_5$8 = { class: "lupa-sidebar-title" };
+const _hoisted_4$g = { class: "lupa-sidebar-top" };
+const _hoisted_5$9 = { class: "lupa-sidebar-title" };
 const _hoisted_6$6 = {
   key: 0,
   class: "lupa-sidebar-filter-count"
@@ -7488,8 +7516,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           onClick: withModifiers(handleMobileToggle, ["stop"])
         }, null, 8, _hoisted_2$t),
         createElementVNode("div", _hoisted_3$m, [
-          createElementVNode("div", _hoisted_4$f, [
-            createElementVNode("div", _hoisted_5$8, [
+          createElementVNode("div", _hoisted_4$g, [
+            createElementVNode("div", _hoisted_5$9, [
               createTextVNode(toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (openBlock(), createElementBlock("span", _hoisted_6$6, toDisplayString(unref(currentFilterCount)), 1)) : createCommentVNode("", true)
             ]),
@@ -7515,7 +7543,7 @@ const _hoisted_3$l = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$e = { key: 2 };
+const _hoisted_4$f = { key: 2 };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
@@ -7556,7 +7584,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 return handleNavigation(e, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
               }
             }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$s)) : (openBlock(), createElementBlock("span", _hoisted_3$l, toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$e, " / ")) : createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$f, " / ")) : createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -7657,7 +7685,7 @@ const _hoisted_2$r = {
   class: "lupa-page-number-separator"
 };
 const _hoisted_3$k = ["onClick"];
-const _hoisted_4$d = {
+const _hoisted_4$e = {
   key: 0,
   class: "lupa-page-number-separator"
 };
@@ -7748,7 +7776,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           }, toDisplayString(page), 11, _hoisted_3$k);
         }), 128)),
         showLastPage.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$d, "...")) : createCommentVNode("", true),
+          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$e, "...")) : createCommentVNode("", true),
           createElementVNode("div", {
             class: "lupa-page-number lupa-page-number-last",
             onClick: _cache[2] || (_cache[2] = () => {
@@ -7773,6 +7801,7 @@ const _hoisted_1$B = {
 };
 const _hoisted_2$q = { id: "lupa-select" };
 const _hoisted_3$j = { class: "lupa-select-label" };
+const _hoisted_4$d = ["aria-label"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsPageSize",
   props: {
@@ -7795,6 +7824,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           createElementVNode("label", _hoisted_3$j, toDisplayString(_ctx.label), 1),
           createElementVNode("select", {
             class: "lupa-select-dropdown",
+            "aria-label": _ctx.label,
             "data-cy": "lupa-page-size-select-dropdown",
             onChange: handleSelect,
             ref_key: "select",
@@ -7803,7 +7833,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options.sizes, (option) => {
               return openBlock(), createElementBlock("option", { key: option }, toDisplayString(option), 1);
             }), 128))
-          ], 544)
+          ], 40, _hoisted_4$d)
         ])
       ]);
     };
@@ -7815,7 +7845,8 @@ const _hoisted_1$A = {
 };
 const _hoisted_2$p = { id: "lupa-select" };
 const _hoisted_3$i = { class: "lupa-select-label" };
-const _hoisted_4$c = ["value"];
+const _hoisted_4$c = ["aria-label"];
+const _hoisted_5$8 = ["value"];
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsSort",
   props: {
@@ -7869,6 +7900,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           createElementVNode("label", _hoisted_3$i, toDisplayString(_ctx.options.label), 1),
           withDirectives(createElementVNode("select", {
             class: "lupa-select-dropdown",
+            "aria-label": _ctx.options.label,
             "data-cy": "lupa-sort-select-dropdown",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedKey.value = $event),
             onChange: handleSelect,
@@ -7878,9 +7910,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               return openBlock(), createElementBlock("option", {
                 key: option.key,
                 value: option.key
-              }, toDisplayString(option.label), 9, _hoisted_4$c);
+              }, toDisplayString(option.label), 9, _hoisted_5$8);
             }), 128))
-          ], 544), [
+          ], 40, _hoisted_4$c), [
             [vModelSelect, selectedKey.value]
           ])
         ])
@@ -8862,6 +8894,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
       return (_b = (_a = props.options) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate;
     });
+    const customDocumentHtmlAttributes = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.options).customDocumentHtmlAttributes) == null ? void 0 : _b.call(_a, props.product)) != null ? _c : {};
+    });
     const getGroupElements = (group) => {
       var _a, _b;
       return (_b = (_a = props.options.elements) == null ? void 0 : _a.filter((e) => e.group === group)) != null ? _b : [];
@@ -8918,12 +8954,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock("div", mergeProps({
         id: "lupa-search-result-product-card",
         "data-cy": "lupa-search-result-product-card",
-        class: normalizeClass(["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]),
-        onClick: handleClick
-      }, [
+        class: ["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]
+      }, customDocumentHtmlAttributes.value, { onClick: handleClick }), [
         createVNode(_sfc_main$w, { options: badgesOptions.value }, null, 8, ["options"]),
         createElementVNode("div", {
           class: normalizeClass(["lupa-search-result-product-contents", listLayoutClass.value])
@@ -8985,7 +9020,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             ], 2);
           }), 128))
         ], 2)
-      ], 2);
+      ], 16);
     };
   }
 });
@@ -9312,7 +9347,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         "queryKey",
         "idKey",
         "titleKey",
-        "routingBehavior"
+        "routingBehavior",
+        "customDocumentHtmlAttributes"
       ]);
     });
     const similarQueriesLabels = computed(() => {

package/dist/src/types/General.d.ts

@@ -1,5 +1,6 @@
 import type { AnalyticsOptions } from './AnalyticsOptions';
-import type { Environment as SdkEnvironment } from '@getlupa/client-sdk/Types';
+import type { Environment as SdkEnvironment, Document } from '@getlupa/client-sdk/Types';
+export type CustomDocumentHtmlAttributes = (doc: Document) => Record<string, unknown>;
 export type SdkOptions = {
     environment: SdkEnvironment;
     customBaseUrl?: string;

package/dist/src/types/search-box/SearchBoxOptions.d.ts

@@ -23,6 +23,7 @@ export type SearchBoxOptionLabels = {
     priceSeparator?: string;
     defaultFacetLabel?: string;
     close?: string;
+    searchInputAriaLabel?: string;
 };
 export type SearchBoxOptionLinks = {
     searchResults: string;

package/dist/src/types/search-box/SearchBoxPanel.d.ts

@@ -1,5 +1,6 @@
 import type { DocumentElement } from '../DocumentElement';
 import type { Document } from '@getlupa/client-sdk/Types';
+import { CustomDocumentHtmlAttributes } from '../General';
 export declare enum SearchBoxPanelType {
     SUGGESTION = "suggestion",
     DOCUMENT = "document"
@@ -25,6 +26,7 @@ export type DocumentSearchBoxPanel = SearchBoxPanelBase & {
     customClassName?: string;
     searchBySuggestion?: boolean;
     isInStock?: (doc: Document) => boolean;
+    customDocumentHtmlAttributes?: CustomDocumentHtmlAttributes;
 };
 export type SuggestionSearchBoxPanel = SearchBoxPanelBase & {
     type: SearchBoxPanelType.SUGGESTION;

package/dist/src/types/search-results/SearchResultsOptions.d.ts

@@ -168,6 +168,9 @@ export type ResultFacetOptions = {
         labels?: {
             from?: string;
             to?: string;
+            ariaFrom?: string;
+            ariaTo?: string;
+            sliderDotAriaLabel?: string;
         };
     };
     facetValueCountLimit?: number;

package/dist/src/types/search-results/SearchResultsProductCardOptions.d.ts

@@ -3,6 +3,7 @@ import type { DocumentElement } from '../DocumentElement';
 import type { BadgeElement, BadgeGenerateOptions } from './BadgeOptions';
 import type { RoutingBehavior } from './RoutingBehavior';
 import type { SearchResultsOptionLabels } from './SearchResultsOptions';
+import { CustomDocumentHtmlAttributes } from '../General';
 export type SearchResultsProductCardOptions = {
     labels: SearchResultsOptionLabels;
     routingBehavior?: RoutingBehavior;
@@ -15,6 +16,7 @@ export type SearchResultsProductCardOptions = {
     queryKey: string;
     idKey?: string;
     titleKey?: string;
+    customDocumentHtmlAttributes?: CustomDocumentHtmlAttributes;
 };
 export type SearchResultBadgeOptions = {
     anchor: AnchorPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",