From f597549e96836d79413d7bc3bd27d9f2d356a0bf Mon Sep 17 00:00:00 2001
From: Your name <marine.marchandb@etik.com>
Date: Tue, 28 Jan 2025 09:14:26 +0100
Subject: [PATCH] =?UTF-8?q?Accessibilit=C3=A9=20-=20modifications=20des=20?=
 =?UTF-8?q?boutons=20corporate,=20group=20et=20public=20pour=20le=20lecteu?=
 =?UTF-8?q?r=20d'=C3=A9cran?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../impress/src/components/DropButton.tsx     |  9 ++----
 .../impress/src/components/DropdownMenu.tsx   |  3 +-
 .../docs-grid/components/DocsGridActions.tsx  |  1 -
 .../components/DocsGridItemSharedButton.tsx   | 32 +++++++++++++------
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx
index 9326184a7..e6f53460e 100644
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -43,7 +43,6 @@ export const DropButton = ({
   isOpen = false,
   onOpenChange,
   children,
-  label,
 }: PropsWithChildren<DropButtonProps>) => {
   const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
 
@@ -60,12 +59,8 @@ export const DropButton = ({
 
   return (
     <>
-      <StyledButton
-        ref={triggerRef}
-        onPress={() => onOpenChangeHandler(true)}
-        aria-label={label}
-      >
-        {button}
+      <StyledButton ref={triggerRef} onPress={() => onOpenChangeHandler(true)}>
+        <span aria-hidden="true">{button}</span>
       </StyledButton>
 
       <StyledPopover
diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
index 8c390c73c..4e5bd3819 100644
--- a/src/frontend/apps/impress/src/components/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
@@ -1,3 +1,4 @@
+import { t } from 'i18next';
 import { PropsWithChildren, useState } from 'react';
 import { css } from 'styled-components';
 
@@ -44,7 +45,7 @@ export const DropdownMenu = ({
     <DropButton
       isOpen={isOpen}
       onOpenChange={onOpenChange}
-      label={label}
+      label={t(`${label}`)}
       button={
         showArrow ? (
           <Box $direction="row" $align="center">
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
index bd1baadd1..60e4168cc 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
@@ -58,7 +58,6 @@ export const DocsGridActions = ({
         }
         copyDocLink();
       },
-
       testId: `docs-grid-actions-share-${doc.id}`,
     },
 
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
index 8742c6eb1..1fd4d0e7d 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box, Icon } from '@/components';
 
@@ -15,19 +16,27 @@ export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
   const isRestricted = doc.link_reach === LinkReach.RESTRICTED;
   const sharedCount = doc.nb_accesses - 1;
   const isShared = sharedCount > 0;
+  const { t } = useTranslation();
 
-  const icon = useMemo(() => {
+  const { icon, label } = useMemo(() => {
     if (isPublic) {
-      return 'public';
+      return {
+        icon: 'public',
+        label: 'Anyone with the link can see the document',
+      };
     }
     if (isAuthenticated) {
-      return 'corporate_fare';
+      return {
+        icon: 'corporate_fare',
+        label:
+          'Anyone with the link can view the document if they are logged in',
+      };
     }
     if (isRestricted) {
-      return 'group';
+      return { icon: 'group', label: 'Only invited people can access' };
     }
 
-    return undefined;
+    return { icon: 'undefined', label: '' };
   }, [isPublic, isAuthenticated, isRestricted]);
 
   if (!icon) {
@@ -52,12 +61,15 @@ export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
       fullWidth
       color={isRestricted ? 'tertiary' : 'primary'}
       size="nano"
+      aria-label={t(`${label}`)}
       icon={
-        <Icon
-          $variation={isRestricted ? '800' : '000'}
-          $theme={isRestricted ? 'primary' : 'greyscale'}
-          iconName={icon}
-        />
+        <span aria-hidden="true">
+          <Icon
+            $variation={isRestricted ? '800' : '000'}
+            $theme={isRestricted ? 'primary' : 'greyscale'}
+            iconName={icon}
+          />
+        </span>
       }
     >
       {isShared ? sharedCount : undefined}