@depict-ai/ui 4.9.2 → 4.9.3

package/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.9.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.9.3";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -11088,7 +11088,7 @@ var $29e5dbeb69da7a36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<but
   $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button type=button class=clear>`),
   $29e5dbeb69da7a36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=spacer>`),
   $29e5dbeb69da7a36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="submit major"type=button>`),
-  $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+  $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
 function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -11103,7 +11103,8 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
-    class_: class_
+    class_: class_,
+    setSearchRoleOnContainer_ = true
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -11202,6 +11203,13 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       [_el$17, _co$5] = $52FdA$solidjsweb.getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$18.nextSibling);
+    $52FdA$solidjsweb.spread(_el$3, $52FdA$solidjsweb.mergeProps({
+      get ["class"]() {
+        return "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+      }
+    }, setSearchRoleOnContainer_ && {
+      role: "search"
+    }), false, true);
     $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -11243,61 +11251,81 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       }
     }), true);
     $52FdA$solidjsweb.insert(_el$5, isNewModal && $52FdA$solidjsweb.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 = $52FdA$depictaiutilishared.catchify(_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
-        });
-        $52FdA$solidjs.runWithOwner(owner_of_field_element, () => $52FdA$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
-      }
-    };
-    $52FdA$solidjsweb.addEventListener(_el$6, "select", $52FdA$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", $52FdA$depictaiutilishared.catchify(() => clear_filters_(false)),
-        // We don't count this as user triggered since it wasn't explicit
-        {
-          once: true
-        });
-    }));
-    $52FdA$solidjsweb.addEventListener(_el$6, "input", $52FdA$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);
-    $52FdA$solidjsweb.addEventListener(_el$6, "keydown", $52FdA$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_ === null || override_on_enter_ === void 0 ? void 0 : override_on_enter_(e);
-        if (!dont_submit) submit_query_();
-      }
-    }), true);
     var _ref$2 = $52FdA$depictaiutilishared.catchify(el => {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
     typeof _ref$2 === "function" && $52FdA$solidjsweb.use(_ref$2, _el$6);
     _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $52FdA$solidjsweb.spread(_el$6, $52FdA$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 $52FdA$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_ === null || override_on_enter_ === void 0 ? void 0 : override_on_enter_(e);
+            if (!dont_submit) submit_query_();
+          }
+        });
+      },
+      get onInput() {
+        return $52FdA$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 $52FdA$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", $52FdA$depictaiutilishared.catchify(() => 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 = $52FdA$depictaiutilishared.catchify(_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
+          });
+          $52FdA$solidjs.runWithOwner(owner_of_field_element, () => $52FdA$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
+        }
+      },
+      get placeholder() {
+        return i18n_.placeholder_text_();
+      }
+    }), false, false);
     $52FdA$solidjsweb.insert(_el$5, !isNewModal && $52FdA$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $52FdA$solidjsweb.insert(_el$3, isNewModal && $52FdA$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
     $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
@@ -11311,25 +11339,11 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
         return _el$11;
       }
     }), _el$19, _co$6);
-    $52FdA$solidjsweb.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 && $52FdA$solidjsweb.className(_el$3, _p$.e = _v$);
-      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$6, "aria-label", _p$.t = _v$2);
-      _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$6, "placeholder", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$3;
   })();
 }
-$52FdA$solidjsweb.delegateEvents(["click", "keydown", "input", "pointerdown"]);
+$52FdA$solidjsweb.delegateEvents(["click"]);
 var $820f2920cc576f7e$var$_tmpl$ = /*#__PURE__*/$52FdA$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 $820f2920cc576f7e$export$8d8893ffd8aca39a() {
   return $52FdA$solidjsweb.getNextElement($820f2920cc576f7e$var$_tmpl$);
@@ -11359,7 +11373,7 @@ function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $9035b24c2dbd3f36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $9035b24c2dbd3f36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
-  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
   $9035b24c2dbd3f36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"><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
@@ -11508,7 +11522,8 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false
   });
   const modal_element = (() => {
     var _el$4 = $52FdA$solidjsweb.getNextElement($9035b24c2dbd3f36$var$_tmpl$3),
@@ -11968,6 +11983,7 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $b0f8d9f49e018db9$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
+              const wholeTextToDisplay = $52FdA$solidjs.createMemo(() => item().title_);
               return (() => {
                 var _el$7 = $52FdA$solidjsweb.getNextElement($79a8fa74cb5cdfb9$var$_tmpl$2);
                 $52FdA$solidjsweb.use(element => {
@@ -11992,20 +12008,21 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 $52FdA$solidjsweb.addEventListener(_el$7, "mouseenter", $52FdA$depictaiutilishared.catchify(() => write_selected_index_([itemIndex_(), index])));
                 $52FdA$solidjsweb.insert(_el$7, $52FdA$solidjsweb.createComponent((0, $23c3f390dee33ff8$export$ba17c5b7e6dda39f), {
                   class_: "title line-clamp",
-                  get whole_text_to_display_() {
-                    return $52FdA$solidjs.createMemo(() => item().title_);
-                  },
+                  whole_text_to_display_: wholeTextToDisplay,
                   searching_for_value_: searching_for_value_
                 }));
                 $52FdA$solidjsweb.effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href();
+                    _v$2 = href(),
+                    _v$3 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
                   _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$7, "href", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$7, "aria-label", _p$.a = _v$3);
                   return _p$;
                 }, {
                   e: undefined,
-                  t: undefined
+                  t: undefined,
+                  a: undefined
                 });
                 return _el$7;
               })();
@@ -12197,7 +12214,7 @@ var $43600b30502feeda$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div
   $43600b30502feeda$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $43600b30502feeda$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
   $43600b30502feeda$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
+  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
   $43600b30502feeda$var$_tmpl$8 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=left>`),
   $43600b30502feeda$var$_tmpl$9 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right>`);
 /**
@@ -12447,6 +12464,9 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -12552,7 +12572,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.9.2";
+export const version = "4.9.3";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1539,7 +1539,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1619,5 +1619,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
   showSliderArrow_?: boolean;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

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.3";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -10983,7 +10983,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 +10998,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
-    class_: class_
+    class_: class_,
+    setSearchRoleOnContainer_ = true
   } = _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 +11098,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 +11146,81 @@ 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_();
+      }
+    }), 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 +11234,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,7 +11268,7 @@ 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$3 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
   $40411f2ec772c376$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"><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 +11417,8 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false
   });
   const modal_element = (() => {
     var _el$4 = $8tj43$getNextElement($40411f2ec772c376$var$_tmpl$3),
@@ -11863,6 +11878,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 +11903,21 @@ 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 = href(),
+                    _v$3 = 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$3 !== _p$.a && $8tj43$setAttribute(_el$7, "aria-label", _p$.a = _v$3);
                   return _p$;
                 }, {
                   e: undefined,
-                  t: undefined
+                  t: undefined,
+                  a: undefined
                 });
                 return _el$7;
               })();
@@ -12092,7 +12109,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><!$><!/><div 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 +12359,9 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -12447,7 +12467,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($8tj43$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));