♻️(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,
-}