feat(fab): add focus ring

Author: adrcotfas

src/components/FAB/FabShell.tsx

@@ -3,6 +3,7 @@ import {
   AccessibilityState,
   ColorValue,
   GestureResponderEvent,
+  Platform,
   PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
@@ -24,8 +25,12 @@ import {
   FloatingActionButtonSize,
   FloatingActionButtonTokens,
   FloatingActionButtonVariant,
+  FOCUS_RING_INSET,
+  FOCUS_RING_THICKNESS,
+  webNoOutline,
 } from './tokens';
 import { useFabVisibility } from './useFabVisibility';
+import { useFocusRing } from './useFocusRing';
 import { getDimensions, resolveColors } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { ShapeToken } from '../../theme/utils/shape';
@@ -286,6 +291,15 @@ const FabShell = forwardRef<View, FabShellProps>(
       [borderRadius, containerBg]
     );
 
+    const { focusedSV, onFocus, onBlur } = useFocusRing();
+    const focusRingStyle = useAnimatedStyle(
+      () => ({
+        opacity: focusedSV.value ? 1 : 0,
+        borderRadius: borderRadius.value + FOCUS_RING_INSET,
+      }),
+      [borderRadius]
+    );
+
     return (
       <Reanimated.View
         ref={ref}
@@ -304,11 +318,16 @@ const FabShell = forwardRef<View, FabShellProps>(
             borderless
             background={background}
             onPress={onPress}
+            onFocus={onFocus}
+            onBlur={onBlur}
             accessibilityLabel={accessibilityLabel}
             accessibilityRole="button"
             accessibilityState={accessibilityState}
             testID={testID}
-            style={children ? styles.fill : null}
+            style={[
+              children ? styles.fill : null,
+              Platform.OS === 'web' ? webNoOutline : null,
+            ]}
           >
             {children ?? (
               <FabContent
@@ -333,6 +352,13 @@ const FabShell = forwardRef<View, FabShellProps>(
             )}
           </TouchableRipple>
         </Reanimated.View>
+        <Reanimated.View
+          style={[
+            styles.focusRing,
+            { borderColor: theme.colors.secondary },
+            focusRingStyle,
+          ]}
+        />
       </Reanimated.View>
     );
   }
@@ -356,6 +382,15 @@ const styles = StyleSheet.create({
   pointerEventsNone: {
     pointerEvents: 'none',
   },
+  focusRing: {
+    position: 'absolute',
+    top: -FOCUS_RING_INSET,
+    left: -FOCUS_RING_INSET,
+    right: -FOCUS_RING_INSET,
+    bottom: -FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_THICKNESS,
+    pointerEvents: 'none',
+  },
 });
 
 export default FabShell;

src/components/FAB/FloatingActionButtonMenu.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   ColorValue,
   GestureResponderEvent,
+  Platform,
   StyleSheet,
   View,
 } from 'react-native';
@@ -23,7 +24,11 @@ import {
   FloatingActionButtonSize,
   FloatingActionButtonTokens,
   FloatingActionButtonVariant,
+  FOCUS_RING_INSET,
+  FOCUS_RING_THICKNESS,
+  webNoOutline,
 } from './tokens';
+import { useFocusRing } from './useFocusRing';
 import { resolveColors } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
@@ -242,33 +247,56 @@ const MenuItem = ({
   const { height, iconSize, leading, trailing, iconLabelGap, shape } =
     FloatingActionButtonMenuTokens.listItem;
   const borderRadius = resolveCornerRadius(theme, shape);
+
+  const { focusedSV, onFocus, onBlur } = useFocusRing();
+  const focusRingStyle = useAnimatedStyle(() => ({
+    opacity: focusedSV.value ? 1 : 0,
+  }));
+
   return (
-    <View
-      style={[
-        styles.menuItem,
-        { height, borderRadius, backgroundColor: colors.container },
-      ]}
-    >
-      <TouchableRipple
-        borderless
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel ?? label}
-        style={{ borderRadius }}
-        testID={testID}
+    <View style={styles.menuItemWrapper}>
+      <View
+        style={[
+          styles.menuItem,
+          { height, borderRadius, backgroundColor: colors.container },
+        ]}
       >
-        <FabContent
-          icon={icon}
-          label={label}
-          contentColor={colors.content}
-          height={height}
-          iconSize={iconSize}
-          leading={leading}
-          trailing={trailing}
-          iconLabelGap={iconLabelGap}
+        <TouchableRipple
+          borderless
+          onPress={onPress}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel ?? label}
+          style={[
+            { borderRadius },
+            Platform.OS === 'web' ? webNoOutline : null,
+          ]}
           testID={testID}
-        />
-      </TouchableRipple>
+        >
+          <FabContent
+            icon={icon}
+            label={label}
+            contentColor={colors.content}
+            height={height}
+            iconSize={iconSize}
+            leading={leading}
+            trailing={trailing}
+            iconLabelGap={iconLabelGap}
+            testID={testID}
+          />
+        </TouchableRipple>
+      </View>
+      <Animated.View
+        style={[
+          styles.menuItemFocusRing,
+          {
+            borderColor: theme.colors.secondary,
+            borderRadius: borderRadius + FOCUS_RING_INSET,
+          },
+          focusRingStyle,
+        ]}
+      />
     </View>
   );
 };
