♿️ (frontend) update after comments

-modifications after Sylvain's commentary
-modifications after Anto's commentaries

src/backend/core/tests/test_api_utils_ai_document_rate_throttles.py

@@ -55,7 +55,7 @@ def test_api_utils_ai_document_rate_throttle_minute_limit(mock_time):
     # After the 60s backoff wait time has passed, we can make a request again
     mock_time.return_value += 1
 
-    request = api_rf.get("//1/")
+    request = api_rf.get("/documents/1/")
     response = DocumentAPIView.as_view()(request, pk=1)
     assert response.status_code == 200
 

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

@@ -12,9 +12,7 @@ const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-
   border: 1px solid #dddddd;
-
   transition: opacity 0.2s ease-in-out;
 `;
 
@@ -45,7 +43,6 @@ export const DropButton = ({
   children,
 }: PropsWithChildren<DropButtonProps>) => {
   const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
-
   const triggerRef = useRef(null);
 
   useEffect(() => {
@@ -59,17 +56,22 @@ export const DropButton = ({
 
   return (
     <>
-      <StyledButton ref={triggerRef} onPress={() => onOpenChangeHandler(true)}>
+      {/* Bouton activant le menu avec les propriétés ARIA */}
+      <StyledButton
+        ref={triggerRef}
+        aria-haspopup="menu"
+        aria-expanded={isLocalOpen}
+        onPress={() => onOpenChangeHandler(true)}
+      >
         <span aria-hidden="true">{button}</span>
       </StyledButton>
 
-      <StyledPopover
-        triggerRef={triggerRef}
-        isOpen={isLocalOpen}
-        onOpenChange={onOpenChangeHandler}
-      >
-        {children}
-      </StyledPopover>
+      {/* Menu accessible */}
+      {isLocalOpen && (
+        <StyledPopover as="div" role="menu">
+          {children}
+        </StyledPopover>
+      )}
     </>
   );
 };

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

@@ -1,4 +1,3 @@
-//import { t } from 'i18next';
 import { PropsWithChildren, useState } from 'react';
 import { css } from 'styled-components';
 
@@ -56,16 +55,19 @@ export const DropdownMenu = ({
         showArrow ? (
           <Box $direction="row" $align="center">
             <div>{children}</div>
-            <Icon
-              $variation="600"
-              $css={
-                arrowCss ??
-                css`
-                  color: var(--c--theme--colors--primary-600);
-                `
-              }
-              iconName={isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
-            />
+            <span aria-hidden="true">
+              <Icon
+                role="presentation"
+                $variation="600"
+                $css={
+                  arrowCss ??
+                  css`
+                    color: var(--c--theme--colors--primary-600);
+                  `
+                }
+                iconName={isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
+              />
+            </span>
           </Box>
         ) : (
           children
@@ -134,12 +136,14 @@ export const DropdownMenu = ({
             >
               <Box $direction="row" $align="center" $gap={spacings['base']}>
                 {option.icon && (
-                  <Icon
-                    $size="20px"
-                    $theme="greyscale"
-                    $variation={isDisabled ? '400' : '1000'}
-                    iconName={option.icon}
-                  />
+                  <span aria-hidden="true">
+                    <Icon
+                      $size="20px"
+                      $theme="greyscale"
+                      $variation={isDisabled ? '400' : '1000'}
+                      iconName={option.icon}
+                    />
+                  </span>
                 )}
                 <Text $variation={isDisabled ? '400' : '1000'}>
                   {option.label}

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

@@ -8,8 +8,27 @@ type IconProps = TextType & {
 };
 export const Icon = ({ iconName, ...textProps }: IconProps) => {
   return (
-    <Text $isMaterialIcon {...textProps}>
-      {iconName}
+    <Text
+      $isMaterialIcon
+      {...textProps}
+      aria-hidden="true"
+      $css={`
+        visibility: hidden;
+        display: inline-block;
+        position: relative;
+      `}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          visibility: 'visible',
+        }}
+      >
+        {iconName}
+      </span>
     </Text>
   );
 };
@@ -24,6 +43,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
   return (
     <Text
       $isMaterialIcon
+      aria-hidden="true"
       $size="36px"
       $theme="primary"
       $variation="600"

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

@@ -68,6 +68,7 @@ const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
       <TextStyled
         ref={ref}
         as="span"
+        aria-hidden={$isMaterialIcon ? 'true' : undefined}
         $theme="greyscale"
         $variation="text"
         className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}

src/frontend/apps/impress/src/features/footer/Footer.tsx

@@ -125,7 +125,7 @@ export const Footer = () => {
               `}
             >
               <Text
-                $variation="700"
+                $variation="600"
                 $size="m"
                 $transition="box-shadow 0.3s"
                 $css={`
@@ -143,7 +143,7 @@ export const Footer = () => {
           as="p"
           $size="m"
           $margin={{ top: 'big' }}
-          $variation="700"
+          $variation="600"
           $display="inline"
         >
           {t('Unless otherwise stated, all content on this site is under')}{' '}
@@ -155,7 +155,7 @@ export const Footer = () => {
               box-shadow: 0px 1px 0 0 var(--c--theme--colors--greyscale-text);
             `}
           >
-            <Text $variation="700">licence etalab-2.0</Text>
+            <Text $variation="600">licence etalab-2.0</Text>
             <IconLink width={18} />
           </StyledLink>
         </Text>

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

@@ -29,25 +29,16 @@ export const LeftPanelTargetFilters = () => {
         icon: 'apps',
         label: t('All docs'),
         targetQuery: DocDefaultFilter.ALL_DOCS,
-        accessibility: {
-          'aria-hidden': true,
-        },
       },
       {
         icon: 'lock',
         label: t('My docs'),
         targetQuery: DocDefaultFilter.MY_DOCS,
-        accessibility: {
-          'aria-hidden': true,
-        },
       },
       {
         icon: 'group',
         label: t('Shared with me'),
         targetQuery: DocDefaultFilter.SHARED_WITH_ME,
-        accessibility: {
-          'aria-hidden': true,
-        },
       },
     ];
   }, [t]);