feat(clerk-js): Add hoverAsFocus prop to Button primitive

The hoverAsFocus prop will enable the hover style on focus of the button. Useful for accessibility when we set the
focusRing to false.

Author: desiprisg

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

@@ -106,6 +106,7 @@ const PreviewButton = (props: PropsOfComponent<typeof Button>) => {
       variant='ghost'
       colorScheme='neutral'
       focusRing={false}
+      hoverAsFocus
       isDisabled={card.isLoading}
       sx={[
         t => ({

packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx

@@ -91,6 +91,7 @@ const UserPreviewButton = (props: UserPreviewButtonProps) => {
       variant='ghost'
       colorScheme='neutral'
       focusRing={false}
+      hoverAsFocus
       isDisabled={card.isLoading}
       sx={theme => ({ height: theme.sizes.$14, justifyContent: 'flex-start' })}
       {...rest}

packages/clerk-js/src/ui/components/UserButton/OtherSessionActions.tsx

@@ -30,6 +30,7 @@ export const UserPreviewButton = (props: UserPreviewButtonProps) => {
       variant='ghost'
       colorScheme='neutral'
       focusRing={false}
+      hoverAsFocus
       isDisabled={card.isLoading}
       {...rest}
       sx={[

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

@@ -55,6 +55,7 @@ export const Action = (props: ActionProps) => {
       colorScheme='neutral'
       textVariant='buttonSmallRegular'
       focusRing={false}
+      hoverAsFocus
       // TODO: colors should be colorTextSecondary
       sx={[
         theme => ({

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

@@ -159,6 +159,7 @@ export const MenuItem = (props: MenuItemProps) => {
     <Button
       ref={buttonRef}
       focusRing={false}
+      hoverAsFocus
       variant='ghost'
       colorScheme={destructive ? 'danger' : 'neutral'}
       role='menuitem'
@@ -173,9 +174,6 @@ export const MenuItem = (props: MenuItemProps) => {
           borderRadius: theme.radii.$none,
           paddingLeft: theme.space.$4,
           paddingRight: theme.space.$4,
-          ':focus': {
-            backgroundColor: theme.colors.$blackAlpha200,
-          },
         }),
         sx,
       ]}

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

@@ -8,7 +8,7 @@ import { Spinner } from './Spinner';
 
 const vars = createCssVariables('accent', 'accentDark', 'accentDarker', 'accentLighter', 'accentLightest', 'border');
 
-const { applyVariants, filterProps } = createVariants(theme => {
+const { applyVariants, filterProps } = createVariants((theme, opts: { hoverAsFocus: boolean }) => {
   return {
     base: {
       margin: 0,
@@ -60,35 +60,40 @@ const { applyVariants, filterProps } = createVariants(theme => {
         solid: {
           backgroundColor: vars.accent,
           color: theme.colors.$colorTextOnPrimaryBackground,
-          '&:hover, :focus': { backgroundColor: vars.accentDark },
+          '&:hover': { backgroundColor: vars.accentDark },
+          '&:focus': opts.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
           '&:active': { backgroundColor: vars.accentDarker },
         },
         outline: {
           border: theme.borders.$normal,
           borderColor: vars.accentLighter,
           color: vars.accent,
-          '&:hover, :focus': { backgroundColor: vars.accentLightest },
+          '&:hover': { backgroundColor: vars.accentLightest },
+          '&:focus': opts.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
           '&:active': { backgroundColor: vars.accentLighter },
         },
         ghost: {
           color: vars.accent,
-          '&:hover, :focus': { backgroundColor: vars.accentLightest },
+          '&:hover': { backgroundColor: vars.accentLightest },
+          '&:focus': opts.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
           '&:active': { backgroundColor: vars.accentLighter },
         },
         icon: {
           color: vars.accent,
           border: theme.borders.$normal,
           borderRadius: theme.radii.$lg,
           borderColor: vars.border,
-          '&:hover, :focus': { backgroundColor: vars.accentLightest },
+          '&:hover': { backgroundColor: vars.accentLightest },
+          '&:focus': opts.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
           '&:active': { backgroundColor: vars.accentLighter },
         },
         ghostIcon: {
           color: vars.accent,
           minHeight: theme.sizes.$6,
           width: theme.sizes.$6,
           padding: `${theme.space.$1} ${theme.space.$1}`,
-          '&:hover, :focus': { color: vars.accentDark },
+          '&:hover': { color: vars.accentDark },
+          '&:focus': opts.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
           '&:active': { color: vars.accentDarker },
         },
         link: {
@@ -99,7 +104,8 @@ const { applyVariants, filterProps } = createVariants(theme => {
           textTransform: 'none',
           padding: 0,
           color: vars.accent,
-          '&:hover, :focus': { textDecoration: 'underline' },
+          '&:hover': { textDecoration: 'underline' },
+          '&:focus': opts.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
           '&:active': { color: vars.accentDark },
         },
         roundWrapper: { padding: 0, margin: 0, height: 'unset', width: 'unset', minHeight: 'unset' },
@@ -126,6 +132,7 @@ type OwnProps = PrimitiveProps<'button'> & {
   loadingText?: string;
   isDisabled?: boolean;
   isActive?: boolean;
+  hoverAsFocus?: boolean;
 };
 type ButtonProps = OwnProps & StyleVariants<typeof applyVariants>;