diff --git a/.changeset/silly-tools-tease.md b/.changeset/silly-tools-tease.md new file mode 100644 index 000000000..994510ea9 --- /dev/null +++ b/.changeset/silly-tools-tease.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Fix focused state styles on Menu items. diff --git a/src/components/pickers/Menu/MenuButton.tsx b/src/components/pickers/Menu/MenuButton.tsx index d30c0dfbf..79479c6d2 100644 --- a/src/components/pickers/Menu/MenuButton.tsx +++ b/src/components/pickers/Menu/MenuButton.tsx @@ -17,7 +17,7 @@ const StyledButton = tasty(Block, { border: { '': '#clear', pressed: '#clear', - 'focused & !hovered': '#purple-text', + focused: '#purple-text', }, fill: { '': '#clear', diff --git a/src/components/pickers/Menu/MenuItem.tsx b/src/components/pickers/Menu/MenuItem.tsx index e50c239bc..97c944888 100644 --- a/src/components/pickers/Menu/MenuItem.tsx +++ b/src/components/pickers/Menu/MenuItem.tsx @@ -1,6 +1,6 @@ import { Key, Node } from '@react-types/shared'; import { useRef } from 'react'; -import { FocusRing, useHover, useMenuItem } from 'react-aria'; +import { FocusRing, useFocusVisible, useHover, useMenuItem } from 'react-aria'; import { TreeState } from 'react-stately'; import { Styles } from '../../../tasty'; @@ -32,6 +32,9 @@ export function MenuItem(props: MenuItemProps) { const ref = useRef(null); const { hoverProps, isHovered } = useHover({ isDisabled: isDisabledKey }); + // Determine if focus should be shown (keyboard modality only) + const { isFocusVisible } = useFocusVisible({}); + const { menuItemProps, labelProps, @@ -56,12 +59,15 @@ export function MenuItem(props: MenuItemProps) { ref, ); + // Show focused state only when focus is keyboard-visible + const isKeyboardFocused = isFocused && isFocusVisible; + const buttonProps = { qa: itemProps.qa ? itemProps.qa : `MenuButton-${key}`, mods: { ...itemProps.mods, hovered: isHovered, - focused: isFocused, + focused: isKeyboardFocused, pressed: isPressed, }, }; @@ -90,7 +96,7 @@ export function MenuItem(props: MenuItemProps) { selected: isSelected, selectable: isSelectable, hovered: isHovered, - focused: isFocused, + focused: isKeyboardFocused, }} >