diff --git a/packages/machines/cascader/src/cascader.connect.ts b/packages/machines/cascader/src/cascader.connect.ts index 024bbd8b14..6ac760f143 100644 --- a/packages/machines/cascader/src/cascader.connect.ts +++ b/packages/machines/cascader/src/cascader.connect.ts @@ -361,16 +361,19 @@ export function connect( 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") @@ -378,8 +381,6 @@ export function connect( 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 index 03e5e287f1..7055c9fa8d 100644 --- 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%;