From 1211e04a458357450c86b24f17382113913a4b2f Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 6 Jan 2026 17:51:47 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20visual?=
 =?UTF-8?q?=20focus=20on=20some=20elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve visual focus indication on
MainLayout content and PdfBlock editor.
---
 .../components/custom-blocks/PdfBlock.tsx     | 53 ++++++++++---------
 .../apps/impress/src/layouts/MainLayout.tsx   |  2 +-
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx
index 1130d2b5..04b75432 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx
@@ -59,11 +59,7 @@ interface PdfBlockComponentProps {
   >;
 }
 
-const PdfBlockComponent = ({
-  editor,
-  block,
-  contentRef,
-}: PdfBlockComponentProps) => {
+const PdfBlockComponent = ({ editor, block }: PdfBlockComponentProps) => {
   const pdfUrl = block.props.url;
   const { i18n, t } = useTranslation();
   const lang = i18n.resolvedLanguage;
@@ -114,27 +110,34 @@ const PdfBlockComponent = ({
     void validatePDFContent();
   }, [pdfUrl]);
 
+  if (isPDFContentLoading) {
+    return <Loading />;
+  }
+
+  if (!isPDFContentLoading && isPDFContent !== null && !isPDFContent) {
+    return (
+      <Box
+        $align="center"
+        $justify="center"
+        $color="#666"
+        $background="#f5f5f5"
+        $border="1px solid #ddd"
+        $height="300px"
+        $css={css`
+          text-align: center;
+        `}
+        $width="100%"
+        contentEditable={false}
+        onClick={() => editor.setTextCursorPosition(block)}
+      >
+        {t('Invalid or missing PDF file.')}
+      </Box>
+    );
+  }
+
   return (
-    <Box ref={contentRef} className="bn-file-block-content-wrapper">
+    <>
       <PDFBlockStyle />
-      {isPDFContentLoading && <Loading />}
-      {!isPDFContentLoading && isPDFContent !== null && !isPDFContent && (
-        <Box
-          $align="center"
-          $justify="center"
-          $color="#666"
-          $background="#f5f5f5"
-          $border="1px solid #ddd"
-          $height="300px"
-          $css={css`
-            text-align: center;
-          `}
-          contentEditable={false}
-          onClick={() => editor.setTextCursorPosition(block)}
-        >
-          {t('Invalid or missing PDF file.')}
-        </Box>
-      )}
       <ResizableFileBlockWrapper
         buttonIcon={
           <Icon iconName="upload" $size="24px" $css="line-height: normal;" />
@@ -158,7 +161,7 @@ const PdfBlockComponent = ({
           />
         )}
       </ResizableFileBlockWrapper>
-    </Box>
+    </>
   );
 };
 
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 39abde49..9a295bae 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -120,7 +120,7 @@ const MainContent = ({
       $css={css`
         overflow-y: auto;
         overflow-x: clip;
-        &:focus {
+        &:focus-visible {
           outline: 3px solid ${colorsTokens['brand-400']};
           outline-offset: -3px;
         }