@depict-ai/ui 4.9.2 → 4.9.3

package/server/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 = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -9170,8 +9170,8 @@ function $34934309832515dc$export$f7658c347b037c3f() {
   }, props), () => $3hooq$solidjsweb.ssr($34934309832515dc$var$_tmpl$), true);
 }
 var $29e5dbeb69da7a36$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
-  $29e5dbeb69da7a36$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
-  $29e5dbeb69da7a36$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0" enterkeyhint="search"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $29e5dbeb69da7a36$var$_tmpl$2 = ['<div class="field"><!--$-->', "<!--/-->", "<!--$-->", "<!--/--></div>"],
+  $29e5dbeb69da7a36$var$_tmpl$3 = ["<button", ' class="submit major" type="button"', ">", "</button>"];
 function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -9186,7 +9186,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.
@@ -9247,19 +9248,42 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       return $3hooq$solidjsweb.createComponent(BackIcon_, {});
     }
   })) : $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), true);
-  return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat($3hooq$solidjsweb.escape(class_(), true)) : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  return $3hooq$solidjsweb.ssrElement("div", $3hooq$solidjsweb.mergeProps({
+    get ["class"]() {
+      return "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+    }
+  }, setSearchRoleOnContainer_ && {
+    role: "search"
+  }), () => ["<!--$-->", $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
     get children() {
       return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "width:" + ($3hooq$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
     }
-  })), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape(searchFieldValue(), true), false) + $3hooq$solidjsweb.ssrAttribute("placeholder", $3hooq$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  })), "<!--/-->", "<!--$-->", !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), "<!--/-->", $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), $3hooq$solidjsweb.ssrElement("input", $3hooq$solidjsweb.mergeProps({
+    "class": "query ".concat(!!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 && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {}))), "<!--$-->", isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), "<!--/-->", "<!--$-->", $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     when: !isNewModal,
     get children() {
-      return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})));
+      return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})));
     }
-  })));
+  })), "<!--/-->"], true);
 }
 var $820f2920cc576f7e$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 $820f2920cc576f7e$export$8d8893ffd8aca39a() {
@@ -9290,7 +9314,7 @@ function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $9035b24c2dbd3f36$var$_tmpl$ = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $9035b24c2dbd3f36$var$_tmpl$2 = ["<b", ">", "</b>"],
-  $9035b24c2dbd3f36$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $9035b24c2dbd3f36$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '" role="search"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
   $9035b24c2dbd3f36$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
@@ -9428,7 +9452,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 = $3hooq$solidjsweb.ssr($9035b24c2dbd3f36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "depict-search-modal", "".concat("body", " ").concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape(random_classname, true), true)), $3hooq$solidjsweb.escape(search_field), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $1b3cf201cdd38687$export$b69d0d92862de18b), {
     severity_: "error",
@@ -9762,11 +9787,10 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $b0f8d9f49e018db9$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
-              return $3hooq$solidjsweb.ssr($79a8fa74cb5cdfb9$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "suggestion ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(href(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $23c3f390dee33ff8$export$ba17c5b7e6dda39f), {
+              const wholeTextToDisplay = $3hooq$solidjs.createMemo(() => item().title_);
+              return $3hooq$solidjsweb.ssr($79a8fa74cb5cdfb9$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "suggestion ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(href(), true), false) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(wholeTextToDisplay(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $23c3f390dee33ff8$export$ba17c5b7e6dda39f), {
                 class_: "title line-clamp",
-                get whole_text_to_display_() {
-                  return $3hooq$solidjs.createMemo(() => item().title_);
-                },
+                whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
               })));
             }
@@ -9946,7 +9970,7 @@ var $43600b30502feeda$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" st
   $43600b30502feeda$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $43600b30502feeda$var$_tmpl$3 = ["<b", ">", "</b>"],
   $43600b30502feeda$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
-  $43600b30502feeda$var$_tmpl$5 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
+  $43600b30502feeda$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
  */
@@ -10189,6 +10213,9 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -10269,7 +10296,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($3hooq$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

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

@@ -10,7 +10,7 @@ import $b8hua$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 = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -9065,8 +9065,8 @@ function $83c36ed4520d0335$export$f7658c347b037c3f() {
   }, props), () => $b8hua$ssr($83c36ed4520d0335$var$_tmpl$), true);
 }
 var $584c06c09cf4609d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
