✨(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 <c.gromoff@gmail.com>

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