@depict-ai/ui 4.9.2 → 4.9.4

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.9.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.9.4";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -9985,15 +9985,18 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
     $8tj43$effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected());
+        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected()),
+        _v$4 = isSelected === null || isSelected === void 0 ? void 0 : isSelected();
       _v$ !== _p$.e && $8tj43$setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $8tj43$setAttribute(_el$4, "data-search-result-id", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$4.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && $8tj43$setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $8tj43$runHydrationEvents();
     return _el$4;
@@ -10983,7 +10986,7 @@ var $584c06c09cf4609d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class=b
   $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<button type=button class=clear>`),
   $584c06c09cf4609d$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=spacer>`),
   $584c06c09cf4609d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<button class="submit major"type=button>`),
-  $584c06c09cf4609d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+  $584c06c09cf4609d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
 function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -10998,7 +11001,9 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
-    class_: class_
+    class_: class_,
+    setSearchRoleOnContainer_ = true,
+    ariaControls: ariaControls
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -11097,6 +11102,13 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       [_el$17, _co$5] = $8tj43$getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $8tj43$getNextMarker(_el$18.nextSibling);
+    $8tj43$spread(_el$3, $8tj43$mergeProps1({
+      get ["class"]() {
+        return "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+      }
+    }, setSearchRoleOnContainer_ && {
+      role: "search"
+    }), false, true);
     $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -11138,61 +11150,85 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       }
     }), true);
     $8tj43$insert(_el$5, isNewModal && $8tj43$createComponent(ClearButton, {}), _el$8, _co$);
-    _el$6.$$pointerdown = _ref3 => {
-      let {
-        pointerType: pointerType
-      } = _ref3;
-      // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
-      if (pointerType === "mouse") {
-        const handler = $8tj43$catchify1(_ref4 => {
-          let {
-            pointerType: pointerType,
-            target: target
-          } = _ref4;
-          if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
-          input_element.click();
-        });
-        window.addEventListener("pointerup", handler, {
-          once: true
-        });
-        $8tj43$runWithOwner(owner_of_field_element, () => $8tj43$onCleanup(() => window.removeEventListener("pointerup", handler)));
-      }
-    };
-    $8tj43$addEventListener(_el$6, "select", $8tj43$catchify1(() => {
-      if (disabled_)
-        // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
-        return;
-      if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
-        // everything was selected, clear filters on next submit on next input
-        input_element.addEventListener("input", $8tj43$catchify1(() => clear_filters_(false)),
-        // We don't count this as user triggered since it wasn't explicit
-        {
-          once: true
-        });
-    }));
-    $8tj43$addEventListener(_el$6, "input", $8tj43$catchify1(() => {
-      const {
-        value: value
-      } = input_element;
-      if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      setSearchFieldValue(value);
-    }), true);
-    $8tj43$addEventListener(_el$6, "keydown", $8tj43$catchify1(e => {
-      if (disabled_) {
-        if (e.key !== "Tab" && e.key !== "Shift")
-          // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
-          input_element.click();
-      } else if (e.key === "Enter") {
-        const dont_submit = override_on_enter_ === null || override_on_enter_ === void 0 ? void 0 : override_on_enter_(e);
-        if (!dont_submit) submit_query_();
-      }
-    }), true);
     var _ref$2 = $8tj43$catchify1(el => {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
     typeof _ref$2 === "function" && $8tj43$use(_ref$2, _el$6);
     _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $8tj43$spread(_el$6, $8tj43$mergeProps1(() => setSearchRoleOnContainer_ ? {
+      "aria-label": i18n_.search_field_field_aria_label_()
+    } :
+    // Searchbox announces basically the same as our aria-label, we could explore always using searchbox in the future
+    {
+      role: "searchbox"
+    }, {
+      get value() {
+        return searchFieldValue();
+      },
+      get onKeyDown() {
+        return $8tj43$catchify1(e => {
+          if (disabled_) {
+            if (e.key !== "Tab" && e.key !== "Shift")
+              // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
+              input_element.click();
+          } else if (e.key === "Enter") {
+            const dont_submit = override_on_enter_ === null || override_on_enter_ === void 0 ? void 0 : override_on_enter_(e);
+            if (!dont_submit) submit_query_();
+          }
+        });
+      },
+      get onInput() {
+        return $8tj43$catchify1(() => {
+          const {
+            value: value
+          } = input_element;
+          if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
+          setSearchFieldValue(value);
+        });
+      },
+      get onSelect() {
+        return $8tj43$catchify1(() => {
+          if (disabled_)
+            // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
+            return;
+          if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
+            // everything was selected, clear filters on next submit on next input
+            input_element.addEventListener("input", $8tj43$catchify1(() => clear_filters_(false)),
+            // We don't count this as user triggered since it wasn't explicit
+            {
+              once: true
+            });
+        });
+      },
+      "onPointerDown": _ref3 => {
+        let {
+          pointerType: pointerType
+        } = _ref3;
+        // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
+        if (pointerType === "mouse") {
+          const handler = $8tj43$catchify1(_ref4 => {
+            let {
+              pointerType: pointerType,
+              target: target
+            } = _ref4;
+            if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
+            input_element.click();
+          });
+          window.addEventListener("pointerup", handler, {
+            once: true
+          });
+          $8tj43$runWithOwner(owner_of_field_element, () => $8tj43$onCleanup(() => window.removeEventListener("pointerup", handler)));
+        }
+      },
+      get placeholder() {
+        return i18n_.placeholder_text_();
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
+    }), false, false);
     $8tj43$insert(_el$5, !isNewModal && $8tj43$createComponent(ClearButton, {}), _el$10, _co$2);
     $8tj43$insert(_el$3, isNewModal && $8tj43$createComponent(BackButton, {}), _el$17, _co$5);
     $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
@@ -11206,25 +11242,11 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         return _el$11;
       }
     }), _el$19, _co$6);
-    $8tj43$effect(_p$ => {
-      var _v$ = "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : ""),
-        _v$2 = i18n_.search_field_field_aria_label_(),
-        _v$3 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $8tj43$className(_el$3, _p$.e = _v$);
-      _v$2 !== _p$.t && $8tj43$setAttribute(_el$6, "aria-label", _p$.t = _v$2);
-      _v$3 !== _p$.a && $8tj43$setAttribute(_el$6, "placeholder", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    $8tj43$effect(() => $8tj43$setProperty(_el$6, "value", searchFieldValue()));
     $8tj43$runHydrationEvents();
     return _el$3;
   })();
 }
-$8tj43$delegateEvents(["click", "keydown", "input", "pointerdown"]);
+$8tj43$delegateEvents(["click"]);
 var $fac58b5610eec6a9$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=16><path d="M.773 7.371L7.98.176C8.098.059 8.238 0 8.402 0s.305.059.422.176S9 .434 9 .598s-.059.305-.176.422L2.648 7.195h19.547a.59.59 0 0 1 .609.609c0 .172-.059.305-.176.422s-.262.176-.434.176H2.648l6.176 6.176a.59.59 0 0 1 .176.426c0 .16-.059.301-.176.422-.055.059-.121.109-.199.137s-.148.039-.223.039-.156-.012-.234-.039a.54.54 0 0 1-.187-.137L.773 8.227c-.117-.117-.176-.258-.176-.422a.6.6 0 0 1 .176-.434zm0 0">`);
 function $fac58b5610eec6a9$export$8d8893ffd8aca39a() {
   return $8tj43$getNextElement($fac58b5610eec6a9$var$_tmpl$);
@@ -11254,8 +11276,8 @@ function $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $40411f2ec772c376$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
   $40411f2ec772c376$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<b>`),
-  $40411f2ec772c376$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $40411f2ec772c376$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $40411f2ec772c376$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $40411f2ec772c376$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"role=dialog><div class=depict-search-modal-backdrop></div><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -11403,7 +11425,9 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = (() => {
     var _el$4 = $8tj43$getNextElement($40411f2ec772c376$var$_tmpl$3),
@@ -11659,7 +11683,16 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $8tj43$effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $8tj43$effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $8tj43$setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $8tj43$runHydrationEvents();
     return _el$2;
   })();
@@ -11863,6 +11896,7 @@ function $5175a47d13b7c228$export$d4994a86c6235f72(_ref) {
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $d0883254246d3eb6$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
+              const wholeTextToDisplay = $8tj43$createMemo(() => item().title_);
               return (() => {
                 var _el$7 = $8tj43$getNextElement($5175a47d13b7c228$var$_tmpl$2);
                 $8tj43$use(element => {
@@ -11887,20 +11921,24 @@ function $5175a47d13b7c228$export$d4994a86c6235f72(_ref) {
                 $8tj43$addEventListener(_el$7, "mouseenter", $8tj43$catchify1(() => write_selected_index_([itemIndex_(), index])));
                 $8tj43$insert(_el$7, $8tj43$createComponent((0, $02b6641aa50ce528$export$ba17c5b7e6dda39f), {
                   class_: "title line-clamp",
-                  get whole_text_to_display_() {
-                    return $8tj43$createMemo(() => item().title_);
-                  },
+                  whole_text_to_display_: wholeTextToDisplay,
                   searching_for_value_: searching_for_value_
                 }));
                 $8tj43$effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href();
+                    _v$2 = isSelected(),
+                    _v$3 = href(),
+                    _v$4 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
-                  _v$2 !== _p$.t && $8tj43$setAttribute(_el$7, "href", _p$.t = _v$2);
+                  _v$2 !== _p$.t && $8tj43$setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $8tj43$setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $8tj43$setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
-                  t: undefined
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -12092,7 +12130,7 @@ var $06fcd2a345efd24d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=inst
   $06fcd2a345efd24d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
   $06fcd2a345efd24d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<b>`),
   $06fcd2a345efd24d$var$_tmpl$6 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal-backdrop>`),
-  $06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
+  $06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded></div></div><!$><!/>`),
   $06fcd2a345efd24d$var$_tmpl$8 = /*#__PURE__*/$8tj43$template(`<div class=left>`),
   $06fcd2a345efd24d$var$_tmpl$9 = /*#__PURE__*/$8tj43$template(`<div class=right>`);
 /**
@@ -12342,6 +12380,9 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -12447,7 +12488,9 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($8tj43$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.9.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.9.4";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -9534,15 +9534,18 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
     $gVhhF$solidjsweb.effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!isSelected?.();
+        _v$3 = !!isSelected?.(),
+        _v$4 = isSelected?.();
       _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$4, "data-search-result-id", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$4.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && $gVhhF$solidjsweb.setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$4;
@@ -10480,7 +10483,7 @@ var $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<but
   $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button type=button class=clear>`),
   $66b8b9a9613c141d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=spacer>`),
   $66b8b9a9613c141d$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="submit major"type=button>`),
-  $66b8b9a9613c141d$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+  $66b8b9a9613c141d$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
 function $66b8b9a9613c141d$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -10494,7 +10497,9 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
-  class_: class_
+  class_: class_,
+  setSearchRoleOnContainer_ = true,
+  ariaControls: ariaControls
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -10590,6 +10595,13 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       [_el$17, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$18.nextSibling);
+    $gVhhF$solidjsweb.spread(_el$3, $gVhhF$solidjsweb.mergeProps({
+      get ["class"]() {
+        return `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`;
+      }
+    }, setSearchRoleOnContainer_ && {
+      role: "search"
+    }), false, true);
     $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -10630,59 +10642,83 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       }
     }), true);
     $gVhhF$solidjsweb.insert(_el$5, isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$8, _co$);
-    _el$6.$$pointerdown = ({
-      pointerType: pointerType
-    }) => {
-      // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
-      if (pointerType === "mouse") {
-        const handler = $gVhhF$depictaiutilishared.catchify(({
-          pointerType: pointerType,
-          target: target
-        }) => {
-          if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
-          input_element.click();
-        });
-        window.addEventListener("pointerup", handler, {
-          once: true
-        });
-        $gVhhF$solidjs.runWithOwner(owner_of_field_element, () => $gVhhF$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
-      }
-    };
-    $gVhhF$solidjsweb.addEventListener(_el$6, "select", $gVhhF$depictaiutilishared.catchify(() => {
-      if (disabled_)
-        // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
-        return;
-      if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
-        // everything was selected, clear filters on next submit on next input
-        input_element.addEventListener("input", $gVhhF$depictaiutilishared.catchify(() => clear_filters_(false)),
-        // We don't count this as user triggered since it wasn't explicit
-        {
-          once: true
-        });
-    }));
-    $gVhhF$solidjsweb.addEventListener(_el$6, "input", $gVhhF$depictaiutilishared.catchify(() => {
-      const {
-        value: value
-      } = input_element;
-      if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      setSearchFieldValue(value);
-    }), true);
-    $gVhhF$solidjsweb.addEventListener(_el$6, "keydown", $gVhhF$depictaiutilishared.catchify(e => {
-      if (disabled_) {
-        if (e.key !== "Tab" && e.key !== "Shift")
-          // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
-          input_element.click();
-      } else if (e.key === "Enter") {
-        const dont_submit = override_on_enter_?.(e);
-        if (!dont_submit) submit_query_();
-      }
-    }), true);
     var _ref$2 = $gVhhF$depictaiutilishared.catchify(el => {
       input_element = el;
       input_field_ref_?.(el);
     });
     typeof _ref$2 === "function" && $gVhhF$solidjsweb.use(_ref$2, _el$6);
     _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $gVhhF$solidjsweb.spread(_el$6, $gVhhF$solidjsweb.mergeProps(() => setSearchRoleOnContainer_ ? {
+      "aria-label": i18n_.search_field_field_aria_label_()
+    } :
+    // Searchbox announces basically the same as our aria-label, we could explore always using searchbox in the future
+    {
+      role: "searchbox"
+    }, {
+      get value() {
+        return searchFieldValue();
+      },
+      get onKeyDown() {
+        return $gVhhF$depictaiutilishared.catchify(e => {
+          if (disabled_) {
+            if (e.key !== "Tab" && e.key !== "Shift")
+              // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
+              input_element.click();
+          } else if (e.key === "Enter") {
+            const dont_submit = override_on_enter_?.(e);
+            if (!dont_submit) submit_query_();
+          }
+        });
+      },
+      get onInput() {
+        return $gVhhF$depictaiutilishared.catchify(() => {
+          const {
+            value: value
+          } = input_element;
+          if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
+          setSearchFieldValue(value);
+        });
+      },
+      get onSelect() {
+        return $gVhhF$depictaiutilishared.catchify(() => {
+          if (disabled_)
+            // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
+            return;
+          if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
+            // everything was selected, clear filters on next submit on next input
+            input_element.addEventListener("input", $gVhhF$depictaiutilishared.catchify(() => clear_filters_(false)),
+            // We don't count this as user triggered since it wasn't explicit
+            {
+              once: true
+            });
+        });
+      },
+      "onPointerDown": ({
+        pointerType: pointerType
+      }) => {
+        // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
+        if (pointerType === "mouse") {
+          const handler = $gVhhF$depictaiutilishared.catchify(({
+            pointerType: pointerType,
+            target: target
+          }) => {
+            if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
+            input_element.click();
+          });
+          window.addEventListener("pointerup", handler, {
+            once: true
+          });
+          $gVhhF$solidjs.runWithOwner(owner_of_field_element, () => $gVhhF$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
+        }
+      },
+      get placeholder() {
+        return i18n_.placeholder_text_();
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
+    }), false, false);
     $gVhhF$solidjsweb.insert(_el$5, !isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $gVhhF$solidjsweb.insert(_el$3, isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
     $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
@@ -10696,25 +10732,11 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
         return _el$11;
       }
     }), _el$19, _co$6);
-    $gVhhF$solidjsweb.effect(_p$ => {
-      var _v$ = `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`,
-        _v$2 = i18n_.search_field_field_aria_label_(),
-        _v$3 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $gVhhF$solidjsweb.className(_el$3, _p$.e = _v$);
-      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$6, "aria-label", _p$.t = _v$2);
-      _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$6, "placeholder", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$3;
   })();
 }
-$gVhhF$solidjsweb.delegateEvents(["click", "keydown", "input", "pointerdown"]);
+$gVhhF$solidjsweb.delegateEvents(["click"]);
 var $610b584d4f54699e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=16><path d="M.773 7.371L7.98.176C8.098.059 8.238 0 8.402 0s.305.059.422.176S9 .434 9 .598s-.059.305-.176.422L2.648 7.195h19.547a.59.59 0 0 1 .609.609c0 .172-.059.305-.176.422s-.262.176-.434.176H2.648l6.176 6.176a.59.59 0 0 1 .176.426c0 .16-.059.301-.176.422-.055.059-.121.109-.199.137s-.148.039-.223.039-.156-.012-.234-.039a.54.54 0 0 1-.187-.137L.773 8.227c-.117-.117-.176-.258-.176-.422a.6.6 0 0 1 .176-.434zm0 0">`);
 function $610b584d4f54699e$export$8d8893ffd8aca39a() {
   return $gVhhF$solidjsweb.getNextElement($610b584d4f54699e$var$_tmpl$);
@@ -10744,8 +10766,8 @@ function $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $44f0b2e312a9b710$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $44f0b2e312a9b710$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
-  $44f0b2e312a9b710$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $44f0b2e312a9b710$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $44f0b2e312a9b710$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $44f0b2e312a9b710$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search"role=dialog><div class=depict-search-modal-backdrop></div><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -10887,7 +10909,9 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = (() => {
     var _el$4 = $gVhhF$solidjsweb.getNextElement($44f0b2e312a9b710$var$_tmpl$3),
@@ -11128,7 +11152,16 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
         });
       }
     }));
-    $gVhhF$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -11323,6 +11356,7 @@ function $a13dbcf80d79229c$export$d4994a86c6235f72({
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
+              const wholeTextToDisplay = $gVhhF$solidjs.createMemo(() => item().title_);
               return (() => {
                 var _el$7 = $gVhhF$solidjsweb.getNextElement($a13dbcf80d79229c$var$_tmpl$2);
                 $gVhhF$solidjsweb.use(element => {
@@ -11347,20 +11381,24 @@ function $a13dbcf80d79229c$export$d4994a86c6235f72({
                 $gVhhF$solidjsweb.addEventListener(_el$7, "mouseenter", $gVhhF$depictaiutilishared.catchify(() => write_selected_index_([itemIndex_(), index])));
                 $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
                   class_: "title line-clamp",
-                  get whole_text_to_display_() {
-                    return $gVhhF$solidjs.createMemo(() => item().title_);
-                  },
+                  whole_text_to_display_: wholeTextToDisplay,
                   searching_for_value_: searching_for_value_
                 }));
                 $gVhhF$solidjsweb.effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href();
+                    _v$2 = isSelected(),
+                    _v$3 = href(),
+                    _v$4 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
-                  _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$7, "href", _p$.t = _v$2);
+                  _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
-                  t: undefined
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -11548,7 +11586,7 @@ var $11597ae03e703a47$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div
   $11597ae03e703a47$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $11597ae03e703a47$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
   $11597ae03e703a47$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
+  $11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded></div></div><!$><!/>`),
   $11597ae03e703a47$var$_tmpl$8 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=left>`),
   $11597ae03e703a47$var$_tmpl$9 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right>`);
 /**
@@ -11790,6 +11828,9 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -11892,7 +11933,9 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));