chore: fix highlight

chakra-ui · Jan 5, 2025 · 225c995 · 225c995
1 parent 42c2828
commit 225c995
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/packages/machines/cascader/src/cascader.connect.ts b/packages/machines/cascader/src/cascader.connect.ts
@@ -361,25 +361,26 @@ export function connect<T extends PropTypes, V = any>(
         id: dom.getItemId(state.context, itemState.value),
         dir: state.context.dir,
         role: "treeitem",
-        "data-index-path": props.indexPath.join(","),
+        "aria-haspopup": itemState.isBranch ? "menu" : undefined,
         "aria-expanded": itemState.isBranch ? itemState.highlighted : false,
         "aria-controls": itemState.isBranch ? dom.getListId(state.context, itemState.value) : undefined,
-        "data-value": itemState.value,
+        "aria-owns": itemState.isBranch ? dom.getListId(state.context, itemState.value) : undefined,
         "aria-selected": itemState.selected,
+        "aria-disabled": ariaAttr(itemState.disabled),
+        "data-value": itemState.value,
         "data-state": itemState.selected ? "checked" : "unchecked",
         "data-highlighted": dataAttr(itemState.highlighted),
         "data-disabled": dataAttr(itemState.disabled),
-        "aria-disabled": ariaAttr(itemState.disabled),
         "data-selected": dataAttr(itemState.selected),
+        "data-type": itemState.isBranch ? "branch" : "leaf",
+        "data-index-path": props.indexPath.join(","),
         onDoubleClick() {
           if (itemState.disabled) return
           send("CLOSE")
         },
         onPointerMove(event) {
           if (itemState.disabled || event.pointerType !== "mouse") return
           if (highlightedValue === itemState.value) return
-          // We only want to highlight items that have children (mouse only)
-          if (!itemState.isBranch) return
           send({ type: "ITEM.POINTER_MOVE", indexPath })
         },
         onClick(event) {

diff --git a/shared/src/css/cascader.css b/shared/src/css/cascader.css
@@ -98,15 +98,16 @@
   cursor: not-allowed;
 }
 
-[data-scope="cascader"][data-part="item"]:not([data-disabled]):not([data-highlighted]):hover {
-  background: rgba(107, 107, 110, 0.105);
-}
-
 [data-scope="cascader"][data-part="item"][data-highlighted] {
   background: rgb(0, 0, 195);
   color: white;
 }
 
+[data-scope="cascader"][data-part="item"][data-highlighted][data-type="leaf"] {
+  background: rgba(107, 107, 110, 0.105);
+  color: inherit;
+}
+
 [data-scope="cascader"][data-part="item-text"] {
   flex: 1;
   width: 100%;