@depict-ai/ui 4.9.2 → 4.9.3

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$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 = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -8528,8 +8528,8 @@ function $081752ca508a876f$export$f7658c347b037c3f(props = {}) {
   }, props), () => $i7OB2$ssr($081752ca508a876f$var$_tmpl$), true);
 }
 var $5285d2814d0fac0c$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
-  $5285d2814d0fac0c$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
-  $5285d2814d0fac0c$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0" enterkeyhint="search"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $5285d2814d0fac0c$var$_tmpl$2 = ['<div class="field"><!--$-->', "<!--/-->", "<!--$-->", "<!--/--></div>"],
+  $5285d2814d0fac0c$var$_tmpl$3 = ["<button", ' class="submit major" type="button"', ">", "</button>"];
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -8543,7 +8543,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.
@@ -8601,19 +8602,42 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       return $i7OB2$createComponent(BackIcon_, {});
     }
   })) : $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), true);
-  return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${$i7OB2$escape(class_(), true)}` : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+  return $i7OB2$ssrElement("div", $i7OB2$mergeProps1({
+    get ["class"]() {
+      return `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`;
+    }
+  }, setSearchRoleOnContainer_ && {
+    role: "search"
+  }), () => ["<!--$-->", $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
     get children() {
       return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$, $i7OB2$ssrHydrationKey(), "width:" + ($i7OB2$escape(getBackButtonWidth(), true) + "px"));
     }
-  })), !isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {})), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_field_field_aria_label_(), true), false) + $i7OB2$ssrAttribute("value", $i7OB2$escape(searchFieldValue(), true), false) + $i7OB2$ssrAttribute("placeholder", $i7OB2$escape(i18n_.placeholder_text_(), true), false), !isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {})), isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+  })), "<!--/-->", "<!--$-->", !isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), "<!--/-->", $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$2, isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {})), $i7OB2$ssrElement("input", $i7OB2$mergeProps1({
+    "class": `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`,
+    tabindex: "0",
+    enterkeyhint: "search"
+  }, () => 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 placeholder() {
+      return i18n_.placeholder_text_();
+    }
+  }), undefined, false), !isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {}))), "<!--$-->", isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), "<!--/-->", "<!--$-->", $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     when: !isNewModal,
     get children() {
-      return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_submit_button_aria_label_(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {})));
+      return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_submit_button_aria_label_(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {})));
     }
-  })));
+  })), "<!--/-->"], true);
 }
 var $ffb84ffbf4014982$var$_tmpl$ = ["<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"></path></svg>'];
 function $ffb84ffbf4014982$export$8d8893ffd8aca39a() {
@@ -8644,7 +8668,7 @@ function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $42912431795f188e$var$_tmpl$ = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $42912431795f188e$var$_tmpl$2 = ["<b", ">", "</b>"],
-  $42912431795f188e$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $42912431795f188e$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '" role="search"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
   $42912431795f188e$var$_tmpl$4 = ["<div", ' class="', '"><div class="depict-search-modal-backdrop"></div><!--$-->', "<!--/--></div>"];
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
@@ -8776,7 +8800,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 = $i7OB2$ssr($42912431795f188e$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `depict-search-modal`, `${`body` || ""} ${$i7OB2$escape($i7OB2$escape(random_classname, true), true)}`, $i7OB2$escape(search_field), $i7OB2$escape($i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
     severity_: "error",
@@ -9088,11 +9113,10 @@ function $903297121898e5ff$export$d4994a86c6235f72({
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
-              return $i7OB2$ssr($903297121898e5ff$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `suggestion ${isSelected() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
+              const wholeTextToDisplay = $i7OB2$createMemo(() => item().title_);
+              return $i7OB2$ssr($903297121898e5ff$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `suggestion ${isSelected() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false) + $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(wholeTextToDisplay(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
                 class_: "title line-clamp",
-                get whole_text_to_display_() {
-                  return $i7OB2$createMemo(() => item().title_);
-                },
+                whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
               })));
             }
@@ -9268,7 +9292,7 @@ var $500a16dd18ee5a71$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" st
   $500a16dd18ee5a71$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $500a16dd18ee5a71$var$_tmpl$3 = ["<b", ">", "</b>"],
   $500a16dd18ee5a71$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
-  $500a16dd18ee5a71$var$_tmpl$5 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
+  $500a16dd18ee5a71$var$_tmpl$5 = ["<div", ' class="', '"><div class="', '" role="search"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -9503,6 +9527,9 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -9580,7 +9607,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($i7OB2$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));