@depict-ai/ui 4.9.2 → 4.9.4

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

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$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 = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -9432,15 +9432,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;
@@ -10378,7 +10381,7 @@ var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=b
   $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button type=button class=clear>`),
   $5285d2814d0fac0c$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=spacer>`),
   $5285d2814d0fac0c$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<button class="submit major"type=button>`),
-  $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+  $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -10392,7 +10395,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.
@@ -10488,6 +10493,13 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       [_el$17, _co$5] = $9HbP8$getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $9HbP8$getNextMarker(_el$18.nextSibling);
+    $9HbP8$spread(_el$3, $9HbP8$mergeProps1({
+      get ["class"]() {
+        return `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`;
+      }
+    }, setSearchRoleOnContainer_ && {
+      role: "search"
+    }), false, true);
     $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -10528,59 +10540,83 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       }
     }), true);
     $9HbP8$insert(_el$5, isNewModal && $9HbP8$createComponent(ClearButton, {}), _el$8, _co$);
-    _el$6.$$pointerdown = ({
-      pointerType: pointerType
-    }) => {
-      // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
-      if (pointerType === "mouse") {
-        const handler = $9HbP8$catchify1(({
-          pointerType: pointerType,
-          target: target
-        }) => {
-          if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
-          input_element.click();
-        });
-        window.addEventListener("pointerup", handler, {
-          once: true
-        });
-        $9HbP8$runWithOwner(owner_of_field_element, () => $9HbP8$onCleanup(() => window.removeEventListener("pointerup", handler)));
-      }
-    };
-    $9HbP8$addEventListener(_el$6, "select", $9HbP8$catchify1(() => {
-      if (disabled_)
-        // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
-        return;
-      if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
-        // everything was selected, clear filters on next submit on next input
-        input_element.addEventListener("input", $9HbP8$catchify1(() => clear_filters_(false)),
-        // We don't count this as user triggered since it wasn't explicit
-        {
-          once: true
-        });
-    }));
-    $9HbP8$addEventListener(_el$6, "input", $9HbP8$catchify1(() => {
-      const {
-        value: value
-      } = input_element;
-      if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      setSearchFieldValue(value);
-    }), true);
-    $9HbP8$addEventListener(_el$6, "keydown", $9HbP8$catchify1(e => {
-      if (disabled_) {
-        if (e.key !== "Tab" && e.key !== "Shift")
-          // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
-          input_element.click();
-      } else if (e.key === "Enter") {
-        const dont_submit = override_on_enter_?.(e);
-        if (!dont_submit) submit_query_();
-      }
-    }), true);
     var _ref$2 = $9HbP8$catchify1(el => {
       input_element = el;
       input_field_ref_?.(el);
     });
     typeof _ref$2 === "function" && $9HbP8$use(_ref$2, _el$6);
     _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $9HbP8$spread(_el$6, $9HbP8$mergeProps1(() => 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 onKeyDown() {
+        return $9HbP8$catchify1(e => {
+          if (disabled_) {
+            if (e.key !== "Tab" && e.key !== "Shift")
+              // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
+              input_element.click();
+          } else if (e.key === "Enter") {
+            const dont_submit = override_on_enter_?.(e);
+            if (!dont_submit) submit_query_();
+          }
+        });
+      },
+      get onInput() {
+        return $9HbP8$catchify1(() => {
+          const {
+            value: value
+          } = input_element;
+          if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
+          setSearchFieldValue(value);
+        });
+      },
+      get onSelect() {
+        return $9HbP8$catchify1(() => {
+          if (disabled_)
+            // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
+            return;
+          if (input_element.selectionStart === 0 && input_element.selectionEnd === input_element.value.length)
+            // everything was selected, clear filters on next submit on next input
+            input_element.addEventListener("input", $9HbP8$catchify1(() => clear_filters_(false)),
+            // We don't count this as user triggered since it wasn't explicit
+            {
+              once: true
+            });
+        });
+      },
+      "onPointerDown": ({
+        pointerType: pointerType
+      }) => {
+        // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
+        if (pointerType === "mouse") {
+          const handler = $9HbP8$catchify1(({
+            pointerType: pointerType,
+            target: target
+          }) => {
+            if (pointerType !== "mouse" || !(target instanceof Node) || target === field_div || field_div.contains(target)) return;
+            input_element.click();
+          });
+          window.addEventListener("pointerup", handler, {
+            once: true
+          });
+          $9HbP8$runWithOwner(owner_of_field_element, () => $9HbP8$onCleanup(() => window.removeEventListener("pointerup", handler)));
+        }
+      },
+      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);
     $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
@@ -10594,25 +10630,11 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         return _el$11;
       }
     }), _el$19, _co$6);
-    $9HbP8$effect(_p$ => {
-      var _v$ = `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`,
-        _v$2 = i18n_.search_field_field_aria_label_(),
-        _v$3 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $9HbP8$className(_el$3, _p$.e = _v$);
-      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$6, "aria-label", _p$.t = _v$2);
-      _v$3 !== _p$.a && $9HbP8$setAttribute(_el$6, "placeholder", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    $9HbP8$effect(() => $9HbP8$setProperty(_el$6, "value", searchFieldValue()));
     $9HbP8$runHydrationEvents();
     return _el$3;
   })();
 }
-$9HbP8$delegateEvents(["click", "keydown", "input", "pointerdown"]);
+$9HbP8$delegateEvents(["click"]);
 var $ffb84ffbf4014982$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<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">`);
 function $ffb84ffbf4014982$export$8d8893ffd8aca39a() {
   return $9HbP8$getNextElement($ffb84ffbf4014982$var$_tmpl$);
@@ -10642,8 +10664,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><!$><!/><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
  */
@@ -10785,7 +10807,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 = (() => {
     var _el$4 = $9HbP8$getNextElement($42912431795f188e$var$_tmpl$3),
@@ -11026,7 +11050,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;
   })();
@@ -11221,6 +11254,7 @@ function $903297121898e5ff$export$d4994a86c6235f72({
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
+              const wholeTextToDisplay = $9HbP8$createMemo(() => item().title_);
               return (() => {
                 var _el$7 = $9HbP8$getNextElement($903297121898e5ff$var$_tmpl$2);
                 $9HbP8$use(element => {
@@ -11245,20 +11279,24 @@ function $903297121898e5ff$export$d4994a86c6235f72({
                 $9HbP8$addEventListener(_el$7, "mouseenter", $9HbP8$catchify1(() => write_selected_index_([itemIndex_(), index])));
                 $9HbP8$insert(_el$7, $9HbP8$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
                   class_: "title line-clamp",
-                  get whole_text_to_display_() {
-                    return $9HbP8$createMemo(() => item().title_);
-                  },
+                  whole_text_to_display_: wholeTextToDisplay,
                   searching_for_value_: searching_for_value_
                 }));
                 $9HbP8$effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href();
+                    _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$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
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -11446,7 +11484,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><!$><!/><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>`);
 /**
@@ -11688,6 +11726,9 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -11790,7 +11831,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($9HbP8$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.9.2",
+  "version": "4.9.4",
   "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.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.9.4";
 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;
@@ -9170,8 +9170,8 @@ function $34934309832515dc$export$f7658c347b037c3f() {
   }, props), () => $3hooq$solidjsweb.ssr($34934309832515dc$var$_tmpl$), true);
 }
 var $29e5dbeb69da7a36$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
-  $29e5dbeb69da7a36$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
-  $29e5dbeb69da7a36$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0" enterkeyhint="search"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $29e5dbeb69da7a36$var$_tmpl$2 = ['<div class="field"><!--$-->', "<!--/-->", "<!--$-->", "<!--/--></div>"],
+  $29e5dbeb69da7a36$var$_tmpl$3 = ["<button", ' class="submit major" type="button"', ">", "</button>"];
 function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -9186,7 +9186,9 @@ function $29e5dbeb69da7a36$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.
@@ -9247,19 +9249,46 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       return $3hooq$solidjsweb.createComponent(BackIcon_, {});
     }
   })) : $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), true);
-  return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat($3hooq$solidjsweb.escape(class_(), true)) : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  return $3hooq$solidjsweb.ssrElement("div", $3hooq$solidjsweb.mergeProps({
+    get ["class"]() {
+      return "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+    }
+  }, setSearchRoleOnContainer_ && {
+    role: "search"
+  }), () => ["<!--$-->", $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
     get children() {
       return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "width:" + ($3hooq$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
     }
-  })), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape(searchFieldValue(), true), false) + $3hooq$solidjsweb.ssrAttribute("placeholder", $3hooq$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  })), "<!--/-->", "<!--$-->", !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), "<!--/-->", $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), $3hooq$solidjsweb.ssrElement("input", $3hooq$solidjsweb.mergeProps({
+    "class": "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""),
+    tabindex: "0",
+    enterkeyhint: "search"
+  }, () => setSearchRoleOnContainer_ ? {
+    "aria-label": i18n_.search_field_field_aria_label_()
+  } :
+  // Searchbox announces basically the same as our aria-label, we could explore always using searchbox in the future
+  {
+    role: "searchbox"
+  }, {
+    get value() {
+      return searchFieldValue();
+    },
+    get placeholder() {
+      return i18n_.placeholder_text_();
+    },
+    "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() {
-      return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})));
+      return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})));
     }
-  })));
+  })), "<!--/-->"], true);
 }
 var $820f2920cc576f7e$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg" width="24" height="16"><path d="M.773 7.371L7.98.176C8.098.059 8.238 0 8.402 0s.305.059.422.176S9 .434 9 .598s-.059.305-.176.422L2.648 7.195h19.547a.59.59 0 0 1 .609.609c0 .172-.059.305-.176.422s-.262.176-.434.176H2.648l6.176 6.176a.59.59 0 0 1 .176.426c0 .16-.059.301-.176.422-.055.059-.121.109-.199.137s-.148.039-.223.039-.156-.012-.234-.039a.54.54 0 0 1-.187-.137L.773 8.227c-.117-.117-.176-.258-.176-.422a.6.6 0 0 1 .176-.434zm0 0"></path></svg>'];
 function $820f2920cc576f7e$export$8d8893ffd8aca39a() {
@@ -9290,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="', '"><!--$-->', '<!--/--><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
  */
@@ -9428,7 +9457,9 @@ function $9035b24c2dbd3f36$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 = $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",
@@ -9517,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;
@@ -9552,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;
@@ -9762,11 +9793,10 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 return urlObject.href;
               });
               const [isSelected, selectedDueToKeyboardNavigation] = $b0f8d9f49e018db9$export$fb40a80c530e5f2b(read_selected_index_, itemIndex_, () => index);
-              return $3hooq$solidjsweb.ssr($79a8fa74cb5cdfb9$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "suggestion ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(href(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $23c3f390dee33ff8$export$ba17c5b7e6dda39f), {
+              const wholeTextToDisplay = $3hooq$solidjs.createMemo(() => item().title_);
+              return $3hooq$solidjsweb.ssr($79a8fa74cb5cdfb9$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "suggestion ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrAttribute("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",
-                get whole_text_to_display_() {
-                  return $3hooq$solidjs.createMemo(() => item().title_);
-                },
+                whole_text_to_display_: wholeTextToDisplay,
                 searching_for_value_: searching_for_value_
               })));
             }
@@ -9946,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="', '"><!--$-->', '<!--/--><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
  */
@@ -10189,6 +10219,9 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
               aspectRatio: 1,
               get ["class"]() {
                 return props.class_;
+              },
+              imgProps: {
+                alt: "Product image"
               }
             }),
             ...instant_results_options_
@@ -10269,7 +10302,9 @@ function $43600b30502feeda$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($3hooq$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/server/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.9.2";
+export const version = "4.9.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";