@depict-ai/ui 4.9.3 → 4.9.5

package/latest/index.js

@@ -3,11 +3,12 @@ import { template as $9HbP8$template, createComponent as $9HbP8$createComponent,
 import { createContext as $9HbP8$createContext, createSignal as $9HbP8$createSignal, getOwner as $9HbP8$getOwner, createResource as $9HbP8$createResource, untrack as $9HbP8$untrack, createRoot as $9HbP8$createRoot, createEffect as $9HbP8$createEffect, runWithOwner as $9HbP8$runWithOwner, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, Show as $9HbP8$Show, createComputed as $9HbP8$createComputed, createRenderEffect as $9HbP8$createRenderEffect, mergeProps as $9HbP8$mergeProps, useContext as $9HbP8$useContext, createReaction as $9HbP8$createReaction, on as $9HbP8$on, Suspense as $9HbP8$Suspense, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, For as $9HbP8$For, createUniqueId as $9HbP8$createUniqueId, mapArray as $9HbP8$mapArray, batch as $9HbP8$batch, Switch as $9HbP8$Switch, Match as $9HbP8$Match, splitProps as $9HbP8$splitProps, createComponent as $9HbP8$createComponent1, createSelector as $9HbP8$createSelector, children as $9HbP8$children } from "solid-js";
 import { catchify as $9HbP8$catchify, report as $9HbP8$report, use_href_accessor as $9HbP8$use_href_accessor, dlog as $9HbP8$dlog1, ListenableSet as $9HbP8$ListenableSet, queueMacroTask as $9HbP8$queueMacroTask1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
+import { is_available_in as $9HbP8$is_available_in } from "@depict-ai/utilishared/src/latest";
 
 /*! 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.3";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.9.5";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -7483,6 +7484,21 @@ function $70bb27cc6be01fc7$export$140423fa4bfb6d63(props) {
     customUrls: $70bb27cc6be01fc7$var$customUrls
   }));
 }
+let $e422ea9eccb7892b$var$cachedHlsModule;
+async function $e422ea9eccb7892b$export$5d2f6cd705125cd3() {
+  if ($e422ea9eccb7892b$var$cachedHlsModule) return $e422ea9eccb7892b$var$cachedHlsModule;
+  const global_var_name = "_depict_ai_hls_polyfill";
+  const scriptTag = document.createElement("script");
+  scriptTag.type = "module";
+  // Our build systems aren't set-up for dynamic imports, so do this instead
+  scriptTag.append(`import("https://cdn.jsdelivr.net/npm/hls.js/+esm").then(m=>window.${global_var_name}=m)`);
+  document.head.append(scriptTag);
+  const hlsModule = await $9HbP8$is_available_in(window, global_var_name);
+  delete window[global_var_name];
+  scriptTag.remove();
+  $e422ea9eccb7892b$var$cachedHlsModule = hlsModule;
+  return hlsModule;
+}
 var $f916989c4b1be9f7$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<video loop class=d-standard-content>`);
 function $f916989c4b1be9f7$export$780a853d15174484({
   link_: link_,
@@ -7547,13 +7563,24 @@ function $f916989c4b1be9f7$export$780a853d15174484({
             when: type_ === "video",
             get children() {
               var _el$ = $9HbP8$getNextElement($f916989c4b1be9f7$var$_tmpl$);
-              $9HbP8$use(element => {
+              var _ref$ = $9HbP8$catchify(async element => {
                 const pageVisible = $5e3d278ef4c80cd7$export$54299a3c81f5425();
+                const owner = $9HbP8$getOwner();
                 element.addEventListener("loadedmetadata", $9HbP8$catchify(() => setAspectRatio(element.videoWidth / element.videoHeight)));
-                $9HbP8$createEffect(() => {
+                // If hls is not supported, dynamically import hls.js as polyfill
+                if (mediaUrl_.includes(".m3u8") && !element.canPlayType("application/vnd.apple.mpegurl")) {
+                  const hlsJs = await $e422ea9eccb7892b$export$5d2f6cd705125cd3().catch(e => $9HbP8$report([e, "Failed to load hls.js"], "error"));
+                  if (!hlsJs || !hlsJs.isSupported()) return;
+                  const hls = new hlsJs.default();
+                  hls.loadSource(mediaUrl_);
+                  hls.attachMedia(element);
+                }
+                // need runWithOwner for createEffect, because we potentially awaited above
+                $9HbP8$runWithOwner(owner, () => $9HbP8$createEffect(() => {
                   if (pageVisible()) element.play().catch(e => $9HbP8$dlog("Failed to play", e));else element.pause();
-                });
-              }, _el$);
+                }));
+              });
+              typeof _ref$ === "function" && $9HbP8$use(_ref$, _el$);
               _el$.addEventListener("playing", () => setHasLoaded(true));
               $9HbP8$setAttribute(_el$, "src", mediaUrl_);
               $9HbP8$setProperty(_el$, "controls", false);
@@ -9432,15 +9459,18 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
     $9HbP8$effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!isSelected?.();
+        _v$3 = !!isSelected?.(),
+        _v$4 = isSelected?.();
       _v$ !== _p$.e && $9HbP8$setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $9HbP8$setAttribute(_el$4, "data-search-result-id", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$4.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && $9HbP8$setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $9HbP8$runHydrationEvents();
     return _el$4;
@@ -10393,7 +10423,8 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
   class_: class_,
-  setSearchRoleOnContainer_ = true
+  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.
@@ -10607,7 +10638,11 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       },
       get placeholder() {
         return i18n_.placeholder_text_();
-      }
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
     }), false, false);
     $9HbP8$insert(_el$5, !isNewModal && $9HbP8$createComponent(ClearButton, {}), _el$10, _co$2);
     $9HbP8$insert(_el$3, isNewModal && $9HbP8$createComponent(BackButton, {}), _el$17, _co$5);
@@ -10656,8 +10691,8 @@ function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $42912431795f188e$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=discover-more><button class=major type=button>`),
   $42912431795f188e$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<b>`),
-  $42912431795f188e$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $42912431795f188e$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $42912431795f188e$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body 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><!$><!/>`),
+  $42912431795f188e$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class="depict plp search"role=dialog><div class=depict-search-modal-backdrop></div><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -10800,7 +10835,8 @@ function $42912431795f188e$var$RawClassicSearchModal({
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = (() => {
     var _el$4 = $9HbP8$getNextElement($42912431795f188e$var$_tmpl$3),
@@ -11041,7 +11077,16 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
         });
       }
     }));
-    $9HbP8$effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $9HbP8$effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $9HbP8$runHydrationEvents();
     return _el$2;
   })();
@@ -11266,16 +11311,19 @@ function $903297121898e5ff$export$d4994a86c6235f72({
                 }));
                 $9HbP8$effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href(),
-                    _v$3 = wholeTextToDisplay();
+                    _v$2 = isSelected(),
+                    _v$3 = href(),
+                    _v$4 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
-                  _v$2 !== _p$.t && $9HbP8$setAttribute(_el$7, "href", _p$.t = _v$2);
-                  _v$3 !== _p$.a && $9HbP8$setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+                  _v$2 !== _p$.t && $9HbP8$setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $9HbP8$setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $9HbP8$setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -11463,7 +11511,7 @@ var $500a16dd18ee5a71$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=inst
   $500a16dd18ee5a71$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=discover-more><button class=major type=button>`),
   $500a16dd18ee5a71$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<b>`),
   $500a16dd18ee5a71$var$_tmpl$6 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal-backdrop>`),
-  $500a16dd18ee5a71$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
+  $500a16dd18ee5a71$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body 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><!$><!/>`),
   $500a16dd18ee5a71$var$_tmpl$8 = /*#__PURE__*/$9HbP8$template(`<div class=left>`),
   $500a16dd18ee5a71$var$_tmpl$9 = /*#__PURE__*/$9HbP8$template(`<div class=right>`);
 /**
@@ -11811,7 +11859,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($9HbP8$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/package.json

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

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.3";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.9.5";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -8323,7 +8323,7 @@ const $82d079b68975fbf7$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_ && $3hooq$solidjsweb.ssr($82d079b68975fbf7$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(variant.brand)), $3hooq$solidjsweb.ssr($82d079b68975fbf7$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("title", $3hooq$solidjsweb.escape(variant.title, true), false), $3hooq$solidjsweb.escape(variant.title)), (variant.sub_heading_1 || variant.sub_heading_2 || brandInTagline) && $3hooq$solidjsweb.ssr($82d079b68975fbf7$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape([brandInTagline, variant.sub_heading_1, variant.sub_heading_2].filter(v => v).join(" | ")))];
-  return $3hooq$solidjsweb.ssr($82d079b68975fbf7$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), "instant-card ".concat(isSelected !== null && isSelected !== void 0 && isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(href(), true), false) + $3hooq$solidjsweb.ssrAttribute("data-search-result-id", $3hooq$solidjsweb.escape(display_.search_result_id, true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(InstantCardImageComponent_, {
+  return $3hooq$solidjsweb.ssr($82d079b68975fbf7$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), "instant-card ".concat(isSelected !== null && isSelected !== void 0 && isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(href(), true), false) + $3hooq$solidjsweb.ssrAttribute("data-search-result-id", $3hooq$solidjsweb.escape(display_.search_result_id, true), false) + $3hooq$solidjsweb.ssrAttribute("aria-selected", $3hooq$solidjsweb.escape(isSelected === null || isSelected === void 0 ? void 0 : isSelected(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.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;
@@ -9187,7 +9187,8 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
     class_: class_,
-    setSearchRoleOnContainer_ = true
+    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.
@@ -9277,7 +9278,11 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
     },
     get placeholder() {
       return i18n_.placeholder_text_();
-    }
+    },
+    "aria-autocomplete": "list",
+    "aria-haspopup": "dialog"
+  }, ariaControls && {
+    "aria-controls": ariaControls
   }), 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() {
@@ -9314,8 +9319,8 @@ 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="', '" role="search"><!--$-->', '<!--/--><div class="padded"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
-  $9035b24c2dbd3f36$var$_tmpl$4 = ["<div", ' class="', '"><div class="depict-search-modal-backdrop"></div><!--$-->', "<!--/--></div>"];
+  $9035b24c2dbd3f36$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>"],
+  $9035b24c2dbd3f36$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
  */
@@ -9453,7 +9458,8 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   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",
@@ -9542,7 +9548,7 @@ function $317500f39819fba6$export$9ca09caa9c849d9c() {
   return $3hooq$solidjsweb.ssr($317500f39819fba6$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey());
 }
 var $d1e7b96fb13cd1d3$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
-  $d1e7b96fb13cd1d3$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+  $d1e7b96fb13cd1d3$var$_tmpl$2 = ["<div", ' class="', '"', "><!--$-->", "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $d1e7b96fb13cd1d3$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent = 400;
 const $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent = 200;
@@ -9577,7 +9583,7 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
     var _listing_3;
     return (_listing_3 = listing_()) === null || _listing_3 === void 0 ? void 0 : _listing_3.ancestors;
   });
-  return $3hooq$solidjsweb.ssr($d1e7b96fb13cd1d3$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(LinkToListing, {
+  return $3hooq$solidjsweb.ssr($d1e7b96fb13cd1d3$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("aria-selected", $3hooq$solidjsweb.escape(isSelected(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(LinkToListing, {
     "class": "image-part",
     get style() {
       var _image_urls$length, _image_urls;
@@ -9788,7 +9794,7 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $b0f8d9f49e018db9$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
               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), {
+              return $3hooq$solidjsweb.ssr($79a8fa74cb5cdfb9$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "suggestion ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("aria-selected", $3hooq$solidjsweb.escape(isSelected(), true), false) + $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",
                 whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
@@ -9970,7 +9976,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="', '" role="search"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
+  $43600b30502feeda$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
  */
@@ -10297,7 +10303,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   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.3";
+export const version = "4.9.5";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.3";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.9.5";
 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;
@@ -9082,7 +9082,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
     class_: class_,
-    setSearchRoleOnContainer_ = true
+    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.
@@ -9172,7 +9173,11 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     },
     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() {
@@ -9209,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="', '" role="search"><!--$-->', '<!--/--><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
  */
@@ -9348,7 +9353,8 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    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",
@@ -9437,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;
@@ -9472,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;
@@ -9683,7 +9689,7 @@ function $5175a47d13b7c228$export$d4994a86c6235f72(_ref) {
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $d0883254246d3eb6$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
               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), {
+              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",
                 whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
@@ -9865,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="', '" role="search"><!--$-->', '<!--/--><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
  */
@@ -10192,7 +10198,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    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.3";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.9.5";
 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;
     }
@@ -8646,7 +8646,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
   class_: class_,
-  setSearchRoleOnContainer_ = true
+  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.
@@ -8733,7 +8734,11 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
     },
     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() {
@@ -8770,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="', '" role="search"><!--$-->', '<!--/--><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
  */
@@ -8903,7 +8908,8 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    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",
@@ -8992,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;
@@ -9017,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}`;
@@ -9216,7 +9222,7 @@ function $a13dbcf80d79229c$export$d4994a86c6235f72({
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
               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), {
+              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",
                 whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
@@ -9394,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="', '" role="search"><!--$-->', '<!--/--><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
  */
@@ -9710,7 +9716,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    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.3";
+export const version = "4.9.5";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */