@depict-ai/ui 4.9.3 → 4.9.5

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.3";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.9.5";
 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;
     }
@@ -8544,7 +8544,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.
@@ -8631,7 +8632,11 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
     },
     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() {
@@ -8668,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="', '" role="search"><!--$-->', '<!--/--><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
  */
@@ -8801,7 +8806,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 = $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",
@@ -8890,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;
@@ -8915,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}`;
@@ -9114,7 +9120,7 @@ function $903297121898e5ff$export$d4994a86c6235f72({
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
               const wholeTextToDisplay = $i7OB2$createMemo(() => item().title_);
-              return $i7OB2$ssr($903297121898e5ff$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `suggestion ${isSelected() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false) + $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(wholeTextToDisplay(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
+              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",
                 whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
@@ -9292,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="', '" role="search"><!--$-->', '<!--/--><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
  */
@@ -9608,7 +9614,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($i7OB2$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));