feat: add MD3 keyboard focus indicators

src/components/Card/Card.tsx

@@ -13,6 +13,7 @@ import { useInternalTheme } from '../../core/theming';
 import type { $Omit, ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import { splitStyles } from '../../utils/splitStyles';
+import { getFocusRingStyle, useFocusRing } from '../../utils/useFocusRing';
 import Surface from '../Surface';
 
 type OutlinedCardProps = {
@@ -141,6 +142,7 @@ const Card = ({
   ...rest
 }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const focusRing = useFocusRing(disabled);
   const isMode = React.useCallback(
     (modeToCompare: Mode) => {
       return cardMode === modeToCompare;
@@ -267,6 +269,12 @@ const Card = ({
           onPress={onPress}
           onPressIn={handlePressIn}
           onPressOut={handlePressOut}
+          onFocus={focusRing.onFocus}
+          onBlur={focusRing.onBlur}
+          style={[
+            borderRadiusCombinedStyles,
+            getFocusRingStyle(focusRing.focused, theme.colors.secondary),
+          ]}
         >
           {content}
         </Pressable>

src/components/Checkbox/Checkbox.tsx

@@ -3,9 +3,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
-  NativeSyntheticEvent,
   StyleProp,
-  TargetedEvent,
   ViewStyle,
 } from 'react-native';
 
@@ -22,9 +20,7 @@ import { getSelectionVisualState } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
 import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
-import { tokens } from '../../theme/tokens';
 import type { $RemoveChildren, ThemeProp } from '../../types';
-import { isKeyboardFocusEvent } from '../../utils/isKeyboardFocusEvent';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
 export type Props = $RemoveChildren<typeof TouchableRipple> & {
@@ -78,14 +74,6 @@ const {
   stateLayerSize: STATE_LAYER_SIZE,
 } = CheckboxTokens;
 
-const FOCUS_THICKNESS = tokens.md.sys.state.focusIndicator.thickness;
-// Focus indicator is a circular ring at the 40dp state-layer boundary.
-// We don't apply `focusIndicator.outerOffset` here because the surrounding
-// `TouchableRipple borderless` clips overflow to the tap-target shape,
-// so a ring drawn outside the 40dp circle would be cropped.
-const FOCUS_RING_SIZE = STATE_LAYER_SIZE;
-const FOCUS_RING_RADIUS = STATE_LAYER_SIZE / 2;
-
 /**
  * Checkboxes allow the selection of multiple options from a set.
  *
@@ -128,7 +116,6 @@ const Checkbox = ({
   // Web (react-native-web) doesn't auto-mirror layout, so flip the mask
   // anchor manually for RTL. Native handles it via `I18nManager`.
   const flipMaskForWebRTL = Platform.OS === 'web' && direction === 'rtl';
-  const [focused, setFocused] = React.useState(false);
 
   const selected = status === 'checked' || status === 'indeterminate';
 
@@ -226,19 +213,6 @@ const Checkbox = ({
   }
   const showIndeterminate = nextGlyph === 'indeterminate';
 
-  const handleFocus = React.useCallback(
-    (e: NativeSyntheticEvent<TargetedEvent>) => {
-      if (disabled) return;
-      if (!isKeyboardFocusEvent(e)) return;
-      setFocused(true);
-    },
-    [disabled]
-  );
-
-  const handleBlur = React.useCallback(() => {
-    setFocused(false);
-  }, []);
-
   const checked: boolean | 'mixed' =
     status === 'indeterminate' ? 'mixed' : status === 'checked';
 
@@ -262,24 +236,12 @@ const Checkbox = ({
       borderless
       centered
       onPress={onPress}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
       disabled={disabled}
       {...accessibilityProps}
       testID={testID}
-      style={[
-        styles.tapTarget,
-        Platform.OS === 'web' ? webNoOutline : undefined,
-        style,
-      ]}
+      style={[styles.tapTarget, style]}
     >
       <View pointerEvents="none" style={styles.tapTargetInner}>
-        {focused && !disabled ? (
-          <View
-            pointerEvents="none"
-            style={[styles.focusRing, { borderColor: theme.colors.secondary }]}
-          />
-        ) : null}
         <View style={[styles.container, { opacity: visual.containerOpacity }]}>
           <Animated.View
             pointerEvents="none"
@@ -369,10 +331,6 @@ const Checkmark = ({
   );
 };
 
-// Web-only style; not in StyleSheet because `outline` is outside ViewStyle.
-// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-const webNoOutline = { outline: 'none' } as unknown as ViewStyle;
-
 const styles = StyleSheet.create({
   tapTarget: {
     width: STATE_LAYER_SIZE,
@@ -387,13 +345,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  focusRing: {
-    position: 'absolute',
-    width: FOCUS_RING_SIZE,
-    height: FOCUS_RING_SIZE,
-    borderRadius: FOCUS_RING_RADIUS,
-    borderWidth: FOCUS_THICKNESS,
-  },
   container: {
     width: CONTAINER_SIZE,
     height: CONTAINER_SIZE,

src/components/Chip/Chip.tsx

@@ -17,6 +17,11 @@ import { useInternalTheme } from '../../core/theming';
 import { white } from '../../theme/colors';
 import type { $Omit, EllipsizeProp, ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
+import {
+  getFocusRingStyle,
+  toStyleList,
+  useFocusRing,
+} from '../../utils/useFocusRing';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
@@ -169,6 +174,25 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  * export default MyComponent;
  * ```
  */
+/**
+ * Room the chip reserves on its right for the close button, which fills all of
+ * it, so the body stops here and the two divide the chip.
+ *
+ * MD3 splits the same way and does not give a chip's trailing action 48dp; in
+ * material-web it is 24x24 with no expansion. This column is wider than that and
+ * gets no vertical expansion, so the strips above and below belong to the body
+ * and a near miss activates the chip rather than deleting it.
+ * @see https://github.com/material-components/material-web/blob/main/chips/internal/_trailing-icon.scss
+ */
+const CLOSE_AFFORDANCE_WIDTH = 34;
+
+/**
+ * Floor for the clamp below. The glyph is 18dp and sits 8dp from the right, so
+ * under this it hangs over the chip body, and part of the visible icon would
+ * activate the chip instead of removing it.
+ */
+const CLOSE_AFFORDANCE_MIN_WIDTH = 26;
+
 const Chip = ({
   mode = 'flat',
   children,
@@ -201,6 +225,7 @@ const Chip = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const closeFocusRing = useFocusRing(disabled);
   const isWeb = Platform.OS === 'web';
 
   const { current: elevation } = React.useRef<Animated.Value>(
@@ -273,7 +298,7 @@ const Chip = ({
         : 8 * multiplier,
   };
   const contentSpacings = {
-    paddingRight: onClose ? 34 : 0,
+    paddingRight: onClose ? CLOSE_AFFORDANCE_WIDTH : 0,
   };
   const labelTextStyle = {
     color: textColor,
@@ -299,6 +324,7 @@ const Chip = ({
     >
       <TouchableRipple
         borderless
+        focusRing="inward"
         background={background}
         style={[{ borderRadius }, styles.touchable]}
         onPress={onPress}
@@ -399,8 +425,24 @@ const Chip = ({
             disabled={disabled}
             role="button"
             aria-label={closeIconAccessibilityLabel}
+            onFocus={closeFocusRing.onFocus}
+            onBlur={closeFocusRing.onBlur}
+            style={[
+              styles.closeButton,
+              { borderRadius },
+              ...toStyleList(
+                getFocusRingStyle(
+                  closeFocusRing.focused,
+                  theme.colors.secondary,
+                  'inward'
+                )
+              ),
+            ]}
           >
-            <View style={[styles.icon, styles.closeIcon, styles.md3CloseIcon]}>
+            <View
+              testID={`${testID}-close-icon`}
+              style={[styles.icon, styles.closeIcon, styles.md3CloseIcon]}
+            >
               {closeIcon ? (
                 <Icon source={closeIcon} color={iconColor} size={iconSize} />
               ) : (
@@ -451,6 +493,10 @@ const styles = StyleSheet.create({
   md3CloseIcon: {
     marginRight: 8,
     padding: 0,
+    // `styles.icon` sets `alignSelf: 'center'`, which beats `alignItems` on the
+    // parent. Without this the glyph centres in the wider column and moves 4dp
+    // left.
+    alignSelf: 'flex-end',
   },
   md3LabelText: {
     textAlignVertical: 'center',
@@ -481,9 +527,19 @@ const styles = StyleSheet.create({
   closeButtonStyle: {
     position: 'absolute',
     right: 0,
+    width: CLOSE_AFFORDANCE_WIDTH,
+    // A chip narrower than this column would hand the whole thing to the close
+    // button. Never more than half, never less than the glyph needs; minWidth
+    // wins over maxWidth.
+    minWidth: CLOSE_AFFORDANCE_MIN_WIDTH,
+    maxWidth: '50%',
     height: '100%',
+  },
+  closeButton: {
+    width: '100%',
+    height: '100%',
+    // Vertical only. The glyph pins itself horizontally with `alignSelf`.
     justifyContent: 'center',
-    alignItems: 'center',
   },
   touchable: {
     width: '100%',

src/components/FAB/Menu.tsx

@@ -14,22 +14,21 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Content from './Content';
 import Shell from './Shell';
-import {
-  MenuTokens,
-  Tokens,
-  FOCUS_RING_INSET,
-  FOCUS_RING_THICKNESS,
-  webNoOutline,
-} from './tokens';
+import { MenuTokens, Tokens } from './tokens';
 import type { Size, Variant } from './tokens';
-import { useFocusRing } from './useFocusRing';
 import { resolveColors } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
 import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
 import { toRawSpring } from '../../theme/tokens/sys/motion';
 import { resolveCornerRadius } from '../../theme/utils/shape';
 import type { InternalTheme, ThemeProp } from '../../types';
+import {
+  getFocusRingStyle,
+  toStyleList,
+  useFocusRing,
+  webNoOutline,
+} from '../../utils/useFocusRing';
 import Icon from '../Icon';
 import type { IconSource } from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
@@ -249,21 +248,20 @@ const MenuItem = ({
     MenuTokens.listItem;
   const borderRadius = resolveCornerRadius(theme, shape);
 
-  const { focusedSV, onFocus, onBlur } = useFocusRing();
-  const focusRingStyle = useAnimatedStyle(() => ({
-    opacity: focusedSV.value ? 1 : 0,
-  }));
+  const { focused, onFocus, onBlur } = useFocusRing();
 
   return (
     <View style={styles.menuItemWrapper}>
       <View
         style={[
           styles.menuItem,
           { height, borderRadius, backgroundColor: colors.container },
+          ...toStyleList(getFocusRingStyle(focused, theme.colors.secondary)),
         ]}
       >
         <TouchableRipple
           borderless
+          focusRing="none"
           onPress={onPress}
           onFocus={onFocus}
           onBlur={onBlur}
@@ -288,16 +286,6 @@ const MenuItem = ({
           />
         </TouchableRipple>
       </View>
-      <Animated.View
-        style={[
-          styles.menuItemFocusRing,
-          {
-            borderColor: theme.colors.secondary,
-            borderRadius: borderRadius + FOCUS_RING_INSET,
-          },
-          focusRingStyle,
-        ]}
-      />
     </View>
   );
 };
@@ -687,15 +675,6 @@ const styles = StyleSheet.create({
   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',
   },