-  $584c06c09cf4609d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
-  $584c06c09cf4609d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0" enterkeyhint="search"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $584c06c09cf4609d$var$_tmpl$2 = ['<div class="field"><!--$-->', "<!--/-->", "<!--$-->", "<!--/--></div>"],
+  $584c06c09cf4609d$var$_tmpl$3 = ["<button", ' class="submit major" type="button"', ">", "</button>"];
 function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -9081,7 +9081,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.
@@ -9142,19 +9143,42 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       return $b8hua$createComponent(BackIcon_, {});
     }
   })) : $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), true);
-  return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$3, $b8hua$ssrHydrationKey(), "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat($b8hua$escape(class_(), true)) : ""), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+  return $b8hua$ssrElement("div", $b8hua$mergeProps1({
+    get ["class"]() {
+      return "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+    }
+  }, setSearchRoleOnContainer_ && {
+    role: "search"
+  }), () => ["<!--$-->", $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
     get children() {
       return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$, $b8hua$ssrHydrationKey(), "width:" + ($b8hua$escape(getBackButtonWidth(), true) + "px"));
     }
-  })), !isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_field_field_aria_label_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape(searchFieldValue(), true), false) + $b8hua$ssrAttribute("placeholder", $b8hua$escape(i18n_.placeholder_text_(), true), false), !isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+  })), "<!--/-->", "<!--$-->", !isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), "<!--/-->", $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), $b8hua$ssrElement("input", $b8hua$mergeProps1({
+    "class": "query ".concat(!!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 && $b8hua$escape($b8hua$createComponent(ClearButton, {}))), "<!--$-->", isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), "<!--/-->", "<!--$-->", $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     when: !isNewModal,
     get children() {
-      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_submit_button_aria_label_(), true), false), $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})));
+      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_submit_button_aria_label_(), true), false), $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})));
     }
-  })));
+  })), "<!--/-->"], true);
 }
 var $fac58b5610eec6a9$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 $fac58b5610eec6a9$export$8d8893ffd8aca39a() {
@@ -9185,7 +9209,7 @@ function $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $40411f2ec772c376$var$_tmpl$ = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $40411f2ec772c376$var$_tmpl$2 = ["<b", ">", "</b>"],
-  $40411f2ec772c376$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $40411f2ec772c376$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '" role="search"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
   $40411f2ec772c376$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
@@ -9323,7 +9347,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 = $b8hua$ssr($40411f2ec772c376$var$_tmpl$3, $b8hua$ssrHydrationKey(), "depict-search-modal", "".concat("body", " ").concat($b8hua$escape($b8hua$escape(random_classname, true), true)), $b8hua$escape(search_field), $b8hua$escape($b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
     severity_: "error",
@@ -9657,11 +9682,10 @@ function $5175a47d13b7c228$export$d4994a86c6235f72(_ref) {
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $d0883254246d3eb6$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
-              return $b8hua$ssr($5175a47d13b7c228$var$_tmpl$2, $b8hua$ssrHydrationKey(), "suggestion ".concat(isSelected() ? "selected" : ""), $b8hua$ssrAttribute("href", $b8hua$escape(href(), true), false), $b8hua$escape($b8hua$createComponent((0, $02b6641aa50ce528$export$ba17c5b7e6dda39f), {
+              const wholeTextToDisplay = $b8hua$createMemo(() => item().title_);
+              return $b8hua$ssr($5175a47d13b7c228$var$_tmpl$2, $b8hua$ssrHydrationKey(), "suggestion ".concat(isSelected() ? "selected" : ""), $b8hua$ssrAttribute("href", $b8hua$escape(href(), true), false) + $b8hua$ssrAttribute("aria-label", $b8hua$escape(wholeTextToDisplay(), true), false), $b8hua$escape($b8hua$createComponent((0, $02b6641aa50ce528$export$ba17c5b7e6dda39f), {
                 class_: "title line-clamp",
-                get whole_text_to_display_() {
-                  return $b8hua$createMemo(() => item().title_);
-                },
+                whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
               })));
             }
@@ -9841,7 +9865,7 @@ var $06fcd2a345efd24d$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" st
   $06fcd2a345efd24d$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $06fcd2a345efd24d$var$_tmpl$3 = ["<b", ">", "</b>"],
   $06fcd2a345efd24d$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
-  $06fcd2a345efd24d$var$_tmpl$5 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
+  $06fcd2a345efd24d$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
  */
@@ -10084,6 +10108,9 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -10164,7 +10191,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($b8hua$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/server/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 = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -8630,8 +8630,8 @@ function $0175183387c8923a$export$f7658c347b037c3f(props = {}) {
   }, props), () => $5vyXB$solidjsweb.ssr($0175183387c8923a$var$_tmpl$), true);
 }
 var $66b8b9a9613c141d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
-  $66b8b9a9613c141d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
-  $66b8b9a9613c141d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0" enterkeyhint="search"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $66b8b9a9613c141d$var$_tmpl$2 = ['<div class="field"><!--$-->', "<!--/-->", "<!--$-->", "<!--/--></div>"],
+  $66b8b9a9613c141d$var$_tmpl$3 = ["<button", ' class="submit major" type="button"', ">", "</button>"];
 function $66b8b9a9613c141d$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -8645,7 +8645,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.
@@ -8703,19 +8704,42 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       return $5vyXB$solidjsweb.createComponent(BackIcon_, {});
     }
   })) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), true);
