@zag-js/combobox 1.39.0 → 1.40.0

package/dist/combobox.connect.d.mts

@@ -4,6 +4,7 @@ import { CollectionItem } from '@zag-js/collection';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
+import '@zag-js/live-region';
 
 declare function connect<T extends PropTypes, V extends CollectionItem>(service: ComboboxService<V>, normalize: NormalizeProps<T>): ComboboxApi<T, V>;
 

package/dist/combobox.connect.d.ts

@@ -4,6 +4,7 @@ import { CollectionItem } from '@zag-js/collection';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
+import '@zag-js/live-region';
 
 declare function connect<T extends PropTypes, V extends CollectionItem>(service: ComboboxService<V>, normalize: NormalizeProps<T>): ComboboxApi<T, V>;
 

package/dist/combobox.machine.d.mts

@@ -4,6 +4,7 @@ import '@zag-js/collection';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
 import '@zag-js/types';
+import '@zag-js/live-region';
 
 declare const machine: _zag_js_core.Machine<ComboboxSchema<any>>;
 

package/dist/combobox.machine.d.ts

@@ -4,6 +4,7 @@ import '@zag-js/collection';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
 import '@zag-js/types';
+import '@zag-js/live-region';
 
 declare const machine: _zag_js_core.Machine<ComboboxSchema<any>>;
 

package/dist/combobox.machine.js

@@ -33,12 +33,13 @@ __export(combobox_machine_exports, {
   machine: () => machine
 });
 module.exports = __toCommonJS(combobox_machine_exports);
+var import_collection = require("@zag-js/collection");
 var import_core = require("@zag-js/core");
 var import_dismissable = require("@zag-js/dismissable");
 var import_dom_query = require("@zag-js/dom-query");
 var import_focus_visible = require("@zag-js/focus-visible");
+var import_live_region = require("@zag-js/live-region");
 var import_popper = require("@zag-js/popper");
-var import_collection = require("@zag-js/collection");
 var import_utils = require("@zag-js/utils");
 var import_combobox = require("./combobox.collection.js");
 var dom = __toESM(require("./combobox.dom.js"));
