♿️(frontend) Accessibility clean

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@ag-media/react-pdf-table": "^2.0.1"
+  }
+}

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

@@ -53,11 +53,14 @@ export const DropButton = ({
 }: PropsWithChildren<DropButtonProps>) => {
   const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
 
-  const triggerRef = useRef(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const firstFocusableRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
-    setIsLocalOpen(isOpen);
-  }, [isOpen]);
+    if (isLocalOpen && firstFocusableRef.current) {
+      firstFocusableRef.current.focus();
+    }
+  }, [isLocalOpen]);
 
   const onOpenChangeHandler = (isOpen: boolean) => {
     setIsLocalOpen(isOpen);

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -609,3 +609,20 @@ input:-webkit-autofill:focus {
 .c__tooltip {
   padding: 4px 6px;
 }
+
+button:focus {
+  background-color: var(
+    --c--components--button--primary-text--background--color-hover
+  );
+  border-radius: var(--c--components--button--border-radius--focus);
+  box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400)
+}
+
+.new-doc-button {
+  color: white !important;
+}
+
+.new-doc-button:focus,
+.new-doc-button:focus-visible {
+  color: white !important;
+}

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -1,9 +1,4 @@
-import {
-  BlockNoteSchema,
-  Dictionary,
-  locales,
-  withPageBreak,
-} from '@blocknote/core';
+import { BlockNoteSchema, Dictionary, locales } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
@@ -27,7 +22,7 @@ import { randomColor } from '../utils';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolbar';
 
-export const blockNoteSchema = withPageBreak(BlockNoteSchema.create());
+export const blockNoteSchema = BlockNoteSchema.create();
 
 interface BlockNoteEditorProps {
   doc: Doc;

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

@@ -54,6 +54,9 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
           $css={css`
             flex: ${flexLeft};
             align-items: center;
+            &:focus {
+              outline: 2px solidrgb(33, 34, 82);
+            }
             min-width: 0;
           `}
           href={`/docs/${doc.id}`}

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

@@ -50,7 +50,7 @@ export const SimpleDocItem = ({
         {isPinned ? (
           <PinnedDocumentIcon aria-label={t('Pin document icon')} />
         ) : (
-          <SimpleFileIcon aria-label={t('Simple document icon')} />
+          <SimpleFileIcon aria-hidden="true" />
         )}
       </Box>
       <Box $justify="center" $overflow="auto">

src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx

@@ -7,9 +7,11 @@ import { createGlobalStyle } from 'styled-components';
 import { useCunninghamTheme } from '@/cunningham';
 
 const GaufreStyle = createGlobalStyle`
-  .lasuite-gaufre-btn{
-    box-shadow: inset 0 0 0 0 !important;
+
+  &:focus {
+    outline: 2px solidrgb(33, 34, 82);
   }
+
 `;
 
 export const LaGaufre = () => {

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

@@ -14,6 +14,29 @@ export const LanguagePicker = () => {
 
   const optionsPicker = useMemo(() => {
     return (languages || []).map((lang) => ({
+      value: lang,
+      label: lang,
+      render: () => (
+        <Box
+          className="c_select__render"
+          $direction="row"
+          $gap="0.7rem"
+          $align="center"
+        >
+          <Text
+            $isMaterialIcon
+            $size="1rem"
+            $theme="primary"
+            $weight="bold"
+            $variation="800"
+          >
+            translate
+          </Text>
+          <Text $theme="primary" $weight="500" $variation="800" lang={lang}>
+            {LANGUAGES_ALLOWED[lang]}
+          </Text>
+        </Box>
+      ),
       label: LANGUAGES_ALLOWED[lang],
       isSelected: language === lang,
       callback: () => {

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -50,6 +50,7 @@ export const LeftPanel = () => {
             overflow: hidden;
             border-right: 1px solid ${colors['greyscale-200']};
         `}
+          $background={colors['greyscale-000']}
         >
           <Box
             $css={css`

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx

@@ -50,23 +50,39 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
                 onClick={goToHome}
                 size="medium"
                 color="tertiary-text"
+                aria-label={t('Back to home page')}
                 icon={
-                  <Icon $variation="800" $theme="primary" iconName="house" />
+                  <span aria-hidden="true">
+                    <Icon $variation="800" $theme="primary" iconName="house" />
+                  </span>
                 }
               />
               {authenticated && (
                 <Button
                   onClick={searchModal.open}
                   size="medium"
                   color="tertiary-text"
+                  aria-label={t('Search')}
                   icon={
-                    <Icon $variation="800" $theme="primary" iconName="search" />
+                    <span aria-hidden="true">
+                      <Icon
+                        $variation="800"
+                        $theme="primary"
+                        iconName="search"
+                      />
+                    </span>
                   }
                 />
               )}
             </Box>
             {authenticated && (
-              <Button onClick={createNewDoc}>{t('New doc')}</Button>
+              <Button
+                onClick={createNewDoc}
+                className="new-doc-button"
+                aria-label={t('New document')}
+              >
+                {t('New doc')}
+              </Button>
             )}
           </Box>
         </SeparatedSection>

src/frontend/apps/impress/src/i18n/translations.json

@@ -270,6 +270,7 @@
       "My docs": "Mes documents",
       "Name": "Nom",
       "New doc": "Nouveau doc",
+      "New document": "Nouveau document",
       "No active search": "Aucune recherche active",
       "No document found": "Aucun document trouvé",
       "No documents found": "Aucun document trouvé",

src/frontend/apps/impress/src/pages/_app.tsx

@@ -16,7 +16,11 @@ type AppPropsWithLayout = AppProps & {
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
   useSWRegister();
   const getLayout = Component.getLayout ?? ((page) => page);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  useEffect(() => {
+    document.documentElement.lang = i18n.language;
+  }, [i18n.language]);
 
   useEffect(() => {
     console.log(