-  return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${$5vyXB$solidjsweb.escape(class_(), true)}` : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  return $5vyXB$solidjsweb.ssrElement("div", $5vyXB$solidjsweb.mergeProps({
+    get ["class"]() {
+      return `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`;
+    }
+  }, setSearchRoleOnContainer_ && {
+    role: "search"
+  }), () => ["<!--$-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
     get children() {
       return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "width:" + ($5vyXB$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
     }
-  })), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $5vyXB$solidjsweb.ssrAttribute("value", $5vyXB$solidjsweb.escape(searchFieldValue(), true), false) + $5vyXB$solidjsweb.ssrAttribute("placeholder", $5vyXB$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  })), "<!--/-->", "<!--$-->", !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), "<!--/-->", $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), $5vyXB$solidjsweb.ssrElement("input", $5vyXB$solidjsweb.mergeProps({
+    "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 && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {}))), "<!--$-->", isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), "<!--/-->", "<!--$-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     when: !isNewModal,
     get children() {
-      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})));
+      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})));
     }
-  })));
+  })), "<!--/-->"], true);
 }
 var $610b584d4f54699e$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 $610b584d4f54699e$export$8d8893ffd8aca39a() {
@@ -8746,7 +8770,7 @@ function $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $44f0b2e312a9b710$var$_tmpl$ = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $44f0b2e312a9b710$var$_tmpl$2 = ["<b", ">", "</b>"],
-  $44f0b2e312a9b710$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $44f0b2e312a9b710$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '" role="search"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
   $44f0b2e312a9b710$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
@@ -8878,7 +8902,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 = $5vyXB$solidjsweb.ssr($44f0b2e312a9b710$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal`, `${`body` || ""} ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(random_classname, true), true)}`, $5vyXB$solidjsweb.escape(search_field), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     severity_: "error",
@@ -9190,11 +9215,10 @@ function $a13dbcf80d79229c$export$d4994a86c6235f72({
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
-              return $5vyXB$solidjsweb.ssr($a13dbcf80d79229c$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `suggestion ${isSelected() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
+              const wholeTextToDisplay = $5vyXB$solidjs.createMemo(() => item().title_);
+              return $5vyXB$solidjsweb.ssr($a13dbcf80d79229c$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `suggestion ${isSelected() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(wholeTextToDisplay(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
                 class_: "title line-clamp",
-                get whole_text_to_display_() {
-                  return $5vyXB$solidjs.createMemo(() => item().title_);
-                },
+                whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
               })));
             }
@@ -9370,7 +9394,7 @@ var $11597ae03e703a47$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" st
   $11597ae03e703a47$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
   $11597ae03e703a47$var$_tmpl$3 = ["<b", ">", "</b>"],
   $11597ae03e703a47$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
-  $11597ae03e703a47$var$_tmpl$5 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
+  $11597ae03e703a47$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
  */
@@ -9605,6 +9629,9 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -9682,7 +9709,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($5vyXB$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/server/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";