fix(clerk-js): Improve focus-visible contrast to improve a11y

packages/clerk-js/package.json

@@ -82,6 +82,7 @@
     "dequal": "2.0.3",
     "input-otp": "1.4.2",
     "qrcode.react": "4.2.0",
+    "react-aria": "3.34.0",
     "regenerator-runtime": "0.14.1",
     "swr": "2.3.4"
   },

packages/clerk-js/src/ui/baseTheme.ts

@@ -31,9 +31,14 @@ const inputShadowStyles = (
     '&:hover': {
       boxShadow: hoverShadow,
     },
-    '&:focus-within,&[data-focus-within="true"]': {
+    // Mouse users - show focus ring (works for both direct inputs and containers)
+    '&:focus:not([data-focus-visible="true"]), &:has(input:focus:not([data-focus-visible="true"]))': {
       boxShadow: [hoverShadow, theme.shadows.$focusRing.replace('{{color}}', colors.focus)].toString(),
     },
+    // Keyboard users - show hover state only (outline is defined separately)
+    '&[data-focus-visible="true"], &:has(input[data-focus-visible="true"])': {
+      boxShadow: hoverShadow,
+    },
   };
 };
 
@@ -55,8 +60,11 @@ const checkboxShadowStyles = (
     '&:hover': {
       boxShadow: hoverShadow,
     },
-    '&:focus-visible': {
-      boxShadow: [hoverShadow, theme.shadows.$focusRing.replace('{{color}}', colors.focus)].toString(),
+    '&[data-focus-visible="true"]': {
+      outlineWidth: '2px',
+      outlineStyle: 'solid',
+      outlineColor: theme.colors.$primary500,
+      outlineOffset: '3px',
     },
   };
 };
@@ -118,42 +126,18 @@ const clerkTheme: Appearance = {
           },
           '&[data-color="primary"]': {
             boxShadow: BUTTON_SOLID_SHADOW(theme.colors.$primary500),
-            '&:focus': {
-              boxShadow: [
-                BUTTON_SOLID_SHADOW(theme.colors.$primary500),
-                theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
-              ].toString(),
-            },
           },
           '&[data-color="danger"]': {
             boxShadow: BUTTON_SOLID_SHADOW(theme.colors.$danger500),
-            '&:focus': {
-              boxShadow: [
-                BUTTON_SOLID_SHADOW(theme.colors.$danger500),
-                theme.shadows.$focusRing.replace('{{color}}', theme.colors.$dangerAlpha200),
-              ].toString(),
-            },
           },
         },
         '&[data-variant="outline"]': {
           borderWidth: 0,
           boxShadow: BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
-          '&:focus': {
-            boxShadow: [
-              BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
-              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
-            ].toString(),
-          },
         },
         '&[data-variant="bordered"]': {
           borderWidth: 0,
           boxShadow: BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
-          '&:focus': {
-            boxShadow: [
-              BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
-              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
-            ].toString(),
-          },
         },
       },
       badge: {

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx

@@ -37,7 +37,6 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
         variant='ghost'
         colorScheme='neutral'
         hoverAsFocus
-        focusRing={false}
         sx={[
           t => ({
             padding: `${t.space.$1} ${t.space.$2}`,

packages/clerk-js/src/ui/elements/Navbar.tsx

@@ -272,7 +272,6 @@ const NavButton = (props: NavButtonProps) => {
       textVariant='buttonLarge'
       size='md'
       isActive={isActive}
-      focusRing={false}
       {...rest}
       sx={[
         t => ({

packages/clerk-js/src/ui/elements/PhoneInput/index.tsx

@@ -78,8 +78,16 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
         position: 'relative',
         borderRadius: theme.radii.$md,
         zIndex: 1,
-        '&:focus-within,&[data-focus-within="true"]': {
-          ...common.borderVariants(theme, { hasError: rest.hasError }).normal['&:focus'],
+        '&:has(input:focus:not([data-focus-visible="true"]))': {
+          ...common.borderVariants(theme, {
+            focusRing: true,
+          }).normal['&:focus'],
+        },
+        '&:has(input:focus[data-focus-visible="true"]), &:has(button:focus-visible)': {
+          outlineWidth: '2px',
+          outlineStyle: 'solid',
+          outlineColor: theme.colors.$primary500,
+          outlineOffset: '3px',
         },
       })}
     >
@@ -128,6 +136,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
             },
           })}
           hoverAsFocus
+          focusRing={false}
           isDisabled={rest.isDisabled}
           icon={ChevronUpDown}
           iconSx={t => ({
@@ -199,6 +208,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
             }),
             sx,
           ]}
+          focusRing={false}
           //use our internal ref while forwarding
           //@ts-expect-error
           ref={mergeRefs(phoneInputRef, ref)}

packages/clerk-js/src/ui/elements/Switch.tsx

@@ -39,7 +39,10 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
           isolation: 'isolate',
           width: 'fit-content',
           '&:has(input:focus-visible) > input + span': {
-            ...common.focusRingStyles(t),
+            outlineWidth: '2px',
+            outlineStyle: 'solid',
+            outlineColor: t.colors.$primary500,
+            outlineOffset: '3px',
           },
         })}
       >

