♻️(frontend) improve accessibility CalloutBlock

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.

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();

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>
   );