✨(frontend) unify tab focus style for better visual consistency

standardizes keyboard focus appearance to improve UI coherence

Signed-off-by: Cyril <c.gromoff@gmail.com>

CHANGELOG.md

@@ -8,7 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added 
+- ⚡️(frontend) improve accessibility:
+  - #1341
+
+### Added
 
 - ✨(api) add API route to fetch document content #1206
 

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

@@ -28,17 +28,18 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   border: none;
   background: none;
   outline: none;
-  transition: all 0.2s ease-in-out;
   font-weight: 500;
   font-size: 0.938rem;
   padding: 0;
   ${({ $css }) => $css};
-
+  &:hover {
+    background-color: var(
+      --c--components--button--primary-text--background--color-hover
+    );
+  }
   &:focus-visible {
-    outline: 2px solid var(--c--theme--colors--primary-500);
-    outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
     border-radius: 4px;
-    transition: none;
   }
 `;
 

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -207,14 +207,13 @@ export const DropdownMenu = ({
                   }
 
                   &:focus-visible {
-                    outline: 2px solid var(--c--theme--colors--primary-500);
+                    outline: 2px solid var(--c--theme--colors--primary-400);
                     outline-offset: -2px;
                     background-color: var(--c--theme--colors--greyscale-050);
                   }
 
                   ${isFocused &&
                   css`
-                    outline: 2px solid var(--c--theme--colors--primary-500);
                     outline-offset: -2px;
                     background-color: var(--c--theme--colors--greyscale-050);
                   `}

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -2,7 +2,8 @@ import { Button } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { BoxButton } from '@/components';
+import { Box, BoxButton } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 
 import ProConnectImg from '../assets/button-proconnect.svg';
 import { useAuth } from '../hooks';
@@ -11,6 +12,7 @@ import { gotoLogin, gotoLogout } from '../utils';
 export const ButtonLogin = () => {
   const { t } = useTranslation();
   const { authenticated } = useAuth();
+  const { colorsTokens } = useCunninghamTheme();
 
   if (!authenticated) {
     return (
@@ -26,14 +28,23 @@ export const ButtonLogin = () => {
   }
 
   return (
-    <Button
-      onClick={gotoLogout}
-      color="primary-text"
-      aria-label={t('Logout')}
-      className="--docs--button-logout"
+    <Box
+      $css={css`
+        .--docs--button-logout:focus-visible {
+          box-shadow: 0 0 0 2px ${colorsTokens['primary-400']} !important;
+          border-radius: 4px;
+        }
+      `}
     >
-      {t('Logout')}
-    </Button>
+      <Button
+        onClick={gotoLogout}
+        color="primary-text"
+        aria-label={t('Logout')}
+        className="--docs--button-logout"
+      >
+        {t('Logout')}
+      </Button>
+    </Box>
   );
 };
 

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -43,6 +43,13 @@ export const Header = () => {
         href="/"
         data-testid="header-logo-link"
         aria-label={t('Back to homepage')}
+        $css={css`
+          outline: none;
+          &:focus-visible {
+            box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400) !important;
+            border-radius: 4px;
+          }
+        `}
       >
         <Box
           $align="center"

src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx

@@ -41,15 +41,7 @@ export const LanguagePicker = () => {
       showArrow
       label={t('Select language')}
       buttonCss={css`
-        &:hover {
-          background-color: var(
-            --c--components--button--primary-text--background--color-hover
-          );
-        }
-        &:focus-visible {
-          outline: 2px solid var(--c--theme--colors--primary-500);
-          outline-offset: 2px;
-        }
+        transition: all 0.15s ease-in-out !important;
         border-radius: 4px;
         padding: 0.5rem 0.6rem;
         & > div {

src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx

@@ -85,8 +85,9 @@ export const LeftPanelTargetFilters = () => {
                 background-color: ${colorsTokens['greyscale-100']};
               }
               &:focus-visible {
-                outline: 2px solid ${colorsTokens['primary-500']};
-                outline-offset: 2px;
+                outline: none !important;
+                box-shadow: 0 0 0 2px ${colorsTokens['primary-500']} !important;
+                border-radius: 4px;
               }
             `}
           >

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx

@@ -31,27 +31,26 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
         .pinned-actions {
           opacity: ${isDesktop ? 0 : 1};
         }
-        &:hover,
+        &:hover {
+          background-color: ${colorsTokens['greyscale-100']};
+        }
         &:focus-within {
           cursor: pointer;
-
-          background-color: var(--c--theme--colors--greyscale-100);
+          box-shadow: 0 0 0 2px ${colorsTokens['primary-500']} !important;
           .pinned-actions {
             opacity: 1;
           }
         }
-        &:focus-visible {
-          outline: 2px solid ${colorsTokens['primary-500']};
-          outline-offset: 2px;
-          border-radius: ${spacingsTokens['3xs']};
-        }
       `}
       key={doc.id}
       className="--docs--left-panel-favorite-item"
     >
       <StyledLink
         href={`/docs/${doc.id}`}
-        $css="overflow: auto;"
+        $css={css`
+          overflow: auto;
+          outline: none !important;
+        `}
         aria-label={`${doc.title}, ${t('Updated')} ${DateTime.fromISO(doc.updated_at).toRelative()}`}
       >
         <SimpleDocItem showAccesses doc={doc} />