♻️(frontend) change prop for box and BoxButton

- apply an enableKeyboardNavigation prop to BoxButton (as for StyledLink)
- update css rules

src/frontend/apps/desk/src/components/BoxButton.tsx

@@ -17,25 +17,27 @@ export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
  *  </BoxButton>
  * ```
  */
-const BoxButton = forwardRef<HTMLDivElement, BoxType>(
-  ({ $css, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        as="button"
-        $background="none"
-        $css={`
+const BoxButton = forwardRef<
+  HTMLDivElement,
+  BoxType & { enableKeyboardNavigation?: boolean }
+>(({ $css, enableKeyboardNavigation = true, ...props }, ref) => {
+  return (
+    <Box
+      ref={ref}
+      as="button"
+      $background="none"
+      $css={`
           cursor: pointer;
           border: none;
           outline: none;
           transition: all 0.2s ease-in-out;
           ${$css || ''}
         `}
-        {...props}
-      />
-    );
-  },
-);
+      tabIndex={enableKeyboardNavigation ? 0 : -1}
+      {...props}
+    />
+  );
+});
 
 BoxButton.displayName = 'BoxButton';
 export { BoxButton };

src/frontend/apps/desk/src/components/DropButton.tsx

@@ -9,7 +9,6 @@ import { Button, DialogTrigger, Popover } from 'react-aria-components';
 import styled, { createGlobalStyle } from 'styled-components';
 
 import { Box } from '@/components/Box';
-import { EnumTabIndex } from '@/types/components';
 
 const StyledPopover = styled(Popover)`
   background-color: white;
@@ -82,9 +81,7 @@ export const DropButton = ({
           isOpen={isLocalOpen}
           onOpenChange={onOpenChangeHandler}
         >
-          <Box ref={ref} tabIndex={EnumTabIndex.keyboardNavigationOn}>
-            {children}
-          </Box>
+          <Box ref={ref}>{children}</Box>
         </StyledPopover>
       </DialogTrigger>
     </>

src/frontend/apps/desk/src/cunningham/cunningham-style.css

@@ -5,8 +5,6 @@
 @import url('./cunningham-custom-tokens.css');
 @import url('../assets/fonts/Marianne/Marianne-font.css');
 
-:focus,
-:focus-visible,
 a:focus-visible,
 button:focus-visible {
   outline: var(--c--theme--colors--primary-600) solid 2px;

src/frontend/apps/desk/src/features/menu/MenuItems.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, BoxButton, StyledLink } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { EnumTabIndex, SVGComponent } from '@/types/components';
+import { SVGComponent } from '@/types/components';
 
 import { Tooltip } from './Tooltip';
 
@@ -71,7 +71,7 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
         <BoxButton
           aria-label={t(`{{label}} button`, { label })}
           $color={color}
-          tabIndex={EnumTabIndex.keyboardNavigationOff}
+          enableKeyboardNavigation={false}
         >
           <Icon
             width="2.375rem"

src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx

@@ -43,10 +43,11 @@ export const PanelActions = () => {
       >
         <IconSort width={30} height={30} aria-label={t('Sort teams icon')} />
       </BoxButton>
-      <StyledLink href="/teams/create" enableKeyboardNavigation={false}>
+      <StyledLink href="/teams/create">
         <BoxButton
           aria-label={t('Add a team')}
           $color={colorsTokens()['primary-600']}
+          enableKeyboardNavigation={false}
         >
           <IconAdd width={30} height={30} aria-label={t('Add team icon')} />
         </BoxButton>

src/frontend/apps/desk/src/types/components.ts

@@ -3,8 +3,3 @@ export type SVGComponent = React.FunctionComponent<
     title?: string;
   }
 >;
-
-export enum EnumTabIndex {
-  keyboardNavigationOn = 0,
-  keyboardNavigationOff = -1,
-}