@@ -179,7 +180,7 @@ var machine = createMachine({
       action(["syncInputValue"]);
     });
     track([() => context.get("highlightedValue")], () => {
-      action(["syncHighlightedItem", "autofillInputValue"]);
+      action(["syncHighlightedItem", "autofillInputValue", "announceHighlightedItem"]);
     });
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -390,7 +391,13 @@ var machine = createMachine({
     open: {
       tags: ["open", "focused"],
       entry: ["setInitialFocus"],
-      effects: ["trackFocusVisible", "scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
+      effects: [
+        "trackFocusVisible",
+        "scrollToHighlightedItem",
+        "trackDismissableLayer",
+        "trackPlacement",
+        "trackLiveRegion"
+      ],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -675,6 +682,14 @@ var machine = createMachine({
           }
         });
       },
+      trackLiveRegion({ refs, scope }) {
+        const liveRegion = (0, import_live_region.createLiveRegion)({
+          level: "assertive",
+          document: scope.getDoc()
+        });
+        refs.set("liveRegion", liveRegion);
+        return () => liveRegion.destroy();
+      },
       trackPlacement({ context, prop, scope }) {
         const anchorEl = () => dom.getControlEl(scope) || dom.getTriggerEl(scope);
         const positionerEl = () => dom.getPositionerEl(scope);
@@ -997,6 +1012,14 @@ var machine = createMachine({
         const item = prop("collection").find(context.get("highlightedValue"));
         context.set("highlightedItem", item);
       },
+      announceHighlightedItem({ context, prop, refs }) {
+        if (!(0, import_dom_query.isApple)()) return;
+        const value = context.get("highlightedValue");
+        const optionText = value ? prop("collection").stringifyItem(prop("collection").find(value)) : null;
+        if (!optionText) return;
+        const isSelected = value ? context.get("value").includes(value) : false;
+        refs.get("liveRegion")?.announce(isSelected ? `${optionText}, selected` : optionText);
+      },
       toggleVisibility({ event, send, prop }) {
         send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: event });
       }

package/dist/combobox.machine.mjs

@@ -1,14 +1,23 @@
 // src/combobox.machine.ts
-import { setup } from "@zag-js/core";
-import { trackDismissableElement } from "@zag-js/dismissable";
-import { clickIfLink, nextTick, observeAttributes, raf, scrollIntoView, setCaretToEnd } from "@zag-js/dom-query";
-import { getInteractionModality, setInteractionModality, trackFocusVisible } from "@zag-js/focus-visible";
-import { getPlacement } from "@zag-js/popper";
 import {
   createSelectedItemMap,
   deriveSelectionState,
   resolveSelectedItems
 } from "@zag-js/collection";
+import { setup } from "@zag-js/core";
+import { trackDismissableElement } from "@zag-js/dismissable";
+import {
+  clickIfLink,
+  isApple,
+  nextTick,
+  observeAttributes,
+  raf,
+  scrollIntoView,
+  setCaretToEnd
+} from "@zag-js/dom-query";
+import { getInteractionModality, setInteractionModality, trackFocusVisible } from "@zag-js/focus-visible";
+import { createLiveRegion } from "@zag-js/live-region";
+import { getPlacement } from "@zag-js/popper";
 import { addOrRemove, isBoolean, isEqual, match, remove } from "@zag-js/utils";
 import { collection } from "./combobox.collection.mjs";
 import * as dom from "./combobox.dom.mjs";
@@ -149,7 +158,7 @@ var machine = createMachine({
       action(["syncInputValue"]);
     });
     track([() => context.get("highlightedValue")], () => {
-      action(["syncHighlightedItem", "autofillInputValue"]);
+      action(["syncHighlightedItem", "autofillInputValue", "announceHighlightedItem"]);
     });
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -360,7 +369,13 @@ var machine = createMachine({
     open: {
       tags: ["open", "focused"],
       entry: ["setInitialFocus"],
-      effects: ["trackFocusVisible", "scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
+      effects: [
+        "trackFocusVisible",
+        "scrollToHighlightedItem",
+        "trackDismissableLayer",
+        "trackPlacement",
+        "trackLiveRegion"
+      ],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -645,6 +660,14 @@ var machine = createMachine({
           }
         });
       },
+      trackLiveRegion({ refs, scope }) {
+        const liveRegion = createLiveRegion({
+          level: "assertive",
+          document: scope.getDoc()
+        });
+        refs.set("liveRegion", liveRegion);
+        return () => liveRegion.destroy();
+      },
       trackPlacement({ context, prop, scope }) {
         const anchorEl = () => dom.getControlEl(scope) || dom.getTriggerEl(scope);
         const positionerEl = () => dom.getPositionerEl(scope);
@@ -967,6 +990,14 @@ var machine = createMachine({
         const item = prop("collection").find(context.get("highlightedValue"));
         context.set("highlightedItem", item);
       },
+      announceHighlightedItem({ context, prop, refs }) {
+        if (!isApple()) return;
+        const value = context.get("highlightedValue");
+        const optionText = value ? prop("collection").stringifyItem(prop("collection").find(value)) : null;
+        if (!optionText) return;
+        const isSelected = value ? context.get("value").includes(value) : false;
+        refs.get("liveRegion")?.announce(isSelected ? `${optionText}, selected` : optionText);
+      },
       toggleVisibility({ event, send, prop }) {
         send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: event });
       }

package/dist/combobox.props.d.mts

@@ -4,6 +4,7 @@ import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
 import '@zag-js/types';
+import '@zag-js/live-region';
 
 declare const props: (keyof ComboboxProps<any>)[];
 declare const splitProps: <Props extends Partial<ComboboxProps<any>>>(props: Props) => [Partial<ComboboxProps<any>>, Omit<Props, keyof ComboboxProps<any>>];

package/dist/combobox.props.d.ts

@@ -4,6 +4,7 @@ import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
 import '@zag-js/types';
+import '@zag-js/live-region';
 
 declare const props: (keyof ComboboxProps<any>)[];
 declare const splitProps: <Props extends Partial<ComboboxProps<any>>>(props: Props) => [Partial<ComboboxProps<any>>, Omit<Props, keyof ComboboxProps<any>>];

package/dist/combobox.types.d.mts

@@ -5,6 +5,7 @@ import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import { RequiredBy, DirectionProperty, CommonProperties, PropTypes } from '@zag-js/types';
+import { LiveRegion } from '@zag-js/live-region';
 
 interface ValueChangeDetails<T extends CollectionItem = CollectionItem> {
     value: string[];
@@ -263,6 +264,9 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         highlightedItem: T | null;
         selectedItemMap: Map<string, T>;
     };
+    refs: {
+        liveRegion: LiveRegion | null;
+    };
     computed: {
         isCustomValue: boolean;
         isInputValueEmpty: boolean;

package/dist/combobox.types.d.ts

@@ -5,6 +5,7 @@ import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import { RequiredBy, DirectionProperty, CommonProperties, PropTypes } from '@zag-js/types';
+import { LiveRegion } from '@zag-js/live-region';
 
 interface ValueChangeDetails<T extends CollectionItem = CollectionItem> {
     value: string[];
@@ -263,6 +264,9 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         highlightedItem: T | null;
         selectedItemMap: Map<string, T>;
     };
+    refs: {
+        liveRegion: LiveRegion | null;
+    };
     computed: {
         isCustomValue: boolean;
         isInputValueEmpty: boolean;

package/dist/index.d.mts

@@ -10,3 +10,4 @@ export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';
+import '@zag-js/live-region';

package/dist/index.d.ts

@@ -10,3 +10,4 @@ export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';
+import '@zag-js/live-region';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/combobox",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "description": "Core logic for the combobox widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,16 +26,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.39.0",
-    "@zag-js/aria-hidden": "1.39.0",
-    "@zag-js/collection": "1.39.0",
-    "@zag-js/core": "1.39.0",
-    "@zag-js/dismissable": "1.39.0",
-    "@zag-js/dom-query": "1.39.0",
-    "@zag-js/focus-visible": "1.39.0",
-    "@zag-js/popper": "1.39.0",
-    "@zag-js/types": "1.39.0",
-    "@zag-js/utils": "1.39.0"
+    "@zag-js/anatomy": "1.40.0",
+    "@zag-js/collection": "1.40.0",
+    "@zag-js/core": "1.40.0",
+    "@zag-js/dismissable": "1.40.0",
+    "@zag-js/dom-query": "1.40.0",
+    "@zag-js/live-region": "1.40.0",
+    "@zag-js/popper": "1.40.0",
+    "@zag-js/types": "1.40.0",
+    "@zag-js/focus-visible": "1.40.0",
+    "@zag-js/utils": "1.40.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"