🚸(frontend) improve keyboard navigation

- add css rules to highlight focused-visible navigable elements
- update drop down components to make it keyboard navigable
- add e2e keyboard navigation tests asserting it navigates through
all focusable elements from top to bottom on groups index view
when one group exists

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

@@ -2,10 +2,11 @@ import React, {
   PropsWithChildren,
   ReactNode,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import { Button, DialogTrigger, Popover } from 'react-aria-components';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 
 const StyledPopover = styled(Popover)`
   background-color: white;
@@ -29,6 +30,12 @@ const StyledButton = styled(Button)`
   text-wrap: nowrap;
 `;
 
+const GlobalStyle = createGlobalStyle`
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
 interface DropButtonProps {
   button: ReactNode;
   isOpen?: boolean;
@@ -44,10 +51,18 @@ export const DropButton = ({
   const [opacity, setOpacity] = useState(false);
   const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
 
+  const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     setIsLocalOpen(isOpen);
   }, [isOpen]);
 
+  useEffect(() => {
+    if (ref.current) {
+      ref.current[isLocalOpen ? 'focus' : 'blur']();
+    }
+  }, [isLocalOpen]);
+
   const onOpenChangeHandler = (isOpen: boolean) => {
     setIsLocalOpen(isOpen);
     onOpenChange?.(isOpen);
@@ -57,15 +72,20 @@ export const DropButton = ({
   };
 
   return (
-    <DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
-      <StyledButton>{button}</StyledButton>
-      <StyledPopover
-        style={{ opacity: opacity ? 1 : 0 }}
-        isOpen={isLocalOpen}
-        onOpenChange={onOpenChangeHandler}
-      >
-        {children}
-      </StyledPopover>
-    </DialogTrigger>
+    <>
+      <GlobalStyle />
+      <DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
+        <StyledButton>{button}</StyledButton>
+        <StyledPopover
+          style={{ opacity: opacity ? 1 : 0 }}
+          isOpen={isLocalOpen}
+          onOpenChange={onOpenChangeHandler}
+        >
+          <div ref={ref} tabIndex={-1}>
+            {children}
+          </div>
+        </StyledPopover>
+      </DialogTrigger>
+    </>
   );
 };

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

@@ -5,6 +5,15 @@
 @import url('./cunningham-custom-tokens.css');
 @import url('../assets/fonts/Marianne/Marianne-font.css');
 
+a:focus-visible,
+button:focus-visible,
+.c__button:focus-visible,
+.c__select__wrapper:focus-visible,
+.c__datagrid__header:focus-visible {
+  outline: var(--c--theme--colors--primary-600) solid 2px;
+  border-radius: var(--c--components--button--border-radius--focus);
+}
+
 .c__input,
 .c__field,
 .c__select,
@@ -314,6 +323,10 @@ input:-webkit-autofill:focus {
   transition: all 0.8s ease-in-out;
 }
 
+.c__radio input:focus-visible {
+  outline: var(--c--theme--colors--primary-600) solid 2px;
+}
+
 /**
  * Button
 */
@@ -340,7 +353,8 @@ input:-webkit-autofill:focus {
     var(--c--theme--spacings--s);
 }
 
-.c__button--primary {
+.c__button--primary,
+.c__button--primary:focus-visible {
   background-color: var(--c--components--button--primary--background--color);
   color: var(--c--components--button--primary--color);
 }
@@ -470,6 +484,11 @@ input:-webkit-autofill:focus {
 /**
  * Modal
 */
+.c__modal:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .c__modal__backdrop {
   z-index: 1000;
 }

src/frontend/apps/desk/src/features/language/LanguagePicker.tsx

@@ -30,6 +30,11 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
     &:hover {
       border-color: var(--c--theme--colors--primary-500);
     }
+
+    .c__button--tertiary-text:focus-visible {
+      outline: var(--c--theme--colors--primary-600) solid 2px;
+      border-radius: var(--c--components--button--border-radius--focus);
+    }
   }
 `;
 

src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx

@@ -41,7 +41,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
 
   return (
     <Box
-      $margin={{ all: 'none' }}
+      $margin="none"
       as="li"
       $css={`
         transition: all 0.2s ease-in; 

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

@@ -50,6 +50,10 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
       onMouseOver={() => setIsTooltipOpen(true)}
       onMouseLeave={() => setIsTooltipOpen(false)}
       style={{ display: 'block' }}
+      $css={`
+        &:focus-visible {
+          outline: #fff solid 2px;
+        }`}
     >
       <Box
         $margin="xtiny"
@@ -63,7 +67,11 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
         $background={background}
         $radius="10px"
       >
-        <BoxButton aria-label={t(`{{label}} button`, { label })} $color={color}>
+        <BoxButton
+          aria-label={t(`{{label}} button`, { label })}
+          $color={color}
+          tabIndex={-1}
+        >
           <Icon
             width="2.375rem"
             aria-label={t(`{{label}} icon`, { label })}

src/frontend/apps/desk/src/features/teams/team-management/components/CardCreateTeam.tsx

@@ -55,7 +55,9 @@ export const CardCreateTeam = () => {
       </Box>
       <Box $justify="space-between" $direction="row" $align="center">
         <StyledLink href="/">
-          <Button color="secondary">{t('Cancel')}</Button>
+          <Button color="secondary" tabIndex={-1}>
+            {t('Cancel')}
+          </Button>
         </StyledLink>
         <Button
           onClick={() => createTeam(teamName)}

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

@@ -47,6 +47,7 @@ export const PanelActions = () => {
         <BoxButton
           aria-label={t('Add a team')}
           $color={colorsTokens()['primary-600']}
+          tabIndex={-1}
         >
           <IconAdd width={30} height={30} aria-label={t('Add team icon')} />
         </BoxButton>

src/frontend/apps/desk/src/pages/teams/index.tsx

@@ -17,7 +17,7 @@ const Page: NextPageWithLayout = () => {
   return (
     <Box $align="center" $justify="center" $height="inherit">
       <StyledLink href="/teams/create">
-        <StyledButton>{t('Create a new team')}</StyledButton>
+        <StyledButton tabIndex={-1}>{t('Create a new team')}</StyledButton>
       </StyledLink>
     </Box>
   );