From 95c06d68cb0ac6f20550a606048801c6d8bf9dee Mon Sep 17 00:00:00 2001
From: Your name <marine.marchandb@etik.com>
Date: Mon, 3 Feb 2025 16:27:24 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20(frontend)=20navigation=20?=
 =?UTF-8?q?with=20tab=20and=20other=20modifications?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- In DocGrid, when navigating with tab, we can see where we are
- In Doc, don't read "doc title input" but "rename"
- In docSearch, don't read "search" icon and read "aucun document
  trouvé" with screen reader
---
 .../quick-search/QuickSearchInput.tsx         |  6 ++++-
 .../src/cunningham/cunningham-style.css       | 25 +++++++++++++++++++
 .../docs/doc-header/components/DocTitle.tsx   |  3 ---
 .../doc-search/components/DocSearchModal.tsx  | 16 +++++++++++-
 .../apps/impress/src/i18n/translations.json   |  2 +-
 5 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
index 2fa88e54..8604b47c 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
@@ -47,7 +47,11 @@ export const QuickSearchInput = ({
         $gap={spacing['2xs']}
         $padding={{ all: 'base' }}
       >
-        {!loading && <Icon iconName="search" $variation="600" />}
+        {!loading && (
+          <span aria-hidden="true">
+            <Icon iconName="search" $variation="600" />
+          </span>
+        )}
         {loading && (
           <div>
             <Loader size="small" />
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index 7b8b9403..c01ebff1 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -605,3 +605,28 @@ input:-webkit-autofill:focus {
 .c__tooltip {
   padding: 4px 6px;
 }
+
+/**
+ * lecture ou non des icons
+ */
+ .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[data-icon]:before {
+  font-family: 'Material Icons';
+  content: attr(data-icon);
+}
+
+button:focus {
+  outline: 3px solid #4D90FE; 
+}
+
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
index 37e2fdf9..1b8c863b 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import {
   Tooltip,
   VariantType,
@@ -114,7 +112,6 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
           defaultValue={isUntitled ? undefined : titleDisplay}
           onKeyDownCapture={handleKeyDown}
           suppressContentEditableWarning={true}
-          aria-label="doc title input"
           onBlurCapture={(event) =>
             handleTitleSubmit(event.target.textContent || '')
           }
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
index 7585ba4a..b463d46c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -51,7 +51,7 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
     return {
       groupName: docs.length > 0 ? t('Select a document') : '',
       elements: search ? docs : [],
-      emptyString: t('No document found'),
+      //emptyString: t('No document found'),
       endActions: hasNextPage
         ? [{ content: <InView onChange={() => void fetchNextPage()} /> }]
         : [],
@@ -96,6 +96,20 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
                 renderElement={(doc) => <DocSearchItem doc={doc} />}
               />
             )}
+            {/* Message accessible pour les résultats vides */}
+            {search && docsData.elements.length === 0 && (
+              <p
+                role="alert"
+                aria-live="polite"
+                style={{
+                  textAlign: 'center',
+                  marginTop: '1rem',
+                  color: '#666',
+                }}
+              >
+                {t('No document found')}
+              </p>
+            )}
           </Box>
         </QuickSearch>
       </Box>
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/src/frontend/apps/impress/src/i18n/translations.json
index c7539969..af08c2c1 100644
--- a/src/frontend/apps/impress/src/i18n/translations.json
+++ b/src/frontend/apps/impress/src/i18n/translations.json
@@ -246,7 +246,7 @@
       "It's true, you didn't have to click on a block that covers half the page to say you agree to the placement of cookies — even if you don't know what it means!": "C'est vrai, vous n'avez pas à cliquer sur un bloc qui couvre la moitié de la page pour dire que vous acceptez le placement de cookies — même si vous ne savez pas ce que cela signifie !",
       "Language": "Langue",
       "Last update: {{update}}": "Dernière mise à jour : {{update}}",
-      "Legal Notice": "Mentions Legales",
+      "Legal Notice": "Mentions Légales",
       "Legal notice": "Mention légale",
       "Link Copied !": "Lien copié !",
       "Link parameters": "Paramètres du lien",