From 4671ee7805e49d2cfa89845b17251dd54718eaec Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Tue, 7 Nov 2023 20:37:46 +0000 Subject: [PATCH] fix: add aria-controls --- .changeset/lovely-students-sneeze.md | 6 ++++++ packages/machines/color-picker/src/color-picker.connect.ts | 1 + packages/machines/date-picker/src/date-picker.connect.ts | 1 + 3 files changed, 8 insertions(+) create mode 100644 .changeset/lovely-students-sneeze.md diff --git a/.changeset/lovely-students-sneeze.md b/.changeset/lovely-students-sneeze.md new file mode 100644 index 0000000000..49fb0b023e --- /dev/null +++ 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 index 8245f03a2a..c1b7ecbd38 100644 --- 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(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 index f8c9c8d307..7d962c9f80 100644 --- 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(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,