@depict-ai/ui 4.9.2 → 4.9.3

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.3";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -10480,7 +10480,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 +10494,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
-  class_: class_
+  class_: class_,
+  setSearchRoleOnContainer_ = true
 }) {
   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 +10591,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 +10638,79 @@ 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_();
+      }
+    }), 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 +10724,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,7 +10758,7 @@ 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$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><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><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
@@ -10887,7 +10901,8 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       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 = $gVhhF$solidjsweb.getNextElement($44f0b2e312a9b710$var$_tmpl$3),
@@ -11323,6 +11338,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 +11363,21 @@ 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 = href(),
+                    _v$3 = 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$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$.a = _v$3);
                   return _p$;
                 }, {
                   e: undefined,
-                  t: undefined
+                  t: undefined,
+                  a: undefined
                 });
                 return _el$7;
               })();
@@ -11548,7 +11565,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><!$><!/><div 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 +11807,9 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -11892,7 +11912,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       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($gVhhF$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/latest/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/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.9.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.9.3";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -10378,7 +10378,7 @@ var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=b
   $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button type=button class=clear>`),
   $5285d2814d0fac0c$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=spacer>`),
   $5285d2814d0fac0c$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<button class="submit major"type=button>`),
-  $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+  $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -10392,7 +10392,8 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
-  class_: class_
+  class_: class_,
+  setSearchRoleOnContainer_ = true
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -10488,6 +10489,13 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       [_el$17, _co$5] = $9HbP8$getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $9HbP8$getNextMarker(_el$18.nextSibling);
+    $9HbP8$spread(_el$3, $9HbP8$mergeProps1({
+      get ["class"]() {
+        return `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`;
+      }
+    }, setSearchRoleOnContainer_ && {
+      role: "search"
+    }), false, true);
     $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -10528,59 +10536,79 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       }
     }), true);
     $9HbP8$insert(_el$5, isNewModal && $9HbP8$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 = $9HbP8$catchify1(({
-          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
-        });
-        $9HbP8$runWithOwner(owner_of_field_element, () => $9HbP8$onCleanup(() => window.removeEventListener("pointerup", handler)));
-      }
-    };
-    $9HbP8$addEventListener(_el$6, "select", $9HbP8$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", $9HbP8$catchify1(() => clear_filters_(false)),
-        // We don't count this as user triggered since it wasn't explicit
-        {
-          once: true
-        });
-    }));
-    $9HbP8$addEventListener(_el$6, "input", $9HbP8$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);
-    $9HbP8$addEventListener(_el$6, "keydown", $9HbP8$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_?.(e);
-        if (!dont_submit) submit_query_();
-      }
-    }), true);
     var _ref$2 = $9HbP8$catchify1(el => {
       input_element = el;
       input_field_ref_?.(el);
     });
     typeof _ref$2 === "function" && $9HbP8$use(_ref$2, _el$6);
     _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $9HbP8$spread(_el$6, $9HbP8$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 $9HbP8$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_?.(e);
+            if (!dont_submit) submit_query_();
+          }
+        });
+      },
+      get onInput() {
+        return $9HbP8$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 $9HbP8$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", $9HbP8$catchify1(() => 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 = $9HbP8$catchify1(({
+            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
+          });
+          $9HbP8$runWithOwner(owner_of_field_element, () => $9HbP8$onCleanup(() => window.removeEventListener("pointerup", handler)));
+        }
+      },
+      get placeholder() {
+        return i18n_.placeholder_text_();
+      }
+    }), false, false);
     $9HbP8$insert(_el$5, !isNewModal && $9HbP8$createComponent(ClearButton, {}), _el$10, _co$2);
     $9HbP8$insert(_el$3, isNewModal && $9HbP8$createComponent(BackButton, {}), _el$17, _co$5);
     $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
@@ -10594,25 +10622,11 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         return _el$11;
       }
     }), _el$19, _co$6);
-    $9HbP8$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 && $9HbP8$className(_el$3, _p$.e = _v$);
-      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$6, "aria-label", _p$.t = _v$2);
-      _v$3 !== _p$.a && $9HbP8$setAttribute(_el$6, "placeholder", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    $9HbP8$effect(() => $9HbP8$setProperty(_el$6, "value", searchFieldValue()));
     $9HbP8$runHydrationEvents();
     return _el$3;
   })();
 }
-$9HbP8$delegateEvents(["click", "keydown", "input", "pointerdown"]);
+$9HbP8$delegateEvents(["click"]);
 var $ffb84ffbf4014982$var$_tmpl$ = /*#__PURE__*/$9HbP8$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 $ffb84ffbf4014982$export$8d8893ffd8aca39a() {
   return $9HbP8$getNextElement($ffb84ffbf4014982$var$_tmpl$);
@@ -10642,7 +10656,7 @@ function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $42912431795f188e$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=discover-more><button class=major type=button>`),
   $42912431795f188e$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<b>`),
-  $42912431795f188e$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $42912431795f188e$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
   $42912431795f188e$var$_tmpl$4 = /*#__PURE__*/$9HbP8$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
@@ -10785,7 +10799,8 @@ function $42912431795f188e$var$RawClassicSearchModal({
       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 = $9HbP8$getNextElement($42912431795f188e$var$_tmpl$3),
@@ -11221,6 +11236,7 @@ function $903297121898e5ff$export$d4994a86c6235f72({
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
+              const wholeTextToDisplay = $9HbP8$createMemo(() => item().title_);
               return (() => {
                 var _el$7 = $9HbP8$getNextElement($903297121898e5ff$var$_tmpl$2);
                 $9HbP8$use(element => {
@@ -11245,20 +11261,21 @@ function $903297121898e5ff$export$d4994a86c6235f72({
                 $9HbP8$addEventListener(_el$7, "mouseenter", $9HbP8$catchify1(() => write_selected_index_([itemIndex_(), index])));
                 $9HbP8$insert(_el$7, $9HbP8$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
                   class_: "title line-clamp",
-                  get whole_text_to_display_() {
-                    return $9HbP8$createMemo(() => item().title_);
-                  },
+                  whole_text_to_display_: wholeTextToDisplay,
                   searching_for_value_: searching_for_value_
                 }));
                 $9HbP8$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 && $9HbP8$setAttribute(_el$7, "href", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $9HbP8$setAttribute(_el$7, "aria-label", _p$.a = _v$3);
                   return _p$;
                 }, {
                   e: undefined,
-                  t: undefined
+                  t: undefined,
+                  a: undefined
                 });
                 return _el$7;
               })();
@@ -11446,7 +11463,7 @@ var $500a16dd18ee5a71$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=inst
   $500a16dd18ee5a71$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=discover-more><button class=major type=button>`),
   $500a16dd18ee5a71$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<b>`),
   $500a16dd18ee5a71$var$_tmpl$6 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal-backdrop>`),
-  $500a16dd18ee5a71$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
+  $500a16dd18ee5a71$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
   $500a16dd18ee5a71$var$_tmpl$8 = /*#__PURE__*/$9HbP8$template(`<div class=left>`),
   $500a16dd18ee5a71$var$_tmpl$9 = /*#__PURE__*/$9HbP8$template(`<div class=right>`);
 /**
@@ -11688,6 +11705,9 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -11790,7 +11810,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
       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($9HbP8$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.9.2",
+  "version": "4.9.3",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",