✨(frontend) improve favorite item a11y and update e2e test accordingly

enhances keyboard access to pin/unpin and syncs test with new behavior

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts

@@ -119,7 +119,7 @@ test.describe('Document grid item options', () => {
     await page.getByText('push_pin').click();
 
     // Check is pinned
-    await expect(row.getByLabel('Pin document icon')).toBeVisible();
+    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeVisible();
     const leftPanelFavorites = page.getByTestId('left-panel-favorites');
     await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
 
@@ -128,7 +128,7 @@ test.describe('Document grid item options', () => {
     await page.getByText('Unpin').click();
 
     // Check is unpinned
-    await expect(row.getByLabel('Pin document icon')).toBeHidden();
+    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeHidden();
     await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
   });
 

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -409,7 +409,7 @@ test.describe('Doc Header', () => {
     const row = await getGridRow(page, docTitle);
 
     // Check is pinned
-    await expect(row.getByLabel('Pin document icon')).toBeVisible();
+    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeVisible();
     const leftPanelFavorites = page.getByTestId('left-panel-favorites');
     await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
 
@@ -424,7 +424,7 @@ test.describe('Doc Header', () => {
     await page.goto('/');
 
     // Check is unpinned
-    await expect(row.getByLabel('Pin document icon')).toBeHidden();
+    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeHidden();
     await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
   });
 

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

@@ -33,6 +33,13 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   font-size: 0.938rem;
   padding: 0;
   ${({ $css }) => $css};
+
+  &:focus-visible {
+    outline: 2px solid var(--c--theme--colors--primary-500);
+    outline-offset: 2px;
+    border-radius: 4px;
+    transition: none;
+  }
 `;
 
 export interface DropButtonProps {

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -52,14 +52,17 @@ export const SimpleDocItem = ({
           filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05));
         `}
         $padding={`${spacingsTokens['3xs']} 0`}
+        data-testid={isPinned ? `doc-pinned-${doc.id}` : undefined}
       >
         {isPinned ? (
           <PinnedDocumentIcon
+            aria-hidden="true"
             aria-label={t('Pin document icon')}
             color={colorsTokens['primary-500']}
           />
         ) : (
           <SimpleFileIcon
+            aria-hidden="true"
             aria-label={t('Simple document icon')}
             color={colorsTokens['primary-500']}
           />

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx

@@ -1,7 +1,9 @@
 import { useModal } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
   KEY_LIST_DOC,
@@ -31,6 +33,8 @@ export const DocsGridActions = ({
   const makeFavoriteDoc = useCreateFavoriteDoc({
     listInvalideQueries: [KEY_LIST_DOC],
   });
+  const { colorsTokens: _colorsTokens, spacingsTokens: _spacingsTokens } =
+    useCunninghamTheme();
 
   const options: DropdownMenuOption[] = [
     {
@@ -83,6 +87,13 @@ export const DocsGridActions = ({
           iconName="more_horiz"
           $theme="primary"
           $variation="600"
+          aria-label={t('More options')}
+          $css={css`
+            cursor: pointer;
+            &:hover {
+              opacity: 0.8;
+            }
+          `}
         />
       </DropdownMenu>
 

src/frontend/apps/impress/src/i18n/translations.json

@@ -266,6 +266,7 @@
       "Modal confirmation to download the attachment": "Modale Bestätigung zum Herunterladen des Anhangs",
       "Modal confirmation to restore the version": "Modale Bestätigung um die Version wiederherzustellen",
       "More docs": "Weitere Dokumente",
+      "More options": "Weitere Optionen",
       "Move": "Verschieben",
       "Move document": "Dokument verschieben",
       "Move to my docs": "In \"Meine Dokumente\" verschieben",
@@ -346,6 +347,7 @@
       "Unnamed document": "Unbenanntes Dokument",
       "Unpin": "Lösen",
       "Untitled document": "Unbenanntes Dokument",
+      "Updated": "Aktualisiert",
       "Updated at": "Aktualisiert am",
       "Use as prompt": "Als Prompt verwenden",
       "Version history": "Versionsverlauf",
@@ -369,11 +371,13 @@
   "en": {
     "translation": {
       "Search docs": "Search docs",
+      "More options": "More options",
       "Pinned documents": "Pinned documents",
       "Share with {{count}} users_one": "Share with {{count}} user",
       "Shared with {{count}} users_many": "Shared with {{count}} users",
       "Shared with {{count}} users_one": "Shared with {{count}} user",
-      "Shared with {{count}} users_other": "Shared with {{count}} users"
+      "Shared with {{count}} users_other": "Shared with {{count}} users",
+      "Updated": "Updated"
     }
   },
   "es": {
@@ -474,6 +478,7 @@
       "Modal confirmation to download the attachment": "Modal de confirmación para descargar el archivo adjunto",
       "Modal confirmation to restore the version": "Modal de confirmación para restaurar la versión",
       "More docs": "Más documentos",
+      "More options": "Más opciones",
       "My docs": "Mis documentos",
       "Name": "Nombre",
       "New doc": "Nuevo documento",
@@ -543,6 +548,7 @@
       "Type the name of a document": "Escribe el nombre de un documento",
       "Unpin": "Desanclar",
       "Untitled document": "Documento sin título",
+      "Updated": "Actualizado",
       "Updated at": "Actualizado a las",
       "Use as prompt": "Usar como prompt",
       "Version history": "Historial de versiones",
@@ -684,6 +690,7 @@
       "Modal confirmation to download the attachment": "Modale de confirmation pour télécharger la pièce jointe",
       "Modal confirmation to restore the version": "Modale de confirmation pour restaurer la version",
       "More docs": "Plus de documents",
+      "More options": "Plus d'options",
       "Move": "Déplacer",
       "Move document": "Déplacer le document",
       "Move to my docs": "Déplacer vers mes docs",
@@ -768,6 +775,7 @@
       "Type a name or email": "Tapez un nom ou un email",
       "Type the name of a document": "Tapez le nom d'un document",
       "Unnamed document": "Document sans titre",
+      "Updated": "Mise à jour",
       "Unpin": "Désépingler",
       "Untitled document": "Document sans titre",
       "Updated at": "Mise à jour le",
@@ -1034,6 +1042,7 @@
       "Modal confirmation to download the attachment": "Venster bevestiging om bijlage te downloaden",
       "Modal confirmation to restore the version": "Bevestiging modal om de versie te herstellen",
       "More docs": "Meer documenten",
+      "More options": "Meer opties",
       "My docs": "Mijn documenten",
       "Name": "Naam",
       "New doc": "Nieuw document",
@@ -1101,6 +1110,7 @@
       "Type the name of a document": "Vul de naam van een document in",
       "Unpin": "Losmaken",
       "Untitled document": "Naamloos document",
+      "Updated": "Bijgewerkt",
       "Updated at": "Geüpdate op",
       "Use as prompt": "Gebruik als prompt",
       "Version history": "Versie historie",