♿️(frontend) structure 5xx error alerts

Use h1/p for 500/502/503; pass status from doc and version views.

CHANGELOG.md

@@ -13,15 +13,7 @@ and this project adheres to
 ### Changed
 
 - 💄(frontend) improve comments highlights #1961
-- ♿️(frontend) improve BoxButton a11y and native button semantics #2103
-- ♿️(frontend) improve language picker accessibility #2069
-- ♿️(frontend) add aria-hidden to decorative icons in dropdown menu #2093
-- 🐛(backend) move lock table closer to the insert operation targeted
-
-### Fixed
-
-- 🐛(y-provider) destroy Y.Doc instances after each convert request #2129
-- 🐛(backend) remove deleted sub documents in favorite_list endpoint #2083
+- ♿️(frontend) structure correctly 5xx error alerts #2128
 
 ## [v4.8.3] - 2026-03-23
 

src/backend/core/api/viewsets.py

@@ -674,8 +674,17 @@ class DocumentViewSet(
 
         return drf.response.Response(serializer.data)
 
+    @transaction.atomic
     def perform_create(self, serializer):
         """Set the current user as creator and owner of the newly created object."""
+
+        # locks the table to ensure safe concurrent access
+        with connection.cursor() as cursor:
+            cursor.execute(
+                f'LOCK TABLE "{models.Document._meta.db_table}" '  # noqa: SLF001
+                "IN SHARE ROW EXCLUSIVE MODE;"
+            )
+
         # Remove file from validated_data as it's not a model field
         # Process it if present
         uploaded_file = serializer.validated_data.pop("file", None)
@@ -693,25 +702,15 @@ class DocumentViewSet(
                 )
                 serializer.validated_data["content"] = converted_content
                 serializer.validated_data["title"] = uploaded_file.name
-                logger.info("conversion ended successfully")
             except ConversionError as err:
-                logger.error("could not convert file content with error: %s", err)
                 raise drf.exceptions.ValidationError(
                     {"file": ["Could not convert file content"]}
                 ) from err
 
-        with transaction.atomic():
-            # locks the table to ensure safe concurrent access
-            with connection.cursor() as cursor:
-                cursor.execute(
-                    f'LOCK TABLE "{models.Document._meta.db_table}" '  # noqa: SLF001
-                    "IN SHARE ROW EXCLUSIVE MODE;"
-                )
-
-            obj = models.Document.add_root(
-                creator=self.request.user,
-                **serializer.validated_data,
-            )
+        obj = models.Document.add_root(
+            creator=self.request.user,
+            **serializer.validated_data,
+        )
         serializer.instance = obj
         models.DocumentAccess.objects.create(
             document=obj,
@@ -828,7 +827,6 @@ class DocumentViewSet(
 
         queryset = self.queryset.filter(path_list)
         queryset = queryset.filter(id__in=favorite_documents_ids)
-        queryset = queryset.filter(ancestors_deleted_at__isnull=True)
         queryset = queryset.annotate_user_roles(user)
         queryset = queryset.annotate(
             is_favorite=db.Value(True, output_field=db.BooleanField())

src/backend/core/models.py

@@ -267,16 +267,6 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
         if settings.USER_ONBOARDING_SANDBOX_DOCUMENT:
             # transaction.atomic is used in a context manager to avoid a transaction if
             # the settings USER_ONBOARDING_SANDBOX_DOCUMENT is unused
-            sandbox_id = settings.USER_ONBOARDING_SANDBOX_DOCUMENT
-            try:
-                template_document = Document.objects.get(id=sandbox_id)
-            except Document.DoesNotExist:
-                logger.warning(
-                    "Onboarding sandbox document with id %s does not exist. Skipping.",
-                    sandbox_id,
-                )
-                return
-
             with transaction.atomic():
                 # locks the table to ensure safe concurrent access
                 with connection.cursor() as cursor:
@@ -284,6 +274,17 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
                         f'LOCK TABLE "{Document._meta.db_table}" '  # noqa: SLF001
                         "IN SHARE ROW EXCLUSIVE MODE;"
                     )
+
+                sandbox_id = settings.USER_ONBOARDING_SANDBOX_DOCUMENT
+                try:
+                    template_document = Document.objects.get(id=sandbox_id)
+                except Document.DoesNotExist:
+                    logger.warning(
+                        "Onboarding sandbox document with id %s does not exist. Skipping.",
+                        sandbox_id,
+                    )
+                    return
+
                 sandbox_document = Document.add_root(
                     title=template_document.title,
                     content=template_document.content,

src/backend/core/services/converter_services.py

@@ -45,8 +45,6 @@ class Converter:
     def convert(self, data, content_type, accept):
         """Convert input into other formats using external microservices."""
 
-        logger.info("converting content from %s to %s", content_type, accept)
-
         if content_type == mime_types.DOCX and accept == mime_types.YJS:
             blocknote_data = self.docspec.convert(
                 data, mime_types.DOCX, mime_types.BLOCKNOTE

src/backend/core/tests/documents/test_api_documents_favorite_list.py

@@ -114,29 +114,3 @@ def test_api_document_favorite_list_with_favorite_children():
     assert content[0]["id"] == str(children[0].id)
     assert content[1]["id"] == str(children[1].id)
     assert content[2]["id"] == str(access.document.id)
-
-
-def test_api_document_favorite_list_with_deleted_child():
-    """
-    Authenticated users should not see deleted documents in their favorite list.
-    """
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    root = factories.DocumentFactory(creator=user, users=[user], favorited_by=[user])
-    child1, child2 = factories.DocumentFactory.create_batch(
-        2, parent=root, favorited_by=[user]
-    )
-
-    child1.delete()
-
-    response = client.get("/api/v1.0/documents/favorite_list/")
-
-    assert response.status_code == 200
-    assert response.json()["count"] == 2
-
-    content = response.json()["results"]
-
-    assert content[0]["id"] == str(root.id)
-    assert content[1]["id"] == str(child2.id)

src/frontend/apps/e2e/.env

@@ -1,15 +0,0 @@
-PORT=3000
-BASE_URL=http://localhost:3000
-BASE_API_URL=http://localhost:8071/api/v1.0
-CUSTOM_SIGN_IN=false
-TEST_INSTANCE_ONLY=false
-SIGN_IN_EL_TRIGGER=Start Writing
-FIRST_NAME=E2E
-SIGN_IN_USERNAME_CHROMIUM=user.test@chromium.test
-SIGN_IN_USERNAME_WEBKIT=user.test@webkit.com
-SIGN_IN_USERNAME_FIREFOX=user.test@firefox.com
-# To test server to server API calls
-SERVER_TO_SERVER_API_TOKENS='server-api-token'
-SUB_CHROMIUM=user.test@chromium.test
-SUB_WEBKIT=user.test@webkit.com
-SUB_FIREFOX=user.test@firefox.com

src/frontend/apps/e2e/.env.example

@@ -1,22 +0,0 @@
-PORT=3000
-BASE_URL=http://localhost:3000
-BASE_API_URL=http://localhost:8071/api/v1.0
-TEST_INSTANCE_ONLY=false
-CUSTOM_SIGN_IN=false
-SIGN_IN_EL_TRIGGER=Start Writing
-FIRST_NAME=E2E
-SIGN_IN_USERNAME_CHROMIUM=user.test@chromium.test
-SIGN_IN_USERNAME_WEBKIT=user.test@webkit.com
-SIGN_IN_USERNAME_FIREFOX=user.test@firefox.com
-# Used only on instance with custom sign in
-SIGN_IN_EL_USERNAME_INPUT=
-SIGN_IN_EL_USERNAME_VALIDATION=
-SIGN_IN_EL_PASSWORD_INPUT=
-SIGN_IN_PASSWORD_CHROMIUM=
-SIGN_IN_PASSWORD_WEBKIT=
-SIGN_IN_PASSWORD_FIREFOX=
-# To test server to server API calls
-SERVER_TO_SERVER_API_TOKENS='server-api-token'
-SUB_CHROMIUM=user.test@chromium.test
-SUB_WEBKIT=user.test@webkit.com
-SUB_FIREFOX=user.test@firefox.com

src/frontend/apps/e2e/.gitignore

@@ -5,4 +5,3 @@ blob-report/
 playwright/.auth/
 playwright/.cache/
 screenshots/
-.env.local

src/frontend/apps/e2e/__tests__/app-impress/auth.setup.ts

@@ -1,6 +1,6 @@
 import { FullConfig, FullProject, chromium, expect } from '@playwright/test';
 
-import { SignIn } from './utils-signin';
+import { keyCloakSignIn } from './utils-common';
 
 const saveStorageState = async (
   browserConfig: FullProject<unknown, unknown>,
@@ -22,7 +22,7 @@ const saveStorageState = async (
     await page.content();
     await expect(page.getByText('Docs').first()).toBeVisible();
 
-    await SignIn(page, browserName);
+    await keyCloakSignIn(page, browserName);
 
     await expect(
       page.locator('header').first().getByRole('button', {

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

@@ -4,166 +4,160 @@ import { expect, test } from '@playwright/test';
 
 import { CONFIG, createDoc, overrideConfig } from './utils-common';
 
-if (process.env.TEST_INSTANCE_ONLY !== 'true') {
-  test.describe('Config', () => {
-    test('it checks that sentry is trying to init from config endpoint', async ({
-      page,
-    }) => {
-      await overrideConfig(page, {
-        SENTRY_DSN: 'https://sentry.io/123',
-      });
-
-      const invalidMsg = 'Invalid Sentry Dsn: https://sentry.io/123';
-      const consoleMessage = page.waitForEvent('console', {
-        timeout: 5000,
-        predicate: (msg) => msg.text().includes(invalidMsg),
-      });
-
-      await page.goto('/');
-
-      expect((await consoleMessage).text()).toContain(invalidMsg);
+test.describe('Config', () => {
+  test('it checks that sentry is trying to init from config endpoint', async ({
+    page,
+  }) => {
+    await overrideConfig(page, {
+      SENTRY_DSN: 'https://sentry.io/123',
     });
 
-    test('it checks that media server is configured from config endpoint', async ({
-      page,
-      browserName,
-    }) => {
-      await page.goto('/');
-
-      await createDoc(page, 'doc-media', browserName, 1);
-
-      const fileChooserPromise = page.waitForEvent('filechooser');
-
-      await page.locator('.bn-block-outer').last().fill('Anything');
-      await page.locator('.bn-block-outer').last().fill('/');
-      await page.getByText('Resizable image with caption').click();
-      await page.getByText('Upload image').click();
-
-      const fileChooser = await fileChooserPromise;
-      await fileChooser.setFiles(
-        path.join(__dirname, 'assets/logo-suite-numerique.png'),
-      );
-
-      const image = page
-        .locator('.--docs--editor-container img.bn-visual-media')
-        .first();
-
-      await expect(image).toBeVisible();
-
-      // Wait for the media-check to be processed
-
-      await page.waitForTimeout(1000);
-
-      // Check src of image
-      expect(await image.getAttribute('src')).toMatch(
-        /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/,
-      );
+    const invalidMsg = 'Invalid Sentry Dsn: https://sentry.io/123';
+    const consoleMessage = page.waitForEvent('console', {
+      timeout: 5000,
+      predicate: (msg) => msg.text().includes(invalidMsg),
     });
 
-    test('it checks that collaboration server is configured from config endpoint', async ({
-      page,
-    }) => {
-      await page.goto('/');
+    await page.goto('/');
 
-      void page
-        .getByRole('button', {
-          name: 'New doc',
-        })
-        .click();
-
-      const webSocket = await page.waitForEvent('websocket', (webSocket) => {
-        return webSocket
-          .url()
-          .includes('ws://localhost:4444/collaboration/ws/');
-      });
-      expect(webSocket.url()).toContain(
-        'ws://localhost:4444/collaboration/ws/',
-      );
-    });
-
-    test('it checks that Crisp is trying to init from config endpoint', async ({
-      page,
-    }) => {
-      await overrideConfig(page, {
-        CRISP_WEBSITE_ID: '1234',
-      });
-
-      await page.goto('/');
-
-      await expect(
-        page.locator('#crisp-chatbox').getByText('Invalid website'),
-      ).toBeVisible();
-    });
-
-    test('it checks FRONTEND_CSS_URL config', async ({ page }) => {
-      await overrideConfig(page, {
-        FRONTEND_CSS_URL: 'http://localhost:123465/css/style.css',
-      });
-
-      await page.goto('/');
-
-      await expect(
-        page
-          .locator('head link[href="http://localhost:123465/css/style.css"]')
-          .first(),
-      ).toBeAttached();
-    });
-
-    test('it checks FRONTEND_JS_URL config', async ({ page }) => {
-      await overrideConfig(page, {
-        FRONTEND_JS_URL: 'http://localhost:123465/js/script.js',
-      });
-
-      await page.goto('/');
-
-      await expect(
-        page
-          .locator('script[src="http://localhost:123465/js/script.js"]')
-          .first(),
-      ).toBeAttached();
-    });
-
-    test('it checks the config api is called', async ({ page }) => {
-      const responsePromise = page.waitForResponse(
-        (response) =>
-          response.url().includes('/config/') && response.status() === 200,
-      );
-
-      await page.goto('/');
-
-      const response = await responsePromise;
-      expect(response.ok()).toBeTruthy();
-
-      const json = (await response.json()) as typeof CONFIG;
-      expect(json).toStrictEqual(CONFIG);
-    });
+    expect((await consoleMessage).text()).toContain(invalidMsg);
   });
 
-  test.describe('Config: Not logged', () => {
-    test.use({ storageState: { cookies: [], origins: [] } });
+  test('it checks that media server is configured from config endpoint', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
 
-    test('it checks that theme is configured from config endpoint', async ({
-      page,
-    }) => {
-      await page.goto('/');
+    await createDoc(page, 'doc-media', browserName, 1);
 
-      await expect(
-        page.getByText('Collaborative writing, Simplified.'),
-      ).toHaveCSS('font-family', /Roboto/i, {
-        timeout: 10000,
-      });
+    const fileChooserPromise = page.waitForEvent('filechooser');
 
-      await overrideConfig(page, {
-        FRONTEND_THEME: 'dsfr',
-      });
+    await page.locator('.bn-block-outer').last().fill('Anything');
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Resizable image with caption').click();
+    await page.getByText('Upload image').click();
 
-      await page.goto('/');
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(
+      path.join(__dirname, 'assets/logo-suite-numerique.png'),
+    );
 
-      await expect(
-        page.getByText('Collaborative writing, Simplified.'),
-      ).toHaveCSS('font-family', /Marianne/i, {
-        timeout: 10000,
-      });
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
+
+    await expect(image).toBeVisible();
+
+    // Wait for the media-check to be processed
+
+    await page.waitForTimeout(1000);
+
+    // Check src of image
+    expect(await image.getAttribute('src')).toMatch(
+      /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/,
+    );
+  });
+
+  test('it checks that collaboration server is configured from config endpoint', async ({
+    page,
+  }) => {
+    await page.goto('/');
+
+    void page
+      .getByRole('button', {
+        name: 'New doc',
+      })
+      .click();
+
+    const webSocket = await page.waitForEvent('websocket', (webSocket) => {
+      return webSocket.url().includes('ws://localhost:4444/collaboration/ws/');
+    });
+    expect(webSocket.url()).toContain('ws://localhost:4444/collaboration/ws/');
+  });
+
+  test('it checks that Crisp is trying to init from config endpoint', async ({
+    page,
+  }) => {
+    await overrideConfig(page, {
+      CRISP_WEBSITE_ID: '1234',
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page.locator('#crisp-chatbox').getByText('Invalid website'),
+    ).toBeVisible();
+  });
+
+  test('it checks FRONTEND_CSS_URL config', async ({ page }) => {
+    await overrideConfig(page, {
+      FRONTEND_CSS_URL: 'http://localhost:123465/css/style.css',
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page
+        .locator('head link[href="http://localhost:123465/css/style.css"]')
+        .first(),
+    ).toBeAttached();
+  });
+
+  test('it checks FRONTEND_JS_URL config', async ({ page }) => {
+    await overrideConfig(page, {
+      FRONTEND_JS_URL: 'http://localhost:123465/js/script.js',
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page
+        .locator('script[src="http://localhost:123465/js/script.js"]')
+        .first(),
+    ).toBeAttached();
+  });
+
+  test('it checks the config api is called', async ({ page }) => {
+    const responsePromise = page.waitForResponse(
+      (response) =>
+        response.url().includes('/config/') && response.status() === 200,
+    );
+
+    await page.goto('/');
+
+    const response = await responsePromise;
+    expect(response.ok()).toBeTruthy();
+
+    const json = (await response.json()) as typeof CONFIG;
+    expect(json).toStrictEqual(CONFIG);
+  });
+});
+
+test.describe('Config: Not logged', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test('it checks that theme is configured from config endpoint', async ({
+    page,
+  }) => {
+    await page.goto('/');
+
+    await expect(
+      page.getByText('Collaborative writing, Simplified.'),
+    ).toHaveCSS('font-family', /Roboto/i, {
+      timeout: 10000,
+    });
+
+    await overrideConfig(page, {
+      FRONTEND_THEME: 'dsfr',
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page.getByText('Collaborative writing, Simplified.'),
+    ).toHaveCSS('font-family', /Marianne/i, {
+      timeout: 10000,
     });
   });
-}
+});

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

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test';
 
 import {
   createDoc,
+  getMenuItem,
   mockedDocument,
   overrideConfig,
   verifyDocName,
@@ -13,295 +14,196 @@ import {
   writeInEditor,
 } from './utils-editor';
 
-if (process.env.TEST_INSTANCE_ONLY !== 'true') {
-  test.describe('Doc AI feature', () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/');
-    });
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
 
-    [
-      {
-        AI_FEATURE_ENABLED: false,
-        selector: 'Ask AI',
-      },
-      {
-        AI_FEATURE_ENABLED: true,
-        AI_FEATURE_BLOCKNOTE_ENABLED: false,
-        selector: 'Ask AI',
-      },
-      {
-        AI_FEATURE_ENABLED: true,
-        AI_FEATURE_LEGACY_ENABLED: false,
-        selector: 'AI',
-      },
-    ].forEach((config) => {
-      test(`it checks the AI feature flag from config endpoint: ${JSON.stringify(config)}`, async ({
-        page,
-        browserName,
-      }) => {
-        await overrideConfig(page, config);
-
-        await page.goto('/');
-
-        await createDoc(page, 'doc-ai-feature', browserName, 1);
-
-        await page.locator('.bn-block-outer').last().fill('Anything');
-        await page.getByText('Anything').selectText();
-        await expect(
-          page.locator('button[data-test="convertMarkdown"]'),
-        ).toHaveCount(1);
-        await expect(
-          page.getByRole('button', { name: config.selector, exact: true }),
-        ).toBeHidden();
-      });
-    });
-
-    test('it checks the AI feature and accepts changes', async ({
+test.describe('Doc AI feature', () => {
+  [
+    {
+      AI_FEATURE_ENABLED: false,
+      selector: 'Ask AI',
+    },
+    {
+      AI_FEATURE_ENABLED: true,
+      AI_FEATURE_BLOCKNOTE_ENABLED: false,
+      selector: 'Ask AI',
+    },
+    {
+      AI_FEATURE_ENABLED: true,
+      AI_FEATURE_LEGACY_ENABLED: false,
+      selector: 'AI',
+    },
+  ].forEach((config) => {
+    test(`it checks the AI feature flag from config endpoint: ${JSON.stringify(config)}`, async ({
       page,
       browserName,
     }) => {
-      await overrideConfig(page, {
-        AI_BOT: {
-          name: 'Albert AI',
-          color: '#8bc6ff',
-        },
-      });
-
-      await mockAIResponse(page);
+      await overrideConfig(page, config);
 
       await page.goto('/');
 
-      await createDoc(page, 'doc-ai', browserName, 1);
+      await createDoc(page, 'doc-ai-feature', browserName, 1);
 
-      await openSuggestionMenu({ page });
-      await page.getByText('Ask AI').click();
+      await page.locator('.bn-block-outer').last().fill('Anything');
+      await page.getByText('Anything').selectText();
       await expect(
-        page.getByRole('option', { name: 'Continue Writing' }),
-      ).toBeVisible();
+        page.locator('button[data-test="convertMarkdown"]'),
+      ).toHaveCount(1);
       await expect(
-        page.getByRole('option', { name: 'Summarize' }),
-      ).toBeVisible();
+        page.getByRole('button', { name: config.selector, exact: true }),
+      ).toBeHidden();
+    });
+  });
 
-      await page.keyboard.press('Escape');
-
-      const editor = await writeInEditor({ page, text: 'Hello World' });
-      await editor.getByText('Hello World').selectText();
-
-      // Check from toolbar
-      await page.getByRole('button', { name: 'Ask AI' }).click();
-
-      await expect(
-        page.getByRole('option', { name: 'Improve Writing' }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('option', { name: 'Fix Spelling' }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('option', { name: 'Translate' }),
-      ).toBeVisible();
-
-      await page.getByRole('option', { name: 'Translate' }).click();
-      await page
-        .getByRole('textbox', { name: 'Ask anything...' })
-        .fill('Translate into french');
-      await page
-        .getByRole('textbox', { name: 'Ask anything...' })
-        .press('Enter');
-      await expect(editor.getByText('Albert AI')).toBeVisible();
-      await page
-        .locator('p.bn-mt-suggestion-menu-item-title')
-        .getByText('Accept')
-        .click();
-
-      await expect(editor.getByText('Bonjour le monde')).toBeVisible();
-
-      // Check Suggestion menu
-      await page.locator('.bn-block-outer').last().fill('/');
-      await expect(page.getByText('Write with AI')).toBeVisible();
-
-      // Reload the page to check that the AI change is still there
-      await page.goto(page.url());
-      await expect(editor.getByText('Bonjour le monde')).toBeVisible();
+  test('it checks the AI feature and accepts changes', async ({
+    page,
+    browserName,
+  }) => {
+    await overrideConfig(page, {
+      AI_BOT: {
+        name: 'Albert AI',
+        color: '#8bc6ff',
+      },
     });
 
-    test('it reverts with the AI feature', async ({ page, browserName }) => {
-      await overrideConfig(page, {
-        AI_BOT: {
-          name: 'Albert AI',
-          color: '#8bc6ff',
-        },
-      });
+    await mockAIResponse(page);
 
-      await mockAIResponse(page);
+    await page.goto('/');
 
-      await page.goto('/');
+    await createDoc(page, 'doc-ai', browserName, 1);
 
-      await createDoc(page, 'doc-ai', browserName, 1);
+    await openSuggestionMenu({ page });
+    await page.getByText('Ask AI').click();
+    await expect(
+      page.getByRole('option', { name: 'Continue Writing' }),
+    ).toBeVisible();
+    await expect(page.getByRole('option', { name: 'Summarize' })).toBeVisible();
 
-      const editor = await writeInEditor({ page, text: 'Hello World' });
-      await editor.getByText('Hello World').selectText();
+    await page.keyboard.press('Escape');
 
-      // Check from toolbar
-      await page.getByRole('button', { name: 'Ask AI' }).click();
+    const editor = await writeInEditor({ page, text: 'Hello World' });
+    await editor.getByText('Hello World').selectText();
 
-      await page.getByRole('option', { name: 'Translate' }).click();
-      await page
-        .getByRole('textbox', { name: 'Ask anything...' })
-        .fill('Translate into french');
-      await page
-        .getByRole('textbox', { name: 'Ask anything...' })
-        .press('Enter');
-      await expect(editor.getByText('Albert AI')).toBeVisible();
-      await expect(editor.getByText('Bonjour le monde')).toBeVisible();
-      await page
-        .locator('p.bn-mt-suggestion-menu-item-title')
-        .getByText('Revert')
-        .click();
+    // Check from toolbar
+    await page.getByRole('button', { name: 'Ask AI' }).click();
 
-      await expect(editor.getByText('Hello World')).toBeVisible();
+    await expect(
+      page.getByRole('option', { name: 'Improve Writing' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('option', { name: 'Fix Spelling' }),
+    ).toBeVisible();
+    await expect(page.getByRole('option', { name: 'Translate' })).toBeVisible();
+
+    await page.getByRole('option', { name: 'Translate' }).click();
+    await page
+      .getByRole('textbox', { name: 'Ask anything...' })
+      .fill('Translate into french');
+    await page.getByRole('textbox', { name: 'Ask anything...' }).press('Enter');
+    await expect(editor.getByText('Albert AI')).toBeVisible();
+    await page
+      .locator('p.bn-mt-suggestion-menu-item-title')
+      .getByText('Accept')
+      .click();
+
+    await expect(editor.getByText('Bonjour le monde')).toBeVisible();
+
+    // Check Suggestion menu
+    await page.locator('.bn-block-outer').last().fill('/');
+    await expect(page.getByText('Write with AI')).toBeVisible();
+
+    // Reload the page to check that the AI change is still there
+    await page.goto(page.url());
+    await expect(editor.getByText('Bonjour le monde')).toBeVisible();
+  });
+
+  test('it reverts with the AI feature', async ({ page, browserName }) => {
+    await overrideConfig(page, {
+      AI_BOT: {
+        name: 'Albert AI',
+        color: '#8bc6ff',
+      },
     });
 
-    test('it checks the AI buttons feature legacy', async ({
-      page,
-      browserName,
-    }) => {
-      await page.route(/.*\/ai-translate\//, async (route) => {
-        const request = route.request();
-        if (request.method().includes('POST')) {
-          await route.fulfill({
-            json: {
-              answer: 'Hallo Welt',
-            },
-          });
-        } else {
-          await route.continue();
-        }
-      });
+    await mockAIResponse(page);
 
-      await createDoc(page, 'doc-ai', browserName, 1);
+    await page.goto('/');
 
-      await page.locator('.bn-block-outer').last().fill('Hello World');
+    await createDoc(page, 'doc-ai', browserName, 1);
 
-      const editor = page.locator('.ProseMirror');
-      await editor.getByText('Hello').selectText();
+    const editor = await writeInEditor({ page, text: 'Hello World' });
+    await editor.getByText('Hello World').selectText();
 
-      await page.getByRole('button', { name: 'AI', exact: true }).click();
+    // Check from toolbar
+    await page.getByRole('button', { name: 'Ask AI' }).click();
 
-      await expect(
-        page.getByRole('menuitem', { name: 'Use as prompt' }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('menuitem', { name: 'Rephrase' }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('menuitem', { name: 'Summarize' }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('menuitem', { name: 'Correct' }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('menuitem', { name: 'Language' }),
-      ).toBeVisible();
+    await page.getByRole('option', { name: 'Translate' }).click();
+    await page
+      .getByRole('textbox', { name: 'Ask anything...' })
+      .fill('Translate into french');
+    await page.getByRole('textbox', { name: 'Ask anything...' }).press('Enter');
+    await expect(editor.getByText('Albert AI')).toBeVisible();
+    await expect(editor.getByText('Bonjour le monde')).toBeVisible();
+    await page
+      .locator('p.bn-mt-suggestion-menu-item-title')
+      .getByText('Revert')
+      .click();
 
-      await page.getByRole('menuitem', { name: 'Language' }).hover();
-      await expect(
-        page.getByRole('menuitem', { name: 'English', exact: true }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('menuitem', { name: 'French', exact: true }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole('menuitem', { name: 'German', exact: true }),
-      ).toBeVisible();
+    await expect(editor.getByText('Hello World')).toBeVisible();
+  });
 
-      await page.getByRole('menuitem', { name: 'German', exact: true }).click();
-
-      await expect(editor.getByText('Hallo Welt')).toBeVisible();
-    });
-
-    [
-      { ai_transform: false, ai_translate: false },
-      { ai_transform: true, ai_translate: false },
-      { ai_transform: false, ai_translate: true },
-    ].forEach(({ ai_transform, ai_translate }) => {
-      test(`it checks AI buttons when can transform is at "${ai_transform}" and can translate is at "${ai_translate}"`, async ({
-        page,
-        browserName,
-      }) => {
-        await mockedDocument(page, {
-          accesses: [
-            {
-              id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
-              role: 'owner',
-              user: {
-                email: 'super@owner.com',
-                full_name: 'Super Owner',
-              },
-            },
-          ],
-          abilities: {
-            destroy: true, // Means owner
-            link_configuration: true,
-            ai_transform,
-            ai_translate,
-            accesses_manage: true,
-            accesses_view: true,
-            update: true,
-            partial_update: true,
-            retrieve: true,
+  test('it checks the AI buttons feature legacy', async ({
+    page,
+    browserName,
+  }) => {
+    await page.route(/.*\/ai-translate\//, async (route) => {
+      const request = route.request();
+      if (request.method().includes('POST')) {
+        await route.fulfill({
+          json: {
+            answer: 'Hallo Welt',
           },
-          link_reach: 'restricted',
-          link_role: 'editor',
-          created_at: '2021-09-01T09:00:00Z',
-          title: '',
         });
-
-        const [randomDoc] = await createDoc(
-          page,
-          'doc-editor-ai',
-          browserName,
-          1,
-        );
-
-        await verifyDocName(page, randomDoc);
-
-        await page.locator('.bn-block-outer').last().fill('Hello World');
-
-        const editor = page.locator('.ProseMirror');
-        await editor.getByText('Hello').selectText();
-
-        if (!ai_transform && !ai_translate) {
-          await expect(
-            page.getByRole('button', { name: 'AI', exact: true }),
-          ).toBeHidden();
-          return;
-        }
-
-        await page.getByRole('button', { name: 'AI', exact: true }).click();
-
-        if (ai_transform) {
-          await expect(
-            page.getByRole('menuitem', { name: 'Use as prompt' }),
-          ).toBeVisible();
-        } else {
-          await expect(
-            page.getByRole('menuitem', { name: 'Use as prompt' }),
-          ).toBeHidden();
-        }
-
-        if (ai_translate) {
-          await expect(
-            page.getByRole('menuitem', { name: 'Language' }),
-          ).toBeVisible();
-        } else {
-          await expect(
-            page.getByRole('menuitem', { name: 'Language' }),
-          ).toBeHidden();
-        }
-      });
+      } else {
+        await route.continue();
+      }
     });
 
-    test(`it checks ai_proxy ability`, async ({ page, browserName }) => {
+    await createDoc(page, 'doc-ai', browserName, 1);
+
+    await page.locator('.bn-block-outer').last().fill('Hello World');
+
+    const editor = page.locator('.ProseMirror');
+    await editor.getByText('Hello').selectText();
+
+    await page.getByRole('button', { name: 'AI', exact: true }).click();
+
+    await expect(getMenuItem(page, 'Use as prompt')).toBeVisible();
+    await expect(getMenuItem(page, 'Rephrase')).toBeVisible();
+    await expect(getMenuItem(page, 'Summarize')).toBeVisible();
+    await expect(getMenuItem(page, 'Correct')).toBeVisible();
+    await expect(getMenuItem(page, 'Language')).toBeVisible();
+
+    await getMenuItem(page, 'Language').hover();
+    await expect(getMenuItem(page, 'English', { exact: true })).toBeVisible();
+    await expect(getMenuItem(page, 'French', { exact: true })).toBeVisible();
+    await expect(getMenuItem(page, 'German', { exact: true })).toBeVisible();
+
+    await getMenuItem(page, 'German', { exact: true }).click();
+
+    await expect(editor.getByText('Hallo Welt')).toBeVisible();
+  });
+
+  [
+    { ai_transform: false, ai_translate: false },
+    { ai_transform: true, ai_translate: false },
+    { ai_transform: false, ai_translate: true },
+  ].forEach(({ ai_transform, ai_translate }) => {
+    test(`it checks AI buttons when can transform is at "${ai_transform}" and can translate is at "${ai_translate}"`, async ({
+      page,
+      browserName,
+    }) => {
       await mockedDocument(page, {
         accesses: [
           {
@@ -316,7 +218,8 @@ if (process.env.TEST_INSTANCE_ONLY !== 'true') {
         abilities: {
           destroy: true, // Means owner
           link_configuration: true,
-          ai_proxy: false,
+          ai_transform,
+          ai_translate,
           accesses_manage: true,
           accesses_view: true,
           update: true,
@@ -331,7 +234,7 @@ if (process.env.TEST_INSTANCE_ONLY !== 'true') {
 
       const [randomDoc] = await createDoc(
         page,
-        'doc-editor-ai-proxy',
+        'doc-editor-ai',
         browserName,
         1,
       );
@@ -343,9 +246,73 @@ if (process.env.TEST_INSTANCE_ONLY !== 'true') {
       const editor = page.locator('.ProseMirror');
       await editor.getByText('Hello').selectText();
 
-      await expect(page.getByRole('button', { name: 'Ask AI' })).toBeHidden();
-      await page.locator('.bn-block-outer').last().fill('/');
-      await expect(page.getByText('Write with AI')).toBeHidden();
+      if (!ai_transform && !ai_translate) {
+        await expect(
+          page.getByRole('button', { name: 'AI', exact: true }),
+        ).toBeHidden();
+        return;
+      }
+
+      await page.getByRole('button', { name: 'AI', exact: true }).click();
+
+      if (ai_transform) {
+        await expect(getMenuItem(page, 'Use as prompt')).toBeVisible();
+      } else {
+        await expect(getMenuItem(page, 'Use as prompt')).toBeHidden();
+      }
+
+      if (ai_translate) {
+        await expect(getMenuItem(page, 'Language')).toBeVisible();
+      } else {
+        await expect(getMenuItem(page, 'Language')).toBeHidden();
+      }
     });
   });
-}
+
+  test(`it checks ai_proxy ability`, async ({ page, browserName }) => {
+    await mockedDocument(page, {
+      accesses: [
+        {
+          id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
+          role: 'owner',
+          user: {
+            email: 'super@owner.com',
+            full_name: 'Super Owner',
+          },
+        },
+      ],
+      abilities: {
+        destroy: true, // Means owner
+        link_configuration: true,
+        ai_proxy: false,
+        accesses_manage: true,
+        accesses_view: true,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+      link_reach: 'restricted',
+      link_role: 'editor',
+      created_at: '2021-09-01T09:00:00Z',
+      title: '',
+    });
+
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-editor-ai-proxy',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, randomDoc);
+
+    await page.locator('.bn-block-outer').last().fill('Hello World');
+
+    const editor = page.locator('.ProseMirror');
+    await editor.getByText('Hello').selectText();
+
+    await expect(page.getByRole('button', { name: 'Ask AI' })).toBeHidden();
+    await page.locator('.bn-block-outer').last().fill('/');
+    await expect(page.getByText('Write with AI')).toBeHidden();
+  });
+});

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

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test';
 import {
   closeHeaderMenu,
   createDoc,
+  getMenuItem,
   getOtherBrowserName,
   verifyDocName,
 } from './utils-common';
@@ -58,14 +59,10 @@ test.describe('Doc Comments', () => {
     await page.getByRole('button', { name: '👍' }).click();
 
     await expect(
-      thread
-        .getByRole('img', { name: `${process.env.FIRST_NAME} ${browserName}` })
-        .first(),
+      thread.getByRole('img', { name: `E2E ${browserName}` }).first(),
     ).toBeVisible();
     await expect(thread.getByText('This is a comment').first()).toBeVisible();
-    await expect(
-      thread.getByText(`${process.env.FIRST_NAME} ${browserName}`).first(),
-    ).toBeVisible();
+    await expect(thread.getByText(`E2E ${browserName}`).first()).toBeVisible();
     await expect(thread.locator('.bn-comment-reaction')).toHaveText('👍1');
 
     const urlCommentDoc = page.url();
@@ -89,7 +86,7 @@ test.describe('Doc Comments', () => {
       otherThread.getByText('This is a comment').first(),
     ).toBeVisible();
     await expect(
-      otherThread.getByText(`${process.env.FIRST_NAME} ${browserName}`).first(),
+      otherThread.getByText(`E2E ${browserName}`).first(),
     ).toBeVisible();
     await expect(otherThread.locator('.bn-comment-reaction')).toHaveText('👍2');
 
@@ -102,19 +99,13 @@ test.describe('Doc Comments', () => {
 
     // We check that the second user can see the comment he just made
     await expect(
-      otherThread
-        .getByRole('img', {
-          name: `${process.env.FIRST_NAME} ${otherBrowserName}`,
-        })
-        .first(),
+      otherThread.getByRole('img', { name: `E2E ${otherBrowserName}` }).first(),
     ).toBeVisible();
     await expect(
       otherThread.getByText('This is a comment from the other user').first(),
     ).toBeVisible();
     await expect(
-      otherThread
-        .getByText(`${process.env.FIRST_NAME} ${otherBrowserName}`)
-        .first(),
+      otherThread.getByText(`E2E ${otherBrowserName}`).first(),
     ).toBeVisible();
 
     // We check that the first user can see the comment made by the second user in real time
@@ -122,7 +113,7 @@ test.describe('Doc Comments', () => {
       thread.getByText('This is a comment from the other user').first(),
     ).toBeVisible();
     await expect(
-      thread.getByText(`${process.env.FIRST_NAME} ${otherBrowserName}`).first(),
+      thread.getByText(`E2E ${otherBrowserName}`).first(),
     ).toBeVisible();
 
     await cleanup();
@@ -144,7 +135,7 @@ test.describe('Doc Comments', () => {
 
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
-      /color\(srgb\s+[\d\s.]+\s+\/\s+0\.4\)/,
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     await editor.first().click();
@@ -161,7 +152,7 @@ test.describe('Doc Comments', () => {
     // Edit Comment
     await thread.getByText('This is a comment').first().hover();
     await thread.locator('[data-test="moreactions"]').first().click();
-    await thread.getByRole('menuitem', { name: 'Edit comment' }).click();
+    await getMenuItem(thread, 'Edit comment').click();
     const commentEditor = thread.getByText('This is a comment').first();
     await commentEditor.fill('This is an edited comment');
     const saveBtn = thread.locator('button[data-test="save"]').first();
@@ -186,7 +177,7 @@ test.describe('Doc Comments', () => {
     // Delete second comment
     await thread.getByText('This is a second comment').first().hover();
     await thread.locator('[data-test="moreactions"]').first().click();
-    await thread.getByRole('menuitem', { name: 'Delete comment' }).click();
+    await getMenuItem(thread, 'Delete comment').click();
     await expect(
       thread.getByText('This is a second comment').first(),
     ).toBeHidden();
@@ -211,7 +202,7 @@ test.describe('Doc Comments', () => {
 
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
-      /color\(srgb\s+[\d\s.]+\s+\/\s+0\.4\)/,
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     await editor.first().click();
@@ -219,7 +210,7 @@ test.describe('Doc Comments', () => {
 
     await thread.getByText('This is a new comment').first().hover();
     await thread.locator('[data-test="moreactions"]').first().click();
-    await thread.getByRole('menuitem', { name: 'Delete comment' }).click();
+    await getMenuItem(thread, 'Delete comment').click();
 
     await expect(editor.getByText('Hello')).not.toHaveClass('bn-thread-mark');
     await expect(editor.getByText('Hello')).toHaveCSS(
@@ -277,15 +268,11 @@ test.describe('Doc Comments', () => {
 
     await expect(otherEditor.getByText('Hello')).toHaveCSS(
       'background-color',
-      /color\(srgb\s+[\d\s.]+\s+\/\s+0\.4\)/,
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     // We change the role of the second user to reader
-    await updateRoleUser(
-      page,
-      'Reader',
-      process.env[`SIGN_IN_USERNAME_${otherBrowserName.toUpperCase()}`] || '',
-    );
+    await updateRoleUser(page, 'Reader', `user.test@${otherBrowserName}.test`);
 
     // With the reader role, the second user cannot see comments
     await otherPage.reload();
@@ -310,15 +297,13 @@ test.describe('Doc Comments', () => {
     // Anonymous user can see and add comments
     await otherPage.getByRole('button', { name: 'Logout' }).click();
 
-    await otherPage.waitForTimeout(1500);
-
     await otherPage.goto(urlCommentDoc);
 
     await verifyDocName(otherPage, docTitle);
 
     await expect(otherEditor.getByText('Hello')).toHaveCSS(
       'background-color',
-      /color\(srgb\s+[\d\s.]+\s+\/\s+0\.4\)/,
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
     await otherEditor.getByText('Hello').click();
     await expect(
@@ -364,7 +349,7 @@ test.describe('Doc Comments', () => {
 
     await expect(editor1.getByText('Document One')).toHaveCSS(
       'background-color',
-      /color\(srgb\s+[\d\s.]+\s+\/\s+0\.4\)/,
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     await editor1.getByText('Document One').click();

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

@@ -3,11 +3,11 @@ import { expect, test } from '@playwright/test';
 import {
   createDoc,
   goToGridDoc,
+  keyCloakSignIn,
   randomName,
   verifyDocName,
 } from './utils-common';
 import { connectOtherUserToDoc } from './utils-share';
-import { SignIn } from './utils-signin';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -22,7 +22,8 @@ test.describe('Doc Create', () => {
       { timeout: 5000 },
     );
 
-    await page.getByRole('button', { name: 'Back to homepage' }).click();
+    const header = page.locator('header').first();
+    await header.locator('h1').getByText('Docs').click();
 
     const docsGrid = page.getByTestId('docs-grid');
     await expect(docsGrid).toBeVisible();
@@ -133,7 +134,7 @@ test.describe('Doc Create', () => {
         withoutSignIn: true,
       });
 
-    await SignIn(otherPage, otherBrowserName, false);
+    await keyCloakSignIn(otherPage, otherBrowserName, false);
 
     await verifyDocName(otherPage, 'From unlogged doc from url');
 
@@ -159,21 +160,22 @@ test.describe('Doc Create: Not logged', () => {
     browserName,
     request,
   }) => {
+    const SERVER_TO_SERVER_API_TOKENS = 'server-api-token';
     const markdown = `This is a normal text\n\n# And this is a large heading`;
     const [title] = randomName('My server way doc create', browserName, 1);
     const data = {
       title,
       content: markdown,
-      sub: process.env[`SUB_${browserName.toUpperCase()}`],
-      email: process.env[`SIGN_IN_USERNAME_${browserName.toUpperCase()}`],
+      sub: `user.test@${browserName}.test`,
+      email: `user.test@${browserName}.test`,
     };
 
     const newDoc = await request.post(
-      `${process.env.BASE_API_URL}/documents/create-for-owner/`,
+      `http://localhost:8071/api/v1.0/documents/create-for-owner/`,
       {
         data,
         headers: {
-          Authorization: `Bearer ${process.env.SERVER_TO_SERVER_API_TOKENS}`,
+          Authorization: `Bearer ${SERVER_TO_SERVER_API_TOKENS}`,
           format: 'json',
         },
       },
@@ -181,7 +183,7 @@ test.describe('Doc Create: Not logged', () => {
 
     expect(newDoc.ok()).toBeTruthy();
 
-    await SignIn(page, browserName);
+    await keyCloakSignIn(page, browserName);
 
     await goToGridDoc(page, { title });
 

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

@@ -5,6 +5,7 @@ import cs from 'convert-stream';
 
 import {
   createDoc,
+  getMenuItem,
   goToGridDoc,
   overrideConfig,
   verifyDocName,
@@ -147,7 +148,7 @@ test.describe('Doc Editor', () => {
     const wsClosePromise = webSocket.waitForEvent('close');
 
     await selectVisibility.click();
-    await page.getByRole('menuitemradio', { name: 'Connected' }).click();
+    await getMenuItem(page, 'Connected').click();
 
     // Assert that the doc reconnects to the ws
     const wsClose = await wsClosePromise;
@@ -604,7 +605,7 @@ test.describe('Doc Editor', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     await page.getByTestId('doc-access-mode').click();
-    await page.getByRole('menuitemradio', { name: 'Reading' }).click();
+    await getMenuItem(page, 'Reading').click();
 
     // Close the modal
     await page.getByRole('button', { name: 'close' }).first().click();

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

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test';
 import {
   createDoc,
   getGridRow,
+  getMenuItem,
   getOtherBrowserName,
   mockedListDocs,
   toggleHeaderMenu,
@@ -206,7 +207,7 @@ test.describe('Doc grid move', () => {
     const row = await getGridRow(page, titleDoc1);
     await row.getByText(`more_horiz`).click();
 
-    await page.getByRole('menuitem', { name: 'Move into a doc' }).click();
+    await getMenuItem(page, 'Move into a doc').click();
 
     await expect(
       page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
@@ -294,7 +295,7 @@ test.describe('Doc grid move', () => {
     const row = await getGridRow(page, titleDoc1);
     await row.getByText(`more_horiz`).click();
 
-    await page.getByRole('menuitem', { name: 'Move into a doc' }).click();
+    await getMenuItem(page, 'Move into a doc').click();
 
     await expect(
       page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
@@ -341,9 +342,7 @@ test.describe('Doc grid move', () => {
       `doc-share-access-request-row-${emailRequest}`,
     );
     await container.getByTestId('doc-role-dropdown').click();
-    await otherPage
-      .getByRole('menuitemradio', { name: 'Administrator' })
-      .click();
+    await getMenuItem(otherPage, 'Administrator').click();
     await container.getByRole('button', { name: 'Approve' }).click();
 
     await expect(otherPage.getByText('Access Requests')).toBeHidden();
@@ -354,7 +353,7 @@ test.describe('Doc grid move', () => {
     await page.reload();
     await row.getByText(`more_horiz`).click();
 
-    await page.getByRole('menuitem', { name: 'Move into a doc' }).click();
+    await getMenuItem(page, 'Move into a doc').click();
 
     await expect(
       page.getByRole('dialog').getByRole('heading', { name: 'Move' }),

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

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, getGridRow, verifyDocName } from './utils-common';
+import {
+  createDoc,
+  getGridRow,
+  getMenuItem,
+  verifyDocName,
+} from './utils-common';
 import { addNewMember, connectOtherUserToDoc } from './utils-share';
 
 type SmallDoc = {
@@ -99,7 +104,7 @@ test.describe('Document grid item options', () => {
     const row = await getGridRow(page, docTitle);
     await row.getByText(`more_horiz`).click();
 
-    await page.getByRole('menuitem', { name: 'Share' }).click();
+    await getMenuItem(page, 'Share').click();
 
     await expect(
       page.getByRole('dialog').getByText('Share the document'),
@@ -115,7 +120,7 @@ test.describe('Document grid item options', () => {
 
     // Pin
     await row.getByText(`more_horiz`).click();
-    await page.getByRole('menuitem', { name: 'Pin' }).click();
+    await getMenuItem(page, 'Pin').click();
 
     // Check is pinned
     await expect(row.getByTestId('doc-pinned-icon')).toBeVisible();
@@ -142,7 +147,7 @@ test.describe('Document grid item options', () => {
     const row = await getGridRow(page, docTitle);
     await row.getByText(`more_horiz`).click();
 
-    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await getMenuItem(page, 'Delete').click();
 
     await expect(
       page.getByRole('heading', { name: 'Delete a doc' }),

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

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test';
 import {
   createDoc,
   getGridRow,
+  getMenuItem,
   goToGridDoc,
   mockedDocument,
   verifyDocName,
@@ -78,7 +79,7 @@ test.describe('Doc Header', () => {
 
     await page.getByTestId('doc-visibility').click();
 
-    await page.getByRole('menuitemradio', { name: 'Public' }).click();
+    await getMenuItem(page, 'Public').click();
 
     await page.getByRole('button', { name: 'close' }).first().click();
 
@@ -152,10 +153,8 @@ test.describe('Doc Header', () => {
 
     const emojiPicker = page.locator('.--docs--doc-title').getByRole('button');
     const optionMenu = page.getByLabel('Open the document options');
-    const addEmojiMenuItem = page.getByRole('menuitem', { name: 'Add emoji' });
-    const removeEmojiMenuItem = page.getByRole('menuitem', {
-      name: 'Remove emoji',
-    });
+    const addEmojiMenuItem = getMenuItem(page, 'Add emoji');
+    const removeEmojiMenuItem = getMenuItem(page, 'Remove emoji');
 
     // Top parent should not have emoji picker
     await expect(emojiPicker).toBeHidden();
@@ -209,7 +208,7 @@ test.describe('Doc Header', () => {
     const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
 
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Delete document' }).click();
+    await getMenuItem(page, 'Delete document').click();
 
     await expect(
       page.getByRole('heading', { name: 'Delete a doc' }),
@@ -271,9 +270,7 @@ test.describe('Doc Header', () => {
 
     await page.getByLabel('Open the document options').click();
 
-    await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
-    ).toBeDisabled();
+    await expect(getMenuItem(page, 'Delete document')).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.locator('body').click({ position: { x: 0, y: 0 } });
@@ -296,7 +293,7 @@ test.describe('Doc Header', () => {
 
     await invitationRole.click();
 
-    await page.getByRole('menuitemradio', { name: 'Remove access' }).click();
+    await getMenuItem(page, 'Remove access').click();
     await expect(invitationCard).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
@@ -308,9 +305,7 @@ test.describe('Doc Header', () => {
     await expect(roles).toBeVisible();
 
     await roles.click();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Remove access' }),
-    ).toBeEnabled();
+    await expect(getMenuItem(page, 'Remove access')).toBeEnabled();
   });
 
   test('it checks the options available if editor', async ({ page }) => {
@@ -350,9 +345,7 @@ test.describe('Doc Header', () => {
     ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
-    ).toBeDisabled();
+    await expect(getMenuItem(page, 'Delete document')).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.locator('body').click({ position: { x: 0, y: 0 } });
@@ -422,9 +415,7 @@ test.describe('Doc Header', () => {
     ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
-    ).toBeDisabled();
+    await expect(getMenuItem(page, 'Delete document')).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.locator('body').click({ position: { x: 0, y: 0 } });
@@ -482,7 +473,7 @@ test.describe('Doc Header', () => {
 
     // Copy content to clipboard
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Copy as Markdown' }).click();
+    await getMenuItem(page, 'Copy as Markdown').click();
     await expect(
       page.getByText('Copied as Markdown to clipboard'),
     ).toBeVisible();
@@ -546,7 +537,7 @@ test.describe('Doc Header', () => {
       .click();
 
     // Pin
-    await page.getByRole('menuitem', { name: 'Pin' }).click();
+    await getMenuItem(page, 'Pin').click();
     await page
       .getByRole('button', { name: 'Open the document options' })
       .click();
@@ -567,11 +558,11 @@ test.describe('Doc Header', () => {
       .click();
 
     // Unpin
-    await page.getByRole('menuitem', { name: 'Unpin' }).click();
+    await getMenuItem(page, 'Unpin').click();
     await page
       .getByRole('button', { name: 'Open the document options' })
       .click();
-    await expect(page.getByRole('menuitem', { name: 'Pin' })).toBeVisible();
+    await expect(getMenuItem(page, 'Pin')).toBeVisible();
 
     await page.goto('/');
 
@@ -589,7 +580,7 @@ test.describe('Doc Header', () => {
 
     await page.getByLabel('Open the document options').click();
 
-    await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+    await getMenuItem(page, 'Duplicate').click();
     await expect(
       page.getByText('Document duplicated successfully!'),
     ).toBeVisible();
@@ -604,7 +595,7 @@ test.describe('Doc Header', () => {
     await expect(row.getByText(duplicateTitle)).toBeVisible();
 
     await row.getByText(`more_horiz`).click();
-    await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+    await getMenuItem(page, 'Duplicate').click();
     const duplicateDuplicateTitle = 'Copy of ' + duplicateTitle;
     await page.getByText(duplicateDuplicateTitle).click();
     await expect(page.getByText('Hello Duplicated World')).toBeVisible();
@@ -637,7 +628,7 @@ test.describe('Doc Header', () => {
 
     const currentUrl = page.url();
 
-    await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+    await getMenuItem(page, 'Duplicate').click();
 
     await expect(page).not.toHaveURL(new RegExp(currentUrl));
 
@@ -676,10 +667,8 @@ test.describe('Documents Header mobile', () => {
 
     await expect(page.getByRole('button', { name: 'Copy link' })).toBeHidden();
     await page.getByLabel('Open the document options').click();
-    await expect(
-      page.getByRole('menuitem', { name: 'Copy link' }),
-    ).toBeVisible();
-    await page.getByRole('menuitem', { name: 'Share' }).click();
+    await expect(getMenuItem(page, 'Copy link')).toBeVisible();
+    await getMenuItem(page, 'Share').click();
     await expect(page.getByRole('button', { name: 'Copy link' })).toBeVisible();
   });
 
@@ -702,7 +691,7 @@ test.describe('Documents Header mobile', () => {
     await goToGridDoc(page);
 
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Share' }).click();
+    await getMenuItem(page, 'Share').click();
 
     const shareModal = page.getByRole('dialog', {
       name: 'Share the document',

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './utils-common';
+import { createDoc, getMenuItem, verifyDocName } from './utils-common';
 import { updateShareLink } from './utils-share';
 import { createRootSubPage } from './utils-sub-pages';
 
@@ -53,19 +53,17 @@ test.describe('Inherited share accesses', () => {
     await expect(docVisibilityCard.getByText('Reading')).toBeVisible();
 
     await docVisibilityCard.getByText('Reading').click();
-    await page.getByRole('menuitemradio', { name: 'Editing' }).click();
+    await getMenuItem(page, 'Editing').click();
 
     await expect(docVisibilityCard.getByText('Reading')).toBeHidden();
     await expect(docVisibilityCard.getByText('Editing')).toBeVisible();
 
     // Verify inherited link
     await docVisibilityCard.getByText('Connected').click();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Private' }),
-    ).toBeDisabled();
+    await expect(getMenuItem(page, 'Private')).toBeDisabled();
 
     // Update child link
-    await page.getByRole('menuitemradio', { name: 'Public' }).click();
+    await getMenuItem(page, 'Public').click();
 
     await expect(docVisibilityCard.getByText('Connected')).toBeHidden();
     await expect(

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

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test';
 import {
   BROWSERS,
   createDoc,
+  getMenuItem,
   keyCloakSignIn,
   randomName,
   verifyDocName,
@@ -110,21 +111,13 @@ test.describe('Document create member', () => {
 
     // Check roles are displayed
     await list.getByTestId('doc-role-dropdown').click();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Reader' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Editor' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Owner' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Administrator' }),
-    ).toBeVisible();
+    await expect(getMenuItem(page, 'Reader')).toBeVisible();
+    await expect(getMenuItem(page, 'Editor')).toBeVisible();
+    await expect(getMenuItem(page, 'Owner')).toBeVisible();
+    await expect(getMenuItem(page, 'Administrator')).toBeVisible();
 
     // Validate
-    await page.getByRole('menuitemradio', { name: 'Administrator' }).click();
+    await getMenuItem(page, 'Administrator').click();
     await page.getByTestId('doc-share-invite-button').click();
 
     // Check invitation added
@@ -170,7 +163,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByTestId('doc-role-dropdown').click();
-    await page.getByRole('menuitemradio', { name: 'Owner' }).click();
+    await getMenuItem(page, 'Owner').click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -188,7 +181,7 @@ test.describe('Document create member', () => {
 
     // Choose a role
     await container.getByTestId('doc-role-dropdown').click();
-    await page.getByRole('menuitemradio', { name: 'Owner' }).click();
+    await getMenuItem(page, 'Owner').click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
       (response) =>
@@ -225,7 +218,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByTestId('doc-role-dropdown').click();
-    await page.getByRole('menuitemradio', { name: 'Administrator' }).click();
+    await getMenuItem(page, 'Administrator').click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -252,13 +245,13 @@ test.describe('Document create member', () => {
     );
 
     await userInvitation.getByTestId('doc-role-dropdown').click();
-    await page.getByRole('menuitemradio', { name: 'Reader' }).click();
+    await getMenuItem(page, 'Reader').click();
 
     const responsePatchInvitation = await responsePromisePatchInvitation;
     expect(responsePatchInvitation.ok()).toBeTruthy();
 
     await userInvitation.getByTestId('doc-role-dropdown').click();
-    await page.getByRole('menuitemradio', { name: 'Remove access' }).click();
+    await getMenuItem(page, 'Remove access').click();
 
     await expect(userInvitation).toBeHidden();
   });
@@ -310,7 +303,7 @@ test.describe('Document create member', () => {
       `doc-share-access-request-row-${emailRequest}`,
     );
     await container.getByTestId('doc-role-dropdown').click();
-    await page.getByRole('menuitemradio', { name: 'Administrator' }).click();
+    await getMenuItem(page, 'Administrator').click();
     await container.getByRole('button', { name: 'Approve' }).click();
 
     await expect(page.getByText('Access Requests')).toBeHidden();

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './utils-common';
+import { createDoc, getMenuItem, verifyDocName } from './utils-common';
 import { addNewMember } from './utils-share';
 
 test.beforeEach(async ({ page }) => {
@@ -160,9 +160,7 @@ test.describe('Document list members', () => {
       `You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.`,
     );
     await expect(soloOwner).toBeVisible();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Administrator' }),
-    ).toBeDisabled();
+    await expect(getMenuItem(page, 'Administrator')).toBeDisabled();
 
     await list.click({
       force: true, // Force click to close the dropdown
@@ -185,20 +183,18 @@ test.describe('Document list members', () => {
     });
 
     await currentUserRole.click();
-    await page.getByRole('menuitemradio', { name: 'Administrator' }).click();
+    await getMenuItem(page, 'Administrator').click();
     await list.click();
     await expect(currentUserRole).toBeVisible();
 
     await newUserRoles.click();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Owner' }),
-    ).toBeDisabled();
+    await expect(getMenuItem(page, 'Owner')).toBeDisabled();
     await list.click({
       force: true, // Force click to close the dropdown
     });
 
     await currentUserRole.click();
-    await page.getByRole('menuitemradio', { name: 'Reader' }).click();
+    await getMenuItem(page, 'Reader').click();
     await list.click({
       force: true, // Force click to close the dropdown
     });
@@ -238,11 +234,11 @@ test.describe('Document list members', () => {
     await expect(userReader).toBeVisible();
 
     await userReaderRole.click();
-    await page.getByRole('menuitemradio', { name: 'Remove access' }).click();
+    await getMenuItem(page, 'Remove access').click();
     await expect(userReader).toBeHidden();
 
     await mySelfRole.click();
-    await page.getByRole('menuitemradio', { name: 'Remove access' }).click();
+    await getMenuItem(page, 'Remove access').click();
     await expect(
       page.getByText('Insufficient access rights to view the document.'),
     ).toBeVisible();

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './utils-common';
+import { createDoc, getMenuItem, verifyDocName } from './utils-common';
 import { createRootSubPage } from './utils-sub-pages';
 
 test.beforeEach(async ({ page }) => {
@@ -136,13 +136,9 @@ test.describe('Document search', () => {
 
     await filters.click();
     await filters.getByRole('button', { name: 'Current doc' }).click();
-    await expect(
-      page.getByRole('menuitemcheckbox', { name: 'All docs' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('menuitemcheckbox', { name: 'Current doc' }),
-    ).toBeVisible();
-    await page.getByRole('menuitemcheckbox', { name: 'All docs' }).click();
+    await expect(getMenuItem(page, 'All docs')).toBeVisible();
+    await expect(getMenuItem(page, 'Current doc')).toBeVisible();
+    await getMenuItem(page, 'All docs').click();
 
     await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
   });

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

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test';
 import {
   createDoc,
   expectLoginPage,
+  getMenuItem,
   keyCloakSignIn,
   updateDocTitle,
   verifyDocName,
@@ -157,7 +158,7 @@ test.describe('Doc Tree', () => {
     );
     const currentUserRole = currentUser.getByTestId('doc-role-dropdown');
     await currentUserRole.click();
-    await page.getByRole('menuitemradio', { name: 'Administrator' }).click();
+    await getMenuItem(page, 'Administrator').click();
     await list.click();
 
     await page.getByRole('button', { name: 'Ok' }).click();
@@ -187,9 +188,10 @@ test.describe('Doc Tree', () => {
     const menu = child.getByText(`more_horiz`);
     await menu.click();
 
-    await expect(
-      page.getByRole('menuitem', { name: 'Move to my docs' }),
-    ).toHaveAttribute('aria-disabled', 'true');
+    await expect(getMenuItem(page, 'Move to my docs')).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
   });
 
   test('keyboard navigation with Enter key opens documents', async ({
@@ -333,9 +335,7 @@ test.describe('Doc Tree', () => {
     await row.hover();
     const menu = row.getByText(`more_horiz`);
     await menu.click();
-    await expect(
-      page.getByRole('menuitem', { name: 'Remove emoji' }),
-    ).toBeHidden();
+    await expect(getMenuItem(page, 'Remove emoji')).toBeHidden();
 
     // Close the menu
     await page.keyboard.press('Escape');
@@ -355,7 +355,7 @@ test.describe('Doc Tree', () => {
     // Now remove the emoji using the new action
     await row.hover();
     await menu.click();
-    await page.getByRole('menuitem', { name: 'Remove emoji' }).click();
+    await getMenuItem(page, 'Remove emoji').click();
 
     await expect(row.getByText('😀')).toBeHidden();
     await expect(titleEmojiPicker).toBeHidden();
@@ -385,7 +385,7 @@ test.describe('Doc Tree: Inheritance', () => {
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
 
-    await page.getByRole('menuitemradio', { name: 'Public' }).click();
+    await getMenuItem(page, 'Public').click();
 
     await expect(
       page.getByText('The document visibility has been updated.'),

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

@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test';
 
 import {
   createDoc,
+  getMenuItem,
   goToGridDoc,
   mockedDocument,
   verifyDocName,
@@ -20,7 +21,7 @@ test.describe('Doc Version', () => {
 
     // Initially, there is no version
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Version history' }).click();
+    await getMenuItem(page, 'Version history').click();
     await expect(page.getByText('History', { exact: true })).toBeVisible();
 
     const modal = page.getByRole('dialog', { name: 'Version history' });
@@ -74,7 +75,7 @@ test.describe('Doc Version', () => {
     ).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Version history' }).click();
+    await getMenuItem(page, 'Version history').click();
 
     await expect(panel).toBeVisible();
     await expect(page.getByText('History', { exact: true })).toBeVisible();
@@ -124,9 +125,7 @@ test.describe('Doc Version', () => {
     await verifyDocName(page, 'Mocked document');
 
     await page.getByLabel('Open the document options').click();
-    await expect(
-      page.getByRole('menuitem', { name: 'Version history' }),
-    ).toBeDisabled();
+    await expect(getMenuItem(page, 'Version history')).toBeDisabled();
   });
 
   test('it restores the doc version', async ({ page, browserName }) => {
@@ -153,7 +152,7 @@ test.describe('Doc Version', () => {
     await expect(page.getByText('World')).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Version history' }).click();
+    await getMenuItem(page, 'Version history').click();
 
     const modal = page.getByRole('dialog', { name: 'Version history' });
     const panel = modal.getByLabel('Version list');

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

@@ -4,6 +4,7 @@ import {
   BROWSERS,
   createDoc,
   expectLoginPage,
+  getMenuItem,
   keyCloakSignIn,
   verifyDocName,
 } from './utils-common';
@@ -46,21 +47,17 @@ test.describe('Doc Visibility', () => {
 
     await expect(selectVisibility.getByText('Private')).toBeVisible();
 
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Read only' }),
-    ).toBeHidden();
-    await expect(
-      page.getByRole('menuitemradio', { name: 'Can read and edit' }),
-    ).toBeHidden();
+    await expect(getMenuItem(page, 'Read only')).toBeHidden();
+    await expect(getMenuItem(page, 'Can read and edit')).toBeHidden();
 
     await selectVisibility.click();
-    await page.getByRole('menuitemradio', { name: 'Connected' }).click();
+    await getMenuItem(page, 'Connected').click();
 
     await expect(page.getByTestId('doc-access-mode')).toBeVisible();
 
     await selectVisibility.click();
 
-    await page.getByRole('menuitemradio', { name: 'Public' }).click();
+    await getMenuItem(page, 'Public').click();
 
     await expect(page.getByTestId('doc-access-mode')).toBeVisible();
   });
@@ -205,7 +202,7 @@ test.describe('Doc Visibility: Public', () => {
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
 
-    await page.getByRole('menuitemradio', { name: 'Public' }).click();
+    await getMenuItem(page, 'Public').click();
 
     await expect(
       page.getByText('The document visibility has been updated.'),
@@ -213,7 +210,7 @@ test.describe('Doc Visibility: Public', () => {
 
     await expect(page.getByTestId('doc-access-mode')).toBeVisible();
     await page.getByTestId('doc-access-mode').click();
-    await page.getByRole('menuitemradio', { name: 'Reading' }).click();
+    await getMenuItem(page, 'Reading').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
@@ -299,14 +296,14 @@ test.describe('Doc Visibility: Public', () => {
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
 
-    await page.getByRole('menuitemradio', { name: 'Public' }).click();
+    await getMenuItem(page, 'Public').click();
 
     await expect(
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
     await page.getByTestId('doc-access-mode').click();
-    await page.getByRole('menuitemradio', { name: 'Editing' }).click();
+    await getMenuItem(page, 'Editing').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
@@ -390,7 +387,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.getByRole('button', { name: 'Share' }).click();
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
-    await page.getByRole('menuitemradio', { name: 'Connected' }).click();
+    await getMenuItem(page, 'Connected').click();
 
     await expect(
       page.getByText('The document visibility has been updated.'),
@@ -438,7 +435,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.getByRole('button', { name: 'Share' }).click();
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
-    await page.getByRole('menuitemradio', { name: 'Connected' }).click();
+    await getMenuItem(page, 'Connected').click();
 
     await expect(
       page.getByText('The document visibility has been updated.'),
@@ -536,7 +533,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.getByRole('button', { name: 'Share' }).click();
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
-    await page.getByRole('menuitemradio', { name: 'Connected' }).click();
+    await getMenuItem(page, 'Connected').click();
 
     await expect(
       page.getByText('The document visibility has been updated.'),
@@ -544,7 +541,7 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     const urlDoc = page.url();
     await page.getByTestId('doc-access-mode').click();
-    await page.getByRole('menuitemradio', { name: 'Editing' }).click();
+    await getMenuItem(page, 'Editing').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { overrideConfig } from './utils-common';
+import { getMenuItem, overrideConfig } from './utils-common';
 
 test.describe('Footer', () => {
   test.use({ storageState: { cookies: [], origins: [] } });
@@ -47,7 +47,7 @@ test.describe('Footer', () => {
     // Check the translation
     const header = page.locator('header').first();
     await header.getByRole('button').getByText('English').click();
-    await page.getByRole('menuitemradio', { name: 'Français' }).click();
+    await getMenuItem(page, 'Français').click();
 
     await expect(
       page.locator('footer').getByText('Mentions légales'),
@@ -131,7 +131,7 @@ test.describe('Footer', () => {
     // Check the translation
     const header = page.locator('header').first();
     await header.getByRole('button').getByText('English').click();
-    await page.getByRole('menuitemradio', { name: 'Français' }).click();
+    await getMenuItem(page, 'Français').click();
 
     await expect(
       page

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

@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test';
 
 import {
   TestLanguage,
+  getMenuItem,
   overrideConfig,
   waitForLanguageSwitch,
 } from './utils-common';
@@ -44,7 +45,7 @@ test.describe('Help feature', () => {
 
       await page.getByRole('button', { name: 'Open help menu' }).click();
 
-      await page.getByRole('menuitem', { name: 'Onboarding' }).click();
+      await getMenuItem(page, 'Onboarding').click();
 
       const modal = page.getByTestId('onboarding-modal');
       await expect(modal).toBeVisible();
@@ -87,7 +88,7 @@ test.describe('Help feature', () => {
 
     test('closes modal with Skip button', async ({ page }) => {
       await page.getByRole('button', { name: 'Open help menu' }).click();
-      await page.getByRole('menuitem', { name: 'Onboarding' }).click();
+      await getMenuItem(page, 'Onboarding').click();
 
       const modal = page.getByTestId('onboarding-modal');
       await expect(modal).toBeVisible();
@@ -108,7 +109,7 @@ test.describe('Help feature', () => {
 
       await page.getByRole('button', { name: "Ouvrir le menu d'aide" }).click();
 
-      await page.getByRole('menuitem', { name: 'Premiers pas' }).click();
+      await getMenuItem(page, 'Premiers pas').click();
 
       const modal = page.getByLabel('Apprenez les principes fondamentaux');
 

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

@@ -75,7 +75,7 @@ test.describe('Language', () => {
 
     await expect(page.locator('[role="menu"]')).toBeVisible();
 
-    const menuItems = page.locator('[role="menuitemradio"]');
+    const menuItems = page.locator('[role="menuitem"], [role="menuitemradio"]');
     await expect(menuItems.first()).toBeVisible();
 
     await menuItems.first().click();

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -8,6 +8,16 @@ import theme_customization from '../../../../../backend/impress/configuration/th
 export type BrowserName = 'chromium' | 'firefox' | 'webkit';
 export const BROWSERS: BrowserName[] = ['chromium', 'webkit', 'firefox'];
 
+/** Returns a locator for a menu item (handles both menuitem and menuitemradio roles) */
+export const getMenuItem = (
+  context: Page | Locator,
+  name: string,
+  options?: { exact?: boolean },
+): Locator =>
+  context
+    .getByRole('menuitem', { name, exact: options?.exact })
+    .or(context.getByRole('menuitemradio', { name, exact: options?.exact }));
+
 export const CONFIG = {
   AI_BOT: {
     name: 'Docs AI',
@@ -208,11 +218,8 @@ export const goToGridDoc = async (
   page: Page,
   { nthRow = 1, title }: GoToGridDocOptions = {},
 ) => {
-  if (
-    await page.getByRole('button', { name: 'Back to homepage' }).isVisible()
-  ) {
-    await page.getByRole('button', { name: 'Back to homepage' }).click();
-  }
+  const header = page.locator('header').first();
+  await header.locator('h1').getByText('Docs').click();
 
   const docsGrid = page.getByTestId('docs-grid');
   await expect(docsGrid).toBeVisible();
@@ -385,12 +392,12 @@ export async function waitForLanguageSwitch(
 
   await languagePicker.click();
 
-  await page.getByRole('menuitemradio', { name: lang.label }).click();
+  await getMenuItem(page, lang.label).click();
 }
 
 export const clickInEditorMenu = async (page: Page, textButton: string) => {
   await page.getByRole('button', { name: 'Open the document options' }).click();
-  await page.getByRole('menuitem', { name: textButton }).click();
+  await getMenuItem(page, textButton).click();
 };
 
 export const clickInGridMenu = async (
@@ -401,7 +408,7 @@ export const clickInGridMenu = async (
   await row
     .getByRole('button', { name: /Open the menu of actions for the document/ })
     .click();
-  await page.getByRole('menuitem', { name: textButton }).click();
+  await getMenuItem(page, textButton).click();
 };
 
 export const writeReport = async (

src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts

@@ -2,10 +2,11 @@ import { Page, chromium, expect } from '@playwright/test';
 
 import {
   BrowserName,
+  getMenuItem,
   getOtherBrowserName,
+  keyCloakSignIn,
   verifyDocName,
 } from './utils-common';
-import { SignIn } from './utils-signin';
 
 export type Role = 'Administrator' | 'Owner' | 'Editor' | 'Reader';
 export type LinkReach = 'Private' | 'Connected' | 'Public';
@@ -39,7 +40,7 @@ export const addNewMember = async (
 
   // Choose a role
   await page.getByTestId('doc-role-dropdown').click();
-  await page.getByRole('menuitemradio', { name: role }).click();
+  await getMenuItem(page, role).click();
   await page.getByTestId('doc-share-invite-button').click();
 
   return users[index].email;
@@ -51,7 +52,7 @@ export const updateShareLink = async (
   linkRole?: LinkRole | null,
 ) => {
   await page.getByTestId('doc-visibility').click();
-  await page.getByRole('menuitemradio', { name: linkReach }).click();
+  await getMenuItem(page, linkReach).click();
 
   const visibilityUpdatedText = page
     .getByText('The document visibility has been updated')
@@ -61,7 +62,7 @@ export const updateShareLink = async (
 
   if (linkRole) {
     await page.getByTestId('doc-access-mode').click();
-    await page.getByRole('menuitemradio', { name: linkRole }).click();
+    await getMenuItem(page, linkRole).click();
     await expect(visibilityUpdatedText).toBeVisible();
   }
 };
@@ -76,7 +77,7 @@ export const updateRoleUser = async (
   const currentUser = list.getByTestId(`doc-share-member-row-${email}`);
   const currentUserRole = currentUser.getByTestId('doc-role-dropdown');
   await currentUserRole.click();
-  await page.getByRole('menuitemradio', { name: role }).click();
+  await getMenuItem(page, role).click();
   await list.click();
 };
 
@@ -131,14 +132,14 @@ export const connectOtherUserToDoc = async ({
       .getByRole('main', { name: 'Main content' })
       .getByLabel('Login');
     const loginFromHome = otherPage.getByRole('button', {
-      name: process.env.SIGN_IN_EL_TRIGGER,
+      name: 'Start Writing',
     });
 
     await loginFromApp.or(loginFromHome).first().click({
       timeout: 15000,
     });
 
-    await SignIn(otherPage, otherBrowserName, false);
+    await keyCloakSignIn(otherPage, otherBrowserName, false);
   }
   if (docTitle) {
     await verifyDocName(otherPage, docTitle);

src/frontend/apps/e2e/__tests__/app-impress/utils-signin.ts

@@ -1,87 +0,0 @@
-import { Page, expect } from '@playwright/test';
-
-export const SignIn = async (
-  page: Page,
-  browserName: string,
-  fromHome = true,
-) => {
-  if (process.env.CUSTOM_SIGN_IN === 'true') {
-    await customSignIn(page, browserName, fromHome);
-    return;
-  }
-
-  await keyCloakSignIn(page, browserName, fromHome);
-};
-
-export const customSignIn = async (
-  page: Page,
-  browserName: string,
-  fromHome = true,
-) => {
-  // Check if already signed in (Silent login or session still valid)
-  if (
-    await page
-      .locator('header')
-      .first()
-      .getByRole('button', {
-        name: 'Logout',
-      })
-      .isVisible()
-  ) {
-    return;
-  }
-
-  if (fromHome) {
-    await page
-      .getByRole('button', { name: process.env.SIGN_IN_EL_TRIGGER })
-      .first()
-      .click();
-  }
-
-  await page
-    .getByRole('textbox', { name: process.env.SIGN_IN_EL_USERNAME_INPUT })
-    .fill(process.env[`SIGN_IN_USERNAME_${browserName.toUpperCase()}`] || '');
-
-  if (process.env.SIGN_IN_EL_USERNAME_VALIDATION) {
-    await page
-      .getByRole('button', { name: process.env.SIGN_IN_EL_USERNAME_VALIDATION })
-      .first()
-      .click();
-  }
-
-  await page
-    .locator(
-      `input[name="${process.env.SIGN_IN_EL_PASSWORD_INPUT || 'password'}"]`,
-    )
-    .fill(process.env[`SIGN_IN_PASSWORD_${browserName.toUpperCase()}`] || '');
-
-  await page.click('button[type="submit"]', { force: true });
-};
-
-export const keyCloakSignIn = async (
-  page: Page,
-  browserName: string,
-  fromHome = true,
-) => {
-  if (fromHome) {
-    await page
-      .getByRole('button', { name: process.env.SIGN_IN_EL_TRIGGER })
-      .first()
-      .click();
-  }
-
-  const login = `user-e2e-${browserName}`;
-  const password = `password-e2e-${browserName}`;
-
-  await expect(
-    page.locator('.login-pf #kc-header-wrapper').getByText('impress'),
-  ).toBeVisible();
-
-  if (await page.getByLabel('Restart login').isVisible()) {
-    await page.getByLabel('Restart login').click();
-  }
-
-  await page.getByRole('textbox', { name: 'username' }).fill(login);
-  await page.getByRole('textbox', { name: 'password' }).fill(password);
-  await page.click('button[type="submit"]', { force: true });
-};

src/frontend/apps/e2e/package.json

@@ -24,7 +24,6 @@
   "dependencies": {
     "@types/pngjs": "6.0.5",
     "convert-stream": "1.0.2",
-    "dotenv": "17.3.1",
     "pdf-parse": "2.4.5",
     "pixelmatch": "7.1.0",
     "pngjs": "7.0.0"

src/frontend/apps/e2e/playwright.config.ts

@@ -1,10 +1,8 @@
 import { defineConfig, devices } from '@playwright/test';
-import dotenv from 'dotenv';
 
-dotenv.config({ path: ['./.env.local', './.env'], quiet: true, debug: true });
+const PORT = process.env.PORT || 3000;
 
-const PORT = process.env.PORT;
-const baseURL = process.env.BASE_URL;
+const baseURL = `http://localhost:${PORT}`;
 
 /**
  * See https://playwright.dev/docs/test-configuration.

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

@@ -1,17 +1,17 @@
-import { Ref, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { css } from 'styled-components';
 
 import { Box, BoxType } from './Box';
 
-export type BoxButtonType = Omit<BoxType, 'ref'> & {
+export type BoxButtonType = BoxType & {
   disabled?: boolean;
-  ref?: Ref<HTMLButtonElement>;
 };
 
+/**
+
 /**
  * Styleless button that extends the Box component.
  * Good to wrap around SVGs or other elements that need to be clickable.
- * Uses aria-disabled instead of native disabled to preserve keyboard focusability.
  * @param props - @see BoxType props
  * @param ref
  * @see Box
@@ -22,8 +22,8 @@ export type BoxButtonType = Omit<BoxType, 'ref'> & {
  *  </BoxButton>
  * ```
  */
-const BoxButton = forwardRef<HTMLButtonElement, BoxButtonType>(
-  ({ $css, disabled, ...props }, ref) => {
+const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
+  ({ $css, ...props }, ref) => {
     const theme = props.$theme || 'gray';
     const variation = props.$variation || 'primary';
 
@@ -31,18 +31,16 @@ const BoxButton = forwardRef<HTMLButtonElement, BoxButtonType>(
       <Box
         ref={ref}
         as="button"
-        type="button"
         $background="none"
         $margin="none"
         $padding="none"
         $hasTransition
-        aria-disabled={disabled || undefined}
         $css={css`
-          cursor: ${disabled ? 'not-allowed' : 'pointer'};
+          cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
           border: none;
           outline: none;
           font-family: inherit;
-          color: ${disabled &&
+          color: ${props.disabled &&
           `var(--c--contextuals--content--semantic--disabled--primary)`};
           &:focus-visible {
             transition: none;
@@ -55,11 +53,11 @@ const BoxButton = forwardRef<HTMLButtonElement, BoxButtonType>(
         `}
         {...props}
         className={`--docs--box-button ${props.className || ''}`}
-        onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-          if (disabled) {
+        onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+          if (props.disabled) {
             return;
           }
-          props.onClick?.(event as unknown as React.MouseEvent<HTMLDivElement>);
+          props.onClick?.(event);
         }}
       />
     );

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Box, Text, TextType } from '@/components';
+import { useHttpErrorMessages } from '@/hooks';
 
 const AlertStyled = styled(Alert)`
   & .c__button--tertiary:hover {
@@ -16,6 +17,7 @@ interface TextErrorsProps extends TextType {
   defaultMessage?: string;
   icon?: ReactNode;
   canClose?: boolean;
+  status?: number;
 }
 
 export const TextErrors = ({
@@ -23,6 +25,7 @@ export const TextErrors = ({
   defaultMessage,
   icon,
   canClose = false,
+  status,
   ...textProps
 }: TextErrorsProps) => {
   return (
@@ -35,6 +38,7 @@ export const TextErrors = ({
       <TextOnlyErrors
         causes={causes}
         defaultMessage={defaultMessage}
+        status={status}
         {...textProps}
       />
     </AlertStyled>
@@ -44,9 +48,39 @@ export const TextErrors = ({
 export const TextOnlyErrors = ({
   causes,
   defaultMessage,
+  status,
   ...textProps
 }: TextErrorsProps) => {
   const { t } = useTranslation();
+  const httpError = useHttpErrorMessages(status);
+
+  if (httpError) {
+    return (
+      <Box $direction="column" $gap="0.2rem">
+        <Text
+          as="h1"
+          $theme="error"
+          $textAlign="center"
+          $margin="0"
+          $size="1rem"
+          $weight="unset"
+          {...textProps}
+        >
+          {httpError.title}
+        </Text>
+        <Text
+          as="p"
+          $theme="error"
+          $textAlign="center"
+          $margin="0"
+          $size="0.875rem"
+          {...textProps}
+        >
+          {httpError.detail}
+        </Text>
+      </Box>
+    );
+  }
 
   return (
     <Box $direction="column" $gap="0.2rem">

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -26,7 +26,6 @@ import { useDropdownKeyboardNav } from './hook/useDropdownKeyboardNav';
 export type DropdownMenuOption = {
   icon?: ReactNode;
   label: string;
-  lang?: string;
   testId?: string;
   value?: string;
   callback?: () => void | Promise<unknown>;
@@ -70,10 +69,7 @@ export const DropdownMenu = ({
   const [isOpen, setIsOpen] = useState(opened ?? false);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const blockButtonRef = useRef<HTMLDivElement>(null);
-  const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]);
-  const isSingleSelectable = options.some(
-    (option) => option.isSelected !== undefined,
-  );
+  const menuItemRefs = useRef<(HTMLDivElement | null)[]>([]);
 
   const onOpenChange = useCallback(
     (isOpen: boolean) => {
@@ -114,6 +110,10 @@ export const DropdownMenu = ({
     [onOpenChange],
   );
 
+  const hasSelectable =
+    selectedValues !== undefined ||
+    options.some((option) => option.isSelected !== undefined);
+
   if (disabled) {
     return children;
   }
@@ -176,25 +176,20 @@ export const DropdownMenu = ({
           }
           const isDisabled = option.disabled !== undefined && option.disabled;
           const isFocused = index === focusedIndex;
-          const isSelected =
-            option.isSelected === true ||
-            (selectedValues?.includes(option.value ?? '') ?? false);
-          const itemRole =
-            selectedValues !== undefined
-              ? 'menuitemcheckbox'
-              : isSingleSelectable
-                ? 'menuitemradio'
-                : 'menuitem';
-          const optionKey = option.value ?? option.testId ?? `option-${index}`;
+          const ariaChecked = hasSelectable
+            ? option.isSelected ||
+              selectedValues?.includes(option.value ?? '') ||
+              false
+            : undefined;
 
           return (
-            <Fragment key={optionKey}>
+            <Fragment key={option.label}>
               <BoxButton
                 ref={(el) => {
                   menuItemRefs.current[index] = el;
                 }}
-                role={itemRole}
-                aria-checked={itemRole === 'menuitem' ? undefined : isSelected}
+                role={hasSelectable ? 'menuitemradio' : 'menuitem'}
+                aria-checked={ariaChecked}
                 data-testid={option.testId}
                 $direction="row"
                 disabled={isDisabled}
@@ -205,6 +200,7 @@ export const DropdownMenu = ({
                   triggerOption(option);
                 }}
                 onKeyDown={keyboardAction(() => triggerOption(option))}
+                key={option.label}
                 $align="center"
                 $justify="space-between"
                 $background="var(--c--contextuals--background--surface--primary)"
@@ -280,10 +276,11 @@ export const DropdownMenu = ({
                     </Box>
                   )}
                   <Text $variation={isDisabled ? 'tertiary' : 'primary'}>
-                    <span lang={option.lang}>{option.label}</span>
+                    {option.label}
                   </Text>
                 </Box>
-                {isSelected && (
+                {(option.isSelected ||
+                  selectedValues?.includes(option.value ?? '')) && (
                   <Icon
                     iconName="check"
                     $size="20px"

src/frontend/apps/impress/src/components/dropdown-menu/__tests__/DropdownMenu.spec.tsx

@@ -58,7 +58,7 @@ describe('<DropdownMenu />', () => {
     expect(radios[2]).toHaveAttribute('aria-checked', 'false');
   });
 
-  test('renders menuitemcheckbox role with aria-checked when selectedValues is provided', async () => {
+  test('renders menuitemradio role with aria-checked when selectedValues is provided', async () => {
     const optionsWithValues: DropdownMenuOption[] = [
       { label: 'English', value: 'en', callback: vi.fn() },
       { label: 'Français', value: 'fr', callback: vi.fn() },
@@ -77,12 +77,12 @@ describe('<DropdownMenu />', () => {
       { wrapper: AppWrapper },
     );
 
-    const checkboxes = screen.getAllByRole('menuitemcheckbox');
-    expect(checkboxes).toHaveLength(3);
+    const radios = screen.getAllByRole('menuitemradio');
+    expect(radios).toHaveLength(3);
 
-    expect(checkboxes[0]).toHaveAttribute('aria-checked', 'false');
-    expect(checkboxes[1]).toHaveAttribute('aria-checked', 'true');
-    expect(checkboxes[2]).toHaveAttribute('aria-checked', 'false');
+    expect(radios[0]).toHaveAttribute('aria-checked', 'false');
+    expect(radios[1]).toHaveAttribute('aria-checked', 'true');
+    expect(radios[2]).toHaveAttribute('aria-checked', 'false');
   });
 
   test('trigger button has aria-haspopup and aria-expanded', async () => {

src/frontend/apps/impress/src/components/dropdown-menu/hook/useDropdownKeyboardNav.ts

@@ -6,7 +6,7 @@ type UseDropdownKeyboardNavProps = {
   isOpen: boolean;
   focusedIndex: number;
   options: DropdownMenuOption[];
-  menuItemRefs: RefObject<(HTMLButtonElement | null)[]>;
+  menuItemRefs: RefObject<(HTMLDivElement | null)[]>;
   setFocusedIndex: (index: number) => void;
   onOpenChange: (isOpen: boolean) => void;
 };

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -118,13 +118,13 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const options: DropdownMenuOption[] = [
     {
       label: t('Share'),
-      icon: <GroupSVG width={24} height={24} aria-hidden="true" />,
+      icon: <GroupSVG width={24} height={24} />,
       callback: modalShare.open,
       show: isSmallMobile,
     },
     {
       label: t('Export'),
-      icon: <DownloadSVG width={24} height={24} aria-hidden="true" />,
+      icon: <DownloadSVG width={24} height={24} />,
       callback: () => {
         setIsModalExportOpen(true);
       },
@@ -133,9 +133,9 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     {
       label: doc.is_favorite ? t('Unpin') : t('Pin'),
       icon: doc.is_favorite ? (
-        <KeepOffSVG width={24} height={24} aria-hidden="true" />
+        <KeepOffSVG width={24} height={24} />
       ) : (
-        <KeepSVG width={24} height={24} aria-hidden="true" />
+        <KeepSVG width={24} height={24} />
       ),
       callback: () => {
         if (doc.is_favorite) {
@@ -148,7 +148,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Version history'),
-      icon: <HistorySVG width={24} height={24} aria-hidden="true" />,
+      icon: <HistorySVG width={24} height={24} />,
       disabled: !doc.abilities.versions_list,
       callback: () => {
         selectHistoryModal.open();
@@ -158,7 +158,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Remove emoji'),
-      icon: <RemoveEmojiSVG width={24} height={24} aria-hidden="true" />,
+      icon: <RemoveEmojiSVG width={24} height={24} />,
       callback: () => {
         updateDocEmoji(doc.id, doc.title ?? '', '');
       },
@@ -167,7 +167,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Add emoji'),
-      icon: <AddEmojiSVG width={24} height={24} aria-hidden="true" />,
+      icon: <AddEmojiSVG width={24} height={24} />,
       callback: () => {
         updateDocEmoji(doc.id, doc.title ?? '', '📄');
       },
@@ -176,12 +176,12 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Copy link'),
-      icon: <AddLinkSVG width={24} height={24} aria-hidden="true" />,
+      icon: <AddLinkSVG width={24} height={24} />,
       callback: copyDocLink,
     },
     {
       label: t('Copy as {{format}}', { format: 'Markdown' }),
-      icon: <MarkdownCopySVG width={24} height={24} aria-hidden="true" />,
+      icon: <MarkdownCopySVG width={24} height={24} />,
       callback: () => {
         void copyCurrentEditorToClipboard('markdown');
       },
@@ -189,7 +189,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Duplicate'),
-      icon: <ContentCopySVG width={24} height={24} aria-hidden="true" />,
+      icon: <ContentCopySVG width={24} height={24} />,
       disabled: !doc.abilities.duplicate,
       callback: () => {
         duplicateDoc({
@@ -202,7 +202,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: isChild ? t('Delete sub-document') : t('Delete document'),
-      icon: <DeleteSVG width={24} height={24} aria-hidden="true" />,
+      icon: <DeleteSVG width={24} height={24} />,
       disabled: !doc.abilities.destroy,
       callback: () => {
         setIsModalRemoveOpen(true);

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

@@ -44,7 +44,7 @@ export const DocIcon = ({
   const { t } = useTranslation();
   const { addLastFocus, restoreFocus } = useFocusStore();
 
-  const iconRef = useRef<HTMLButtonElement>(null);
+  const iconRef = useRef<HTMLDivElement>(null);
 
   const [openEmojiPicker, setOpenEmojiPicker] = useState<boolean>(false);
   const [pickerPosition, setPickerPosition] = useState<{

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -96,7 +96,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
   const ariaLabel = docTitle;
   const isDisabled = !!doc.deleted_at;
   const actionsRef = useRef<HTMLDivElement>(null);
-  const buttonOptionRef = useRef<HTMLButtonElement | null>(null);
+  const buttonOptionRef = useRef<HTMLDivElement | null>(null);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const target = e.target as HTMLElement | null;

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx

@@ -44,7 +44,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
     treeContext?.treeData.selectedNode?.id === treeContext.root.id;
   const rootItemRef = useRef<HTMLDivElement>(null);
   const rootActionsRef = useRef<HTMLDivElement>(null);
-  const rootButtonOptionRef = useRef<HTMLButtonElement | null>(null);
+  const rootButtonOptionRef = useRef<HTMLDivElement | null>(null);
 
   const { t } = useTranslation();
 

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx

@@ -33,7 +33,7 @@ type DocTreeItemActionsProps = {
   onOpenChange?: (isOpen: boolean) => void;
   parentId?: string | null;
   actionsRef?: React.RefObject<HTMLDivElement | null>;
-  buttonOptionRef?: React.RefObject<HTMLButtonElement | null>;
+  buttonOptionRef?: React.RefObject<HTMLDivElement | null>;
 };
 
 export const DocTreeItemActions = ({
@@ -48,7 +48,7 @@ export const DocTreeItemActions = ({
 }: DocTreeItemActionsProps) => {
   const internalActionsRef = useRef<HTMLDivElement | null>(null);
   const targetActionsRef = actionsRef ?? internalActionsRef;
-  const internalButtonRef = useRef<HTMLButtonElement | null>(null);
+  const internalButtonRef = useRef<HTMLDivElement | null>(null);
   const targetButtonRef = buttonOptionRef ?? internalButtonRef;
   const router = useRouter();
   const { t } = useTranslation();

src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx

@@ -58,6 +58,7 @@ export const DocVersionEditor = ({
       <Box $margin="large" className="--docs--doc-version-editor-error">
         <TextErrors
           causes={error.cause}
+          status={error.status}
           icon={
             error.status === 502 ? (
               <Text

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx

@@ -62,6 +62,7 @@ const VersionListState = ({
         >
           <TextErrors
             causes={error.cause}
+            status={error.status}
             icon={
               error.status === 502 ? (
                 <Icon iconName="wifi_off" $theme="danger" />

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

@@ -72,9 +72,9 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     {
       label: doc.is_favorite ? t('Unpin') : t('Pin'),
       icon: doc.is_favorite ? (
-        <KeepOffSVG width={24} height={24} aria-hidden="true" />
+        <KeepOffSVG width={24} height={24} />
       ) : (
-        <KeepSVG width={24} height={24} aria-hidden="true" />
+        <KeepSVG width={24} height={24} />
       ),
       callback: () => {
         if (doc.is_favorite) {
@@ -88,7 +88,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Share'),
-      icon: <GroupSVG width={24} height={24} aria-hidden="true" />,
+      icon: <GroupSVG width={24} height={24} />,
       callback: () => {
         shareModal.open();
       },
@@ -97,7 +97,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Move into a doc'),
-      icon: <DocMoveInSVG width={24} height={24} aria-hidden="true" />,
+      icon: <DocMoveInSVG width={24} height={24} />,
       callback: () => {
         importModal.open();
       },
@@ -106,7 +106,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Duplicate'),
-      icon: <ContentCopySVG width={24} height={24} aria-hidden="true" />,
+      icon: <ContentCopySVG width={24} height={24} />,
       disabled: !doc.abilities.duplicate,
       callback: () => {
         duplicateDoc({
@@ -119,7 +119,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Delete'),
-      icon: <DeleteSVG width={24} height={24} aria-hidden="true" />,
+      icon: <DeleteSVG width={24} height={24} />,
       callback: () => deleteModal.open(),
       disabled: !doc.abilities.destroy,
       testId: `docs-grid-actions-remove-${doc.id}`,

src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx

@@ -1,4 +1,3 @@
-import { announce } from '@react-aria/live-announcer';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
@@ -18,35 +17,23 @@ export const LanguagePicker = () => {
   const { changeLanguageSynchronized } = useSynchronizedLanguage();
   const language = i18n.language;
 
-  const toLangTag = (locale: string) => locale.replace('_', '-');
-
   // Compute options for dropdown
   const optionsPicker = useMemo(() => {
     const backendOptions = conf?.LANGUAGES ?? [[language, language]];
     return backendOptions.map(([backendLocale, backendLabel]) => {
       return {
         label: backendLabel,
-        lang: toLangTag(backendLocale),
-        value: backendLocale,
         isSelected: getMatchingLocales([backendLocale], [language]).length > 0,
-        callback: async () => {
-          await changeLanguageSynchronized(backendLocale, user);
-          announce(
-            t('Language changed to {{language}}', {
-              language: backendLabel,
-              defaultValue: `Language changed to ${backendLabel}`,
-            }),
-            'polite',
-          );
-        },
+        callback: () => changeLanguageSynchronized(backendLocale, user),
       };
     });
-  }, [changeLanguageSynchronized, conf?.LANGUAGES, language, t, user]);
+  }, [changeLanguageSynchronized, conf?.LANGUAGES, language, user]);
 
   // Extract current language label for display
-  const [currentLanguageCode, currentLanguageLabel] = conf?.LANGUAGES.find(
-    ([code]) => getMatchingLocales([code], [language]).length > 0,
-  ) ?? [language, language];
+  const currentLanguageLabel =
+    conf?.LANGUAGES.find(
+      ([code]) => getMatchingLocales([code], [language]).length > 0,
+    )?.[1] || language;
 
   return (
     <DropdownMenu
@@ -78,9 +65,7 @@ export const LanguagePicker = () => {
         $align="center"
       >
         <Icon iconName="translate" $color="inherit" $size="xl" />
-        <span lang={toLangTag(currentLanguageCode)}>
-          {currentLanguageLabel}
-        </span>
+        {currentLanguageLabel}
       </Box>
     </DropdownMenu>
   );

src/frontend/apps/impress/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useClipboard';
 export * from './useCmdK';
 export * from './useDate';
+export * from './useHttpErrorMessages';
 export * from './useKeyboardAction';

src/frontend/apps/impress/src/hooks/useHttpErrorMessages.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+
+export const useHttpErrorMessages = (status?: number) => {
+  const { t } = useTranslation();
+
+  const messages: Record<number, { title: string; detail: string }> = {
+    500: {
+      title: t('500 - Internal Server Error'),
+      detail: t('The server met an unexpected condition.'),
+    },
+    502: {
+      title: t('502 - Bad Gateway'),
+      detail: t(
+        'The server received an invalid response. Please check your connection and try again.',
+      ),
+    },
+    503: {
+      title: t('503 - Service Unavailable'),
+      detail: t(
+        'The service is temporarily unavailable. Please try again later.',
+      ),
+    },
+  };
+
+  return status ? messages[status] : undefined;
+};

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -216,6 +216,7 @@ const DocPage = ({ id }: DocProps) => {
       <Box $margin="large">
         <TextErrors
           causes={error.cause}
+          status={error.status}
           icon={
             error.status === 502 ? (
               <Icon iconName="wifi_off" $theme="danger" $withThemeInherited />

src/frontend/servers/y-provider/Dockerfile

@@ -51,8 +51,6 @@ RUN NODE_ENV=production yarn install --frozen-lockfile
 # Remove npm, contains CVE related to cross-spawn and we don't use it.
 RUN rm -rf /usr/local/bin/npm /usr/local/lib/node_modules/npm
 
-ENV NODE_OPTIONS="--max-old-space-size=2048"
-
 # Un-privileged user running the application
 ARG DOCKER_USER
 USER ${DOCKER_USER}

src/frontend/servers/y-provider/__tests__/convert.test.ts

@@ -1,6 +1,6 @@
 import { ServerBlockNoteEditor } from '@blocknote/server-util';
 import request from 'supertest';
-import { afterEach, describe, expect, test, vi } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 import * as Y from 'yjs';
 
 vi.mock('../src/env', async (importOriginal) => {
@@ -62,11 +62,7 @@ const expectedBlocks = [
 
 console.error = vi.fn();
 
-describe('Conversion Testing', () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
+describe('Server Tests', () => {
   test('POST /api/convert with incorrect API key responds with 401', async () => {
     const app = initApp();
 
@@ -174,7 +170,6 @@ describe('Conversion Testing', () => {
   });
 
   test('POST /api/convert BlockNote to Yjs', async () => {
-    const destroySpy = vi.spyOn(Y.Doc.prototype, 'destroy');
     const app = initApp();
     const editor = ServerBlockNoteEditor.create();
     const blocks = await editor.tryParseMarkdownToBlocks(expectedMarkdown);
@@ -197,7 +192,6 @@ describe('Conversion Testing', () => {
     const decodedBlocks = editor.yDocToBlocks(ydoc, 'document-store');
 
     expect(decodedBlocks).toStrictEqual(expectedBlocks);
-    expect(destroySpy).toHaveBeenCalledTimes(1);
   });
 
   test('POST /api/convert BlockNote to HTML', async () => {
@@ -259,7 +253,6 @@ describe('Conversion Testing', () => {
   });
 
   test('POST /api/convert Yjs to JSON', async () => {
-    const destroySpy = vi.spyOn(Y.Doc.prototype, 'destroy');
     const app = initApp();
     const editor = ServerBlockNoteEditor.create();
     const blocks = await editor.tryParseMarkdownToBlocks(expectedMarkdown);
@@ -279,7 +272,6 @@ describe('Conversion Testing', () => {
     );
     expect(response.body).toBeInstanceOf(Array);
     expect(response.body).toStrictEqual(expectedBlocks);
-    expect(destroySpy).toHaveBeenCalledTimes(1);
   });
 
   test('POST /api/convert Markdown to JSON', async () => {
@@ -301,7 +293,6 @@ describe('Conversion Testing', () => {
   });
 
   test('POST /api/convert with invalid Yjs content returns 400', async () => {
-    const destroySpy = vi.spyOn(Y.Doc.prototype, 'destroy');
     const app = initApp();
     const response = await request(app)
       .post('/api/convert')
@@ -313,6 +304,5 @@ describe('Conversion Testing', () => {
 
     expect(response.status).toBe(400);
     expect(response.body).toStrictEqual({ error: 'Invalid content' });
-    expect(destroySpy).toHaveBeenCalledTimes(1);
   });
 });

src/frontend/servers/y-provider/src/handlers/convertHandler.ts

@@ -60,12 +60,8 @@ const readers: InputReader[] = [
     supportedContentTypes: [ContentTypes.YJS, ContentTypes.OctetStream],
     read: async (data) => {
       const ydoc = new Y.Doc();
-      try {
-        Y.applyUpdate(ydoc, data);
-        return editor.yDocToBlocks(ydoc, 'document-store') as PartialBlock[];
-      } finally {
-        ydoc.destroy();
-      }
+      Y.applyUpdate(ydoc, data);
+      return editor.yDocToBlocks(ydoc, 'document-store') as PartialBlock[];
     },
   },
   {
@@ -81,14 +77,7 @@ const writers: OutputWriter[] = [
   },
   {
     supportedContentTypes: [ContentTypes.YJS, ContentTypes.OctetStream],
-    write: async (blocks) => {
-      const ydoc = createYDocument(blocks);
-      try {
-        return Y.encodeStateAsUpdate(ydoc);
-      } finally {
-        ydoc.destroy();
-      }
-    },
+    write: async (blocks) => Y.encodeStateAsUpdate(createYDocument(blocks)),
   },
   {
     supportedContentTypes: [ContentTypes.Markdown, ContentTypes.XMarkdown],

src/frontend/yarn.lock

@@ -1769,11 +1769,18 @@
     minimatch "^10.2.4"
 
 "@eslint/config-helpers@^0.5.2":
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/@eslint/config-helpers/-/config-helpers-0.5.3.tgz#721fe6bbb90d74b0c80d6ff2428e5bbcb002becb"
-  integrity sha512-lzGN0onllOZCGroKJmRwY6QcEHxbjBw1gwB8SgRSqK8YbbtEXMvKynsXc3553ckIEBxsbMBU7oOZXKIPGZNeZw==
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@eslint/config-helpers/-/config-helpers-0.5.2.tgz#314c7b03d02a371ad8c0a7f6821d5a8a8437ba9d"
+  integrity sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==
   dependencies:
-    "@eslint/core" "^1.1.1"
+    "@eslint/core" "^1.1.0"
+
+"@eslint/core@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-1.1.0.tgz#51f5cd970e216fbdae6721ac84491f57f965836d"
+  integrity sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==
+  dependencies:
+    "@types/json-schema" "^7.0.15"
 
 "@eslint/core@^1.1.1":
   version "1.1.1"
@@ -10344,9 +10351,9 @@ eslint@10.0.3:
     optionator "^0.9.3"
 
 espree@^11.1.1:
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-11.2.0.tgz#01d5e47dc332aaba3059008362454a8cc34ccaa5"
-  integrity sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-11.1.1.tgz#866f6bc9ccccd6f28876b7a6463abb281b9cb847"
+  integrity sha512-AVHPqQoZYc+RUM4/3Ly5udlZY/U4LS8pIG05jEjWM2lQMU/oaZ7qshzAl2YP1tfNmXfftH3ohurfwNAug+MnsQ==
   dependencies:
     acorn "^8.16.0"
     acorn-jsx "^5.3.2"
@@ -10722,12 +10729,7 @@ flat-cache@^6.1.20:
     flatted "^3.3.3"
     hookified "^1.15.0"
 
-flatted@^3.2.9:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.4.2.tgz#f5c23c107f0f37de8dbdf24f13722b3b98d52726"
-  integrity sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==
-
-flatted@^3.3.3:
+flatted@^3.2.9, flatted@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==

src/helm/env.d/feature/values.impress.yaml.gotmpl

@@ -145,7 +145,6 @@ yProvider:
     COLLABORATION_SERVER_ORIGIN: https://{{ .Values.feature }}-docs.{{ .Values.domain }}
     COLLABORATION_SERVER_SECRET: my-secret
     Y_PROVIDER_API_KEY: my-secret
-    NODE_OPTIONS: "--max-old-space-size=1024"
 
 docSpec:
   enabled: true