From fa7cf7a594c8f2f3a70d671a066ebc50bdde7fe4 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 10 Oct 2025 12:45:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20add=20a=20theme=20focu?=
 =?UTF-8?q?s=20visible=20on=20BoxButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to improve the accessibility of our BoxButton
component by adding a theme focus visible style.
This will help users who navigate using the
keyboard to easily identify which button is currently
focused.
To do so we have to move some theme styles to
the Box component to be able to use them in
BoxButton.
---
 .../apps/impress/src/components/Box.tsx       | 29 +++++++++++++++++++
 .../apps/impress/src/components/BoxButton.tsx | 15 ++++++++--
 .../apps/impress/src/components/Text.tsx      | 25 ----------------
 .../doc-header/components/AlertRestore.tsx    |  2 ++
 4 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index 618a1d291..8510b7306 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -36,7 +36,30 @@ export interface BoxProps {
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $shrink?: CSSProperties['flexShrink'];
+  $theme?:
+    | 'primary'
+    | 'primary-text'
+    | 'secondary'
+    | 'secondary-text'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'greyscale';
   $transition?: CSSProperties['transition'];
+  $variation?:
+    | 'text'
+    | '000'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
   $width?: CSSProperties['width'];
   $wrap?: CSSProperties['flexWrap'];
   $zIndex?: CSSProperties['zIndex'];
@@ -73,6 +96,12 @@ export const Box = styled('div')<BoxProps>`
   ${({ $position }) => $position && `position: ${$position};`}
   ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $shrink }) => $shrink && `flex-shrink: ${$shrink};`}
+  ${({ $theme, $variation }) => {
+    if (!$theme || !$variation) {
+      return '';
+    }
+    return `color: var(--c--theme--colors--${$theme}-${$variation});`;
+  }}
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx
index 15d1b3403..087151164 100644
--- a/src/frontend/apps/impress/src/components/BoxButton.tsx
+++ b/src/frontend/apps/impress/src/components/BoxButton.tsx
@@ -24,6 +24,9 @@ export type BoxButtonType = BoxType & {
  */
 const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
   ({ $css, ...props }, ref) => {
+    const theme = props.$theme || 'greyscale';
+    const variation = props.$variation || '400';
+
     return (
       <Box
         ref={ref}
@@ -37,10 +40,16 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           border: none;
           outline: none;
           font-family: inherit;
-
           color: ${props.disabled
-            ? 'var(--c--theme--colors--greyscale-400) !important'
-            : 'inherit'};
+            ? `var(--c--theme--colors--${theme}-400) !important`
+            : `inherit`};
+
+          &:focus-visible {
+            transition: none;
+            outline: 2px solid var(--c--theme--colors--${theme}-${variation});
+            border-radius: 1px;
+            outline-offset: 4px;
+          }
           ${$css || ''}
         `}
         {...props}
diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx
index 80f9da838..6b0f761ce 100644
--- a/src/frontend/apps/impress/src/components/Text.tsx
+++ b/src/frontend/apps/impress/src/components/Text.tsx
@@ -15,29 +15,6 @@ export interface TextProps extends BoxProps {
   $textAlign?: CSSProperties['textAlign'];
   $textTransform?: CSSProperties['textTransform'];
   $size?: TextSizes | (string & {});
-  $theme?:
-    | 'primary'
-    | 'primary-text'
-    | 'secondary'
-    | 'secondary-text'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'greyscale';
-  $variation?:
-    | 'text'
-    | '000'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900'
-    | '1000';
 }
 
 export type TextType = ComponentPropsWithRef<typeof Text>;
@@ -50,8 +27,6 @@ export const TextStyled = styled(Box)<TextProps>`
   ${({ $size }) =>
     $size &&
     `font-size: ${$size in sizes ? sizes[$size as TextSizes] : $size};`}
-  ${({ $theme, $variation }) =>
-    `color: var(--c--theme--colors--${$theme}-${$variation});`}
   ${({ $color }) => $color && `color: ${$color};`}
   ${({ $ellipsis }) =>
     $ellipsis &&
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
index 33a2cfd6f..c5043f37f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
@@ -80,6 +80,8 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
         }
         $direction="row"
         $gap="0.2rem"
+        $theme="danger"
+        $variation="600"
         $align="center"
       >
         <Icon