fix: add aria-controls

chakra-ui · Nov 7, 2023 · 4671ee7 · 4671ee7 · vercel · Nov 7, 2023
1 parent 3c702d0
commit 4671ee7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/lovely-students-sneeze.md b/.changeset/lovely-students-sneeze.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/color-picker": patch
+"@zag-js/date-picker": patch
+---
+
+Fix issue where `aria-controls` was not added to trigger
diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts
@@ -106,6 +106,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       ...parts.trigger.attrs,
       id: dom.getTriggerId(state.context),
       dir: state.context.dir,
+      "aria-controls": dom.getContentId(state.context),
       "aria-labelledby": dom.getLabelId(state.context),
       "data-disabled": dataAttr(isDisabled),
       "data-readonly": dataAttr(state.context.readOnly),

diff --git a/packages/machines/date-picker/src/date-picker.connect.ts b/packages/machines/date-picker/src/date-picker.connect.ts
@@ -585,6 +585,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       type: "button",
       "data-placement": currentPlacement,
       "aria-label": isOpen ? "Close calendar" : "Open calendar",
+      "aria-controls": dom.getContentId(state.context),
       "data-state": isOpen ? "open" : "closed",
       "aria-haspopup": "grid",
       disabled,