From 2f612dbc2f3b9b8b40ae6877201862f324ed4497 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 15 Dec 2025 12:38:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20improve=20access?=
 =?UTF-8?q?ibility=20CalloutBlock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The recent update of Blocknote brokes a test
because a element was not easily accessible anymore.
We improved the CalloutBlock to be able to
be closed when "escape" is pressed, we improve
the positionning of the EmojiPicker too.
---
 .../__tests__/app-impress/doc-editor.spec.ts  |  2 +
 .../components/custom-blocks/CalloutBlock.tsx | 53 +++++++++++--------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
index cc981f73..4c355861 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
@@ -802,6 +802,8 @@ test.describe('Doc Editor', () => {
     await page.getByText('Symbols').scrollIntoViewIfNeeded();
     await expect(page.getByRole('button', { name: '🛃' })).toBeVisible();
 
+    await page.keyboard.press('Escape');
+
     await page.locator('.bn-side-menu > button').last().click();
     await page.locator('.mantine-Menu-dropdown > button').last().click();
     await page.locator('.bn-color-picker-dropdown > button').last().click();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
index f5144a26..4a54ca96 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
@@ -97,34 +97,41 @@ const CalloutComponent = ({
       `}
     >
       <CalloutBlockStyle />
-      <BoxButton
-        contentEditable={false}
-        onClick={toggleEmojiPicker}
-        $css={css`
-          font-size: 1.125rem;
-          cursor: ${isEditable ? 'pointer' : 'default'};
-          ${isEditable &&
-          `
+      <Box $position="relative">
+        <BoxButton
+          contentEditable={false}
+          onClick={toggleEmojiPicker}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape' && openEmojiPicker) {
+              setOpenEmojiPicker(false);
+            }
+          }}
+          $css={css`
+            font-size: 1.125rem;
+            cursor: ${isEditable ? 'pointer' : 'default'};
+            ${isEditable &&
+            `
           &:hover {
             background-color: rgba(0, 0, 0, 0.1);
           }
           `}
-        `}
-        $align="center"
-        $width="28px"
-        $radius="4px"
-      >
-        {block.props.emoji}
-      </BoxButton>
+          `}
+          $align="center"
+          $width="28px"
+          $radius="4px"
+        >
+          {block.props.emoji}
+        </BoxButton>
 
-      {openEmojiPicker && (
-        <EmojiPicker
-          emojiData={emojidata}
-          onClickOutside={onClickOutside}
-          onEmojiSelect={onEmojiSelect}
-          withOverlay={true}
-        />
-      )}
+        {openEmojiPicker && (
+          <EmojiPicker
+            emojiData={emojidata}
+            onClickOutside={onClickOutside}
+            onEmojiSelect={onEmojiSelect}
+            withOverlay={true}
+          />
+        )}
+      </Box>
       <Box as="p" className="inline-content" ref={contentRef} />
     </Box>
   );