fix focus ring color on menu and select component

actifyjs · Nov 9, 2024 · 2b47e19 · 2b47e19
1 parent 755f1fa
commit 2b47e19
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 12 deletions.
diff --git a/packages/actify/src/components/ListBox/Option.tsx b/packages/actify/src/components/ListBox/Option.tsx
@@ -1,27 +1,46 @@
-import { AriaOptionProps, useOption } from 'react-aria'
+import {
+  AriaFocusRingProps,
+  AriaOptionProps,
+  mergeProps,
+  useFocusRing,
+  useOption
+} from 'react-aria'
 import { ListState, Node } from 'react-stately'
 
+import { FocusRing } from '../FocusRing'
 import React from 'react'
 import { Ripple } from './../Ripple'
 import clsx from 'clsx'
 import styles from './option.module.css'
 
-interface OptionProps<T> extends AriaOptionProps {
+interface OptionProps<T> extends AriaOptionProps, AriaFocusRingProps {
   item: Node<T>
   state: ListState<T>
 }
 
-const Option = <T extends object>({ item, state }: OptionProps<T>) => {
+const Option = <T extends object>({
+  item,
+  state,
+  ...props
+}: OptionProps<T>) => {
   const ref = React.useRef(null)
+  const { focusProps, isFocusVisible } = useFocusRing(props)
   const { optionProps, isSelected } = useOption({ key: item.key }, state, ref)
 
   return (
     <li
       ref={ref}
-      {...optionProps}
+      {...mergeProps(focusProps, optionProps)}
       className={clsx(styles['item'], isSelected && styles['selected'])}
     >
       {item.rendered}
+      {isFocusVisible && (
+        <FocusRing
+          style={{
+            color: 'rgb(var(--md-sys-color-primary))'
+          }}
+        />
+      )}
       <Ripple />
     </li>
   )

diff --git a/packages/actify/src/components/ListBox/listbox.module.css b/packages/actify/src/components/ListBox/listbox.module.css
@@ -1,11 +1,11 @@
 .items {
   list-style: none;
   margin: 0;
-  padding: 0;
   display: block;
+  padding-left: 8px;
   padding-block: 8px;
+  padding-right: 8px;
   list-style-type: none;
-  margin: 0;
   outline: none;
   box-sizing: border-box;
   background-color: var(

diff --git a/packages/actify/src/components/ListBox/option.module.css b/packages/actify/src/components/ListBox/option.module.css
@@ -53,6 +53,9 @@
   padding-inline-start: var(--md-menu-item-leading-space, 16px);
   padding-inline-end: var(--md-menu-item-trailing-space, 16px);
 }
+.item:focus-visible {
+  outline: none;
+}
 .item.selected {
   background-color: var(
     --md-menu-item-selected-container-color,

diff --git a/packages/actify/src/components/Menus/MenuItem.tsx b/packages/actify/src/components/Menus/MenuItem.tsx
@@ -49,7 +49,13 @@ export function MenuItem<T>({
       {...mergeProps(menuItemProps, focusProps)}
     >
       <Item container={<Container />}>{item.rendered}</Item>
-      {isFocusVisible && <FocusRing />}
+      {isFocusVisible && (
+        <FocusRing
+          style={{
+            color: 'rgb(var(--md-sys-color-primary))'
+          }}
+        />
+      )}
     </li>
   )
 }
diff --git a/packages/actify/src/components/Menus/menu.module.css b/packages/actify/src/components/Menus/menu.module.css
@@ -1,8 +1,4 @@
 .menu {
-  border-radius: var(
-    --md-menu-container-shape,
-    var(--md-sys-shape-corner-extra-small, 4px)
-  );
   display: none;
   inset: auto;
   border: none;
@@ -82,7 +78,10 @@
   position: relative; /* for focus ring */
   list-style: none;
   background-color: var(--md-menu-item-container-color, transparent);
-  border-radius: inherit;
+  border-radius: var(
+    --md-menu-container-shape,
+    var(--md-sys-shape-corner-extra-small, 4px)
+  );
   display: flex;
   flex: 1;
   max-width: inherit;