@@ -690,9 +718,21 @@ const styles = StyleSheet.create({
   itemsEnd: {
     right: 0,
   },
+  menuItemWrapper: {
+    position: 'relative',
+  },
   menuItem: {
     overflow: 'hidden',
   },
+  menuItemFocusRing: {
+    position: 'absolute',
+    top: -FOCUS_RING_INSET,
+    left: -FOCUS_RING_INSET,
+    right: -FOCUS_RING_INSET,
+    bottom: -FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_THICKNESS,
+    pointerEvents: 'none',
+  },
   triggerSlot: {
     justifyContent: 'flex-start',
   },

src/components/FAB/tokens.ts

@@ -1,3 +1,6 @@
+import type { ViewStyle } from 'react-native';
+
+import { tokens } from '../../theme/tokens';
 import type {
   ColorRole,
   Elevation,
@@ -116,3 +119,10 @@ export const FloatingActionButtonMenuTokens = {
   listItem,
   spacing,
 };
+
+const focusIndicator = tokens.md.sys.state.focusIndicator;
+export const FOCUS_RING_THICKNESS = focusIndicator.thickness;
+export const FOCUS_RING_OUTER_OFFSET = focusIndicator.outerOffset;
+export const FOCUS_RING_INSET = FOCUS_RING_OUTER_OFFSET + FOCUS_RING_THICKNESS;
+
+export const webNoOutline = { outline: 'none' } as unknown as ViewStyle;

src/components/FAB/useFocusRing.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
+
+export type FocusRingState = {
+  /**
+   * `true` when the surface is keyboard-focused. Drive the focus ring's
+   * `opacity` from this in a `useAnimatedStyle`.
+   */
+  focusedSV: SharedValue<boolean>;
+  /** Wire to the `Pressable`/`TouchableRipple`'s `onFocus`. */
+  onFocus: () => void;
+  /** Wire to the `Pressable`/`TouchableRipple`'s `onBlur`. */
+  onBlur: () => void;
+};
+
+/**
+ * Drives an MD3 focus indicator for FAB-flavored surfaces. On web, focus is
+ * gated by `:focus-visible` so a mouse click does not light the ring; on
+ * native, every focus event is honored.
+ */
+export function useFocusRing(): FocusRingState {
+  const focusedSV = useSharedValue(false);
+
+  const onFocus = React.useCallback(() => {
+    if (
+      Platform.OS === 'web' &&
+      !document.activeElement?.matches(':focus-visible')
+    ) {
+      return;
+    }
+    focusedSV.value = true;
+  }, [focusedSV]);
+
+  const onBlur = React.useCallback(() => {
+    focusedSV.value = false;
+  }, [focusedSV]);
+
+  return { focusedSV, onFocus, onBlur };
+}