@depict-ai/ui 4.9.3 → 4.9.4

package/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.4";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -10090,15 +10090,18 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
     $52FdA$solidjsweb.effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected());
+        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected()),
+        _v$4 = isSelected === null || isSelected === void 0 ? void 0 : isSelected();
       _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $52FdA$solidjsweb.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 && $52FdA$solidjsweb.setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$4;
@@ -11104,7 +11107,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.
@@ -11324,7 +11328,11 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       },
       get placeholder() {
         return i18n_.placeholder_text_();
-      }
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
     }), false, false);
     $52FdA$solidjsweb.insert(_el$5, !isNewModal && $52FdA$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $52FdA$solidjsweb.insert(_el$3, isNewModal && $52FdA$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
@@ -11373,8 +11381,8 @@ function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $9035b24c2dbd3f36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $9035b24c2dbd3f36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
-  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $9035b24c2dbd3f36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.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><!$><!/>`),
+  $9035b24c2dbd3f36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.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
  */
@@ -11523,7 +11531,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 = (() => {
     var _el$4 = $52FdA$solidjsweb.getNextElement($9035b24c2dbd3f36$var$_tmpl$3),
@@ -11779,7 +11788,16 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $52FdA$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $52FdA$solidjsweb.effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -12013,16 +12031,19 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 }));
                 $52FdA$solidjsweb.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 && $52FdA$solidjsweb.setAttribute(_el$7, "href", _p$.t = _v$2);
-                  _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+                  _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -12214,7 +12235,7 @@ var $43600b30502feeda$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div
   $43600b30502feeda$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $43600b30502feeda$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
   $43600b30502feeda$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
+  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.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><!$><!/>`),
   $43600b30502feeda$var$_tmpl$8 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=left>`),
   $43600b30502feeda$var$_tmpl$9 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right>`);
 /**
@@ -12573,7 +12594,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($52FdA$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/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.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$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.4";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -9985,15 +9985,18 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
     $8tj43$effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected());
+        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected()),
+        _v$4 = isSelected === null || isSelected === void 0 ? void 0 : isSelected();
       _v$ !== _p$.e && $8tj43$setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $8tj43$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 && $8tj43$setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $8tj43$runHydrationEvents();
     return _el$4;
@@ -10999,7 +11002,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.
@@ -11219,7 +11223,11 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       },
       get placeholder() {
         return i18n_.placeholder_text_();
-      }
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
     }), false, false);
     $8tj43$insert(_el$5, !isNewModal && $8tj43$createComponent(ClearButton, {}), _el$10, _co$2);
     $8tj43$insert(_el$3, isNewModal && $8tj43$createComponent(BackButton, {}), _el$17, _co$5);
@@ -11268,8 +11276,8 @@ function $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $40411f2ec772c376$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
   $40411f2ec772c376$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<b>`),
-  $40411f2ec772c376$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $40411f2ec772c376$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $40411f2ec772c376$var$_tmpl$3 = /*#__PURE__*/$8tj43$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><!$><!/>`),
+  $40411f2ec772c376$var$_tmpl$4 = /*#__PURE__*/$8tj43$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
  */
@@ -11418,7 +11426,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 = (() => {
     var _el$4 = $8tj43$getNextElement($40411f2ec772c376$var$_tmpl$3),
@@ -11674,7 +11683,16 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $8tj43$effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $8tj43$effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $8tj43$setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $8tj43$runHydrationEvents();
     return _el$2;
   })();
@@ -11908,16 +11926,19 @@ function $5175a47d13b7c228$export$d4994a86c6235f72(_ref) {
                 }));
                 $8tj43$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 && $8tj43$setAttribute(_el$7, "href", _p$.t = _v$2);
-                  _v$3 !== _p$.a && $8tj43$setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+                  _v$2 !== _p$.t && $8tj43$setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $8tj43$setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $8tj43$setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -12109,7 +12130,7 @@ var $06fcd2a345efd24d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=inst
   $06fcd2a345efd24d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
   $06fcd2a345efd24d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<b>`),
   $06fcd2a345efd24d$var$_tmpl$6 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal-backdrop>`),
-  $06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
+  $06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$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><!$><!/>`),
   $06fcd2a345efd24d$var$_tmpl$8 = /*#__PURE__*/$8tj43$template(`<div class=left>`),
   $06fcd2a345efd24d$var$_tmpl$9 = /*#__PURE__*/$8tj43$template(`<div class=right>`);
 /**
@@ -12468,7 +12489,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($8tj43$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/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.4";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -9534,15 +9534,18 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
     $gVhhF$solidjsweb.effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!isSelected?.();
+        _v$3 = !!isSelected?.(),
+        _v$4 = isSelected?.();
       _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $gVhhF$solidjsweb.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 && $gVhhF$solidjsweb.setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$4;
@@ -10495,7 +10498,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.
@@ -10709,7 +10713,11 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       },
       get placeholder() {
         return i18n_.placeholder_text_();
-      }
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
     }), false, false);
     $gVhhF$solidjsweb.insert(_el$5, !isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $gVhhF$solidjsweb.insert(_el$3, isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
@@ -10758,8 +10766,8 @@ function $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $44f0b2e312a9b710$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $44f0b2e312a9b710$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
-  $44f0b2e312a9b710$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $44f0b2e312a9b710$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $44f0b2e312a9b710$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.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><!$><!/>`),
+  $44f0b2e312a9b710$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.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
  */
@@ -10902,7 +10910,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 = (() => {
     var _el$4 = $gVhhF$solidjsweb.getNextElement($44f0b2e312a9b710$var$_tmpl$3),
@@ -11143,7 +11152,16 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
         });
       }
     }));
