@depict-ai/ui 4.9.2 → 4.9.4

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.4";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -8218,7 +8218,7 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
   const secondary_image_url = ((_variant$image_urls = variant.image_urls) === null || _variant$image_urls === void 0 ? void 0 : _variant$image_urls[1]) || variant.secondary_image_url || variant.alternative_display_image_url;
   const brandInTagline = selected_index_ && variant.brand;
   const TitleBrandTagline = () => [!selected_index_ && $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape(variant.brand)), $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("title", $b8hua$escape(variant.title, true), false), $b8hua$escape(variant.title)), (variant.sub_heading_1 || variant.sub_heading_2 || brandInTagline) && $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$escape([brandInTagline, variant.sub_heading_1, variant.sub_heading_2].filter(v => v).join(" | ")))];
-  return $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$6, $b8hua$ssrHydrationKey(), "instant-card ".concat(isSelected !== null && isSelected !== void 0 && isSelected() ? "selected" : ""), $b8hua$ssrAttribute("href", $b8hua$escape(href(), true), false) + $b8hua$ssrAttribute("data-search-result-id", $b8hua$escape(display_.search_result_id, true), false), $b8hua$escape($b8hua$createComponent(InstantCardImageComponent_, {
+  return $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$6, $b8hua$ssrHydrationKey(), "instant-card ".concat(isSelected !== null && isSelected !== void 0 && isSelected() ? "selected" : ""), $b8hua$ssrAttribute("href", $b8hua$escape(href(), true), false) + $b8hua$ssrAttribute("data-search-result-id", $b8hua$escape(display_.search_result_id, true), false) + $b8hua$ssrAttribute("aria-selected", $b8hua$escape(isSelected === null || isSelected === void 0 ? void 0 : isSelected(), true), false), $b8hua$escape($b8hua$createComponent(InstantCardImageComponent_, {
     get src_() {
       var _variant$image_urls2;
       return ((_variant$image_urls2 = variant.image_urls) === null || _variant$image_urls2 === void 0 ? void 0 : _variant$image_urls2[0]) || variant.image_url || variant.display_image_url;
@@ -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,9 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
-    class_: class_
+    class_: class_,
+    setSearchRoleOnContainer_ = true,
+    ariaControls: ariaControls
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -9142,19 +9144,46 @@ 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_();
+    },
+    "aria-autocomplete": "list",
+    "aria-haspopup": "dialog"
+  }, ariaControls && {
+    "aria-controls": ariaControls
+  }), 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,8 +9214,8 @@ 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$4 = ["<div", ' class="', '"><div class="depict-search-modal-backdrop"></div><!--$-->', "<!--/--></div>"];
+  $40411f2ec772c376$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '" role="search" aria-label="Search modal with search field, query suggestions and result preview"><!--$-->', '<!--/--><div id="depict-suggestions-and-result-preview" class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $40411f2ec772c376$var$_tmpl$4 = ["<div", ' class="', '" role="dialog"><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 +9352,9 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = $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",
@@ -9412,7 +9443,7 @@ function $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c() {
   return $b8hua$ssr($4a3ed70b3b7c60d5$var$_tmpl$, $b8hua$ssrHydrationKey());
 }
 var $26db6925469636a4$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
-  $26db6925469636a4$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+  $26db6925469636a4$var$_tmpl$2 = ["<div", ' class="', '"', "><!--$-->", "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $26db6925469636a4$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $26db6925469636a4$var$aspectRatioWidthComponent = 400;
 const $26db6925469636a4$var$aspectRatioHeightComponent = 200;
@@ -9447,7 +9478,7 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
     var _listing_3;
     return (_listing_3 = listing_()) === null || _listing_3 === void 0 ? void 0 : _listing_3.ancestors;
   });
-  return $b8hua$ssr($26db6925469636a4$var$_tmpl$2, $b8hua$ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $b8hua$escape($b8hua$createComponent(LinkToListing, {
+  return $b8hua$ssr($26db6925469636a4$var$_tmpl$2, $b8hua$ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $b8hua$ssrAttribute("aria-selected", $b8hua$escape(isSelected(), true), false), $b8hua$escape($b8hua$createComponent(LinkToListing, {
     "class": "image-part",
     get style() {
       var _image_urls$length, _image_urls;
@@ -9657,11 +9688,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("aria-selected", $b8hua$escape(isSelected(), true), false) + $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 +9871,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" aria-label="Search modal with search field, query suggestions and result preview"><!--$-->', '<!--/--><div id="depict-suggestions-and-result-preview" class="', '"></div></div><!--$-->', "<!--/--></div>"];
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -10084,6 +10114,9 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -10164,7 +10197,9 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($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.4";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -7834,7 +7834,7 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
   const secondary_image_url = variant.image_urls?.[1] || variant.secondary_image_url || variant.alternative_display_image_url;
   const brandInTagline = selected_index_ && variant.brand;
   const TitleBrandTagline = () => [!selected_index_ && $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(variant.brand)), $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("title", $5vyXB$solidjsweb.escape(variant.title, true), false), $5vyXB$solidjsweb.escape(variant.title)), (variant.sub_heading_1 || variant.sub_heading_2 || brandInTagline) && $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape([brandInTagline, variant.sub_heading_1, variant.sub_heading_2].filter(v => v).join(" | ")))];
-  return $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$6, $5vyXB$solidjsweb.ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false) + $5vyXB$solidjsweb.ssrAttribute("data-search-result-id", $5vyXB$solidjsweb.escape(display_.search_result_id, true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(InstantCardImageComponent_, {
+  return $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$6, $5vyXB$solidjsweb.ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false) + $5vyXB$solidjsweb.ssrAttribute("data-search-result-id", $5vyXB$solidjsweb.escape(display_.search_result_id, true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-selected", $5vyXB$solidjsweb.escape(isSelected?.(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(InstantCardImageComponent_, {
     get src_() {
       return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
     }
@@ -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,9 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
-  class_: class_
+  class_: class_,
+  setSearchRoleOnContainer_ = true,
+  ariaControls: ariaControls
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -8703,19 +8705,46 @@ 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_();
+    },
+    "aria-autocomplete": "list",
+    "aria-haspopup": "dialog"
+  }, ariaControls && {
+    "aria-controls": ariaControls
+  }), 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,8 +8775,8 @@ 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$4 = ["<div", ' class="', '"><div class="depict-search-modal-backdrop"></div><!--$-->', "<!--/--></div>"];
+  $44f0b2e312a9b710$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '" role="search" aria-label="Search modal with search field, query suggestions and result preview"><!--$-->', '<!--/--><div id="depict-suggestions-and-result-preview" class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $44f0b2e312a9b710$var$_tmpl$4 = ["<div", ' class="', '" role="dialog"><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 +8907,9 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = $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",
@@ -8967,7 +8998,7 @@ function $3a1c4fee88fb8672$export$9ca09caa9c849d9c() {
   return $5vyXB$solidjsweb.ssr($3a1c4fee88fb8672$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey());
 }
 var $1f3b5fa875714dea$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
-  $1f3b5fa875714dea$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+  $1f3b5fa875714dea$var$_tmpl$2 = ["<div", ' class="', '"', "><!--$-->", "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $1f3b5fa875714dea$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $1f3b5fa875714dea$var$aspectRatioWidthComponent = 400;
 const $1f3b5fa875714dea$var$aspectRatioHeightComponent = 200;
@@ -8992,7 +9023,7 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
   const image_urls = $5vyXB$solidjs.createMemo(() => listing_()?.image_urls?.slice(0, 3));
   const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $5vyXB$solidjs.createMemo(() => listing_()?.ancestors);
-  return $5vyXB$solidjsweb.ssr($1f3b5fa875714dea$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(LinkToListing, {
+  return $5vyXB$solidjsweb.ssr($1f3b5fa875714dea$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-selected", $5vyXB$solidjsweb.escape(isSelected(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(LinkToListing, {
     "class": "image-part",
     get style() {
       return `--image-count: ${image_urls()?.length ?? 0}`;
@@ -9190,11 +9221,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("aria-selected", $5vyXB$solidjsweb.escape(isSelected(), true), false) + $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 +9400,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" aria-label="Search modal with search field, query suggestions and result preview"><!--$-->', '<!--/--><div id="depict-suggestions-and-result-preview" class="', '"></div></div><!--$-->', "<!--/--></div>"];
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -9605,6 +9635,9 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -9682,7 +9715,9 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($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.4";
 /**
  * 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/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.4";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -7732,7 +7732,7 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
   const secondary_image_url = variant.image_urls?.[1] || variant.secondary_image_url || variant.alternative_display_image_url;
   const brandInTagline = selected_index_ && variant.brand;
   const TitleBrandTagline = () => [!selected_index_ && $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape(variant.brand)), $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("title", $i7OB2$escape(variant.title, true), false), $i7OB2$escape(variant.title)), (variant.sub_heading_1 || variant.sub_heading_2 || brandInTagline) && $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape([brandInTagline, variant.sub_heading_1, variant.sub_heading_2].filter(v => v).join(" | ")))];
-  return $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$6, $i7OB2$ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false) + $i7OB2$ssrAttribute("data-search-result-id", $i7OB2$escape(display_.search_result_id, true), false), $i7OB2$escape($i7OB2$createComponent(InstantCardImageComponent_, {
+  return $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$6, $i7OB2$ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false) + $i7OB2$ssrAttribute("data-search-result-id", $i7OB2$escape(display_.search_result_id, true), false) + $i7OB2$ssrAttribute("aria-selected", $i7OB2$escape(isSelected?.(), true), false), $i7OB2$escape($i7OB2$createComponent(InstantCardImageComponent_, {
     get src_() {
       return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
     }
@@ -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,9 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
-  class_: class_
+  class_: class_,
+  setSearchRoleOnContainer_ = true,
+  ariaControls: ariaControls
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -8601,19 +8603,46 @@ 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_();
+    },
+    "aria-autocomplete": "list",
+    "aria-haspopup": "dialog"
+  }, ariaControls && {
+    "aria-controls": ariaControls
+  }), 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,8 +8673,8 @@ 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$4 = ["<div", ' class="', '"><div class="depict-search-modal-backdrop"></div><!--$-->', "<!--/--></div>"];
+  $42912431795f188e$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '" role="search" aria-label="Search modal with search field, query suggestions and result preview"><!--$-->', '<!--/--><div id="depict-suggestions-and-result-preview" class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $42912431795f188e$var$_tmpl$4 = ["<div", ' class="', '" role="dialog"><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 +8805,9 @@ function $42912431795f188e$var$RawClassicSearchModal({
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = $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",
@@ -8865,7 +8896,7 @@ function $0eb1f9e7ee46f1c2$export$9ca09caa9c849d9c() {
   return $i7OB2$ssr($0eb1f9e7ee46f1c2$var$_tmpl$, $i7OB2$ssrHydrationKey());
 }
 var $4ce5b8892775b62d$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
-  $4ce5b8892775b62d$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+  $4ce5b8892775b62d$var$_tmpl$2 = ["<div", ' class="', '"', "><!--$-->", "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $4ce5b8892775b62d$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $4ce5b8892775b62d$var$aspectRatioWidthComponent = 400;
 const $4ce5b8892775b62d$var$aspectRatioHeightComponent = 200;
@@ -8890,7 +8921,7 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   const image_urls = $i7OB2$createMemo(() => listing_()?.image_urls?.slice(0, 3));
   const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $i7OB2$createMemo(() => listing_()?.ancestors);
-  return $i7OB2$ssr($4ce5b8892775b62d$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $i7OB2$escape($i7OB2$createComponent(LinkToListing, {
+  return $i7OB2$ssr($4ce5b8892775b62d$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $i7OB2$ssrAttribute("aria-selected", $i7OB2$escape(isSelected(), true), false), $i7OB2$escape($i7OB2$createComponent(LinkToListing, {
     "class": "image-part",
     get style() {
       return `--image-count: ${image_urls()?.length ?? 0}`;
@@ -9088,11 +9119,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("aria-selected", $i7OB2$escape(isSelected(), true), false) + $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 +9298,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" aria-label="Search modal with search field, query suggestions and result preview"><!--$-->', '<!--/--><div id="depict-suggestions-and-result-preview" class="', '"></div></div><!--$-->', "<!--/--></div>"];
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -9503,6 +9533,9 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -9580,7 +9613,9 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
       const [start, end] = selected_text_range_;
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
-    }
+    },
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($i7OB2$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));