packages/clerk-js/src/ui/primitives/Button.tsx

@@ -145,7 +145,14 @@ const { applyVariants, filterProps } = createVariants(
           true: { width: '100%' },
         },
         focusRing: {
-          true: { ...common.focusRing(theme) },
+          true: {
+            '&:focus-visible': {
+              outlineWidth: '2px',
+              outlineStyle: 'solid',
+              outlineColor: theme.colors.$primary500,
+              outlineOffset: '3px',
+            },
+          },
         },
       },
       defaultVariants: {

packages/clerk-js/src/ui/primitives/Input.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useFocusRing } from 'react-aria';
 
 import { localizationKeys, useLocalizations } from '../localization';
 import type { PrimitiveProps, RequiredProp, StyleVariants } from '../styledSystem';
@@ -13,9 +14,6 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
     padding: `${theme.space.$1x5} ${theme.space.$3}`,
     backgroundColor: theme.colors.$colorInput,
     color: theme.colors.$colorInputForeground,
-    // outline support for Windows contrast themes
-    outline: 'transparent solid 2px',
-    outlineOffset: '2px',
     maxHeight: theme.sizes.$9,
     width: props.type === 'checkbox' ? theme.sizes.$4 : '100%',
     aspectRatio: props.type === 'checkbox' ? '1/1' : 'unset',
@@ -35,6 +33,19 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
     '::placeholder': {
       color: theme.colors.$colorMutedForeground,
     },
+    // outline support for Windows contrast themes
+    outlineWidth: '2px',
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    outlineOffset: '3px',
+    '&[data-focus-visible="true"]':
+      props.focusRing !== false
+        ? {
+            outlineColor: theme.colors.$primary500,
+          }
+        : {
+            outlineColor: 'transparent',
+          },
   },
   variants: {
     variant: {
@@ -64,6 +75,7 @@ export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVar
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const fieldControl = useFormField() || {};
+  const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });
   const { t } = useLocalizations();
   // @ts-expect-error Typescript is complaining that `feedbackMessageId` does not exist. We are clearly passing them from above.
   const { feedbackMessageId, ignorePasswordManager, feedbackType, ...fieldControlProps } = sanitizeInputProps(
@@ -107,6 +119,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
       {...rest}
       {...typeProps}
       {...passwordManagerProps}
+      {...focusProps}
       ref={ref}
       onChange={onChange}
       disabled={isDisabled}
@@ -118,6 +131,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
       aria-disabled={_disabled}
       data-feedback={feedbackType}
       data-variant={props.variant || 'default'}
+      data-focus-visible={isFocusVisible}
       css={applyVariants(props)}
     />
   );
@@ -181,15 +195,17 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((pr
   const _disabled = isDisabled || props.isDisabled;
   const _required = isRequired || props.isRequired;
   const _hasError = hasError || props.hasError;
-
+  const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });
   return (
     <textarea
       {...rest}
+      {...focusProps}
       ref={ref}
       disabled={_disabled}
       required={_required}
       aria-invalid={_hasError}
       aria-required={_required}
+      data-focus-visible={isFocusVisible}
       css={applyVariants(props)}
     />
   );

packages/clerk-js/src/ui/primitives/Link.tsx

@@ -36,9 +36,12 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     },
     focusRing: {
       true: {
-        '&:focus': {
+        '&:focus-visible': {
           outline: 'none',
-          ...common.focusRing(theme),
+          outlineWidth: '2px',
+          outlineStyle: 'solid',
+          outlineColor: theme.colors.$primary500,
+          outlineOffset: '3px',
         },
       },
     },