-    $gVhhF$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -11368,16 +11386,19 @@ function $a13dbcf80d79229c$export$d4994a86c6235f72({
                 }));
                 $gVhhF$solidjsweb.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 && $gVhhF$solidjsweb.setAttribute(_el$7, "href", _p$.t = _v$2);
-                  _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+                  _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -11565,7 +11586,7 @@ var $11597ae03e703a47$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div
   $11597ae03e703a47$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $11597ae03e703a47$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
   $11597ae03e703a47$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
+  $11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.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><!$><!/>`),
   $11597ae03e703a47$var$_tmpl$8 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=left>`),
   $11597ae03e703a47$var$_tmpl$9 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right>`);
 /**
@@ -11913,7 +11934,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($gVhhF$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

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.3";
+export const version = "4.9.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.3";
+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;
@@ -10393,7 +10396,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 +10611,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 +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 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 +10808,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 +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;
   })();
@@ -11266,16 +11284,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 +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 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 +11832,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.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.3";
+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;
@@ -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.4";
 /**
  * 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.4";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -8218,7 +8218,7 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
   const secondary_image_url = ((_variant$image_urls = variant.image_urls) === null || _variant$image_urls === void 0 ? void 0 : _variant$image_urls[1]) || variant.secondary_image_url || variant.alternative_display_image_url;
   const brandInTagline = selected_index_ && variant.brand;
   const TitleBrandTagline = () => [!selected_index_ && $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape(variant.brand)), $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("title", $b8hua$escape(variant.title, true), false), $b8hua$escape(variant.title)), (variant.sub_heading_1 || variant.sub_heading_2 || brandInTagline) && $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$escape([brandInTagline, variant.sub_heading_1, variant.sub_heading_2].filter(v => v).join(" | ")))];
-  return $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$6, $b8hua$ssrHydrationKey(), "instant-card ".concat(isSelected !== null && isSelected !== void 0 && isSelected() ? "selected" : ""), $b8hua$ssrAttribute("href", $b8hua$escape(href(), true), false) + $b8hua$ssrAttribute("data-search-result-id", $b8hua$escape(display_.search_result_id, true), false), $b8hua$escape($b8hua$createComponent(InstantCardImageComponent_, {
+  return $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$6, $b8hua$ssrHydrationKey(), "instant-card ".concat(isSelected !== null && isSelected !== void 0 && isSelected() ? "selected" : ""), $b8hua$ssrAttribute("href", $b8hua$escape(href(), true), false) + $b8hua$ssrAttribute("data-search-result-id", $b8hua$escape(display_.search_result_id, true), false) + $b8hua$ssrAttribute("aria-selected", $b8hua$escape(isSelected === null || isSelected === void 0 ? void 0 : isSelected(), true), false), $b8hua$escape($b8hua$createComponent(InstantCardImageComponent_, {
     get src_() {
       var _variant$image_urls2;
       return ((_variant$image_urls2 = variant.image_urls) === null || _variant$image_urls2 === void 0 ? void 0 : _variant$image_urls2[0]) || variant.image_url || variant.display_image_url;
@@ -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.4";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -7834,7 +7834,7 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
   const secondary_image_url = variant.image_urls?.[1] || variant.secondary_image_url || variant.alternative_display_image_url;
   const brandInTagline = selected_index_ && variant.brand;
   const TitleBrandTagline = () => [!selected_index_ && $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(variant.brand)), $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("title", $5vyXB$solidjsweb.escape(variant.title, true), false), $5vyXB$solidjsweb.escape(variant.title)), (variant.sub_heading_1 || variant.sub_heading_2 || brandInTagline) && $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape([brandInTagline, variant.sub_heading_1, variant.sub_heading_2].filter(v => v).join(" | ")))];
-  return $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$6, $5vyXB$solidjsweb.ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false) + $5vyXB$solidjsweb.ssrAttribute("data-search-result-id", $5vyXB$solidjsweb.escape(display_.search_result_id, true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(InstantCardImageComponent_, {
+  return $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$6, $5vyXB$solidjsweb.ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false) + $5vyXB$solidjsweb.ssrAttribute("data-search-result-id", $5vyXB$solidjsweb.escape(display_.search_result_id, true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-selected", $5vyXB$solidjsweb.escape(isSelected?.(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(InstantCardImageComponent_, {
     get src_() {
       return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
     }
@@ -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.4";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.4";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -7732,7 +7732,7 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
   const secondary_image_url = variant.image_urls?.[1] || variant.secondary_image_url || variant.alternative_display_image_url;
   const brandInTagline = selected_index_ && variant.brand;
   const TitleBrandTagline = () => [!selected_index_ && $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape(variant.brand)), $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("title", $i7OB2$escape(variant.title, true), false), $i7OB2$escape(variant.title)), (variant.sub_heading_1 || variant.sub_heading_2 || brandInTagline) && $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape([brandInTagline, variant.sub_heading_1, variant.sub_heading_2].filter(v => v).join(" | ")))];
-  return $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$6, $i7OB2$ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false) + $i7OB2$ssrAttribute("data-search-result-id", $i7OB2$escape(display_.search_result_id, true), false), $i7OB2$escape($i7OB2$createComponent(InstantCardImageComponent_, {
+  return $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$6, $i7OB2$ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false) + $i7OB2$ssrAttribute("data-search-result-id", $i7OB2$escape(display_.search_result_id, true), false) + $i7OB2$ssrAttribute("aria-selected", $i7OB2$escape(isSelected?.(), true), false), $i7OB2$escape($i7OB2$createComponent(InstantCardImageComponent_, {
     get src_() {
       return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
     }
@@ -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)));