refactor: color picker

Author: segunadebayo

.changeset/color-picker-dialog-role.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/color-picker": patch
+---
+
+- Add `role="dialog"` to color picker content when not inline to ensure proper `aria-controls` detection
+- Add `aria-haspopup="dialog"` to color picker trigger when not inline for better accessibility

examples/next-ts/pages/compositions

@@ -154,11 +154,12 @@ export function connect<T extends PropTypes>(
         "aria-label": `select color. current color is ${valueAsString}`,
         "aria-controls": dom.getContentId(scope),
         "aria-labelledby": dom.getLabelId(scope),
+        "aria-haspopup": prop("inline") ? undefined : "dialog",
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(readOnly),
         "data-invalid": dataAttr(invalid),
         "data-placement": currentPlacement,
-        "aria-expanded": dataAttr(open),
+        "aria-expanded": open,
         "data-state": open ? "open" : "closed",
         "data-focus": dataAttr(focused),
         type: "button",
@@ -190,6 +191,7 @@ export function connect<T extends PropTypes>(
         ...parts.content.attrs,
         id: dom.getContentId(scope),
         dir: prop("dir"),
+        role: prop("inline") ? undefined : "dialog",
         tabIndex: -1,
         "data-placement": currentPlacement,
         "data-state": open ? "open" : "closed",

packages/machines/color-picker/src/color-picker.connect.ts

@@ -16,6 +16,7 @@
   padding: 24px;
   border: 1px solid #d5d5d5;
   background: white;
+  z-index: var(--layer-index);
 }
 
 [data-scope="color-picker"][data-part="content"] > .content__inner {