Accessibilité - modifications des boutons corporate, group et public pour le lecteur d'écran

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

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">

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}`,
     },
 

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}