From b8a5e53df3ad91169a610f2fc8a68a8ccf28f32f Mon Sep 17 00:00:00 2001 From: Cyril Date: Wed, 3 Dec 2025 13:30:00 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20missing=20label=20t?= =?UTF-8?q?o=20improve=20accessibility=20and=20pass=20axe=20checks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit enhances a11y by adding label to fix axe tool errors on missing attributes Signed-off-by: Cyril --- CHANGELOG.md | 5 +- .../doc-editor/components/BlockNoteEditor.tsx | 40 +- .../doc-management/components/DocIcon.tsx | 4 + .../doc-share/components/DocShareModal.tsx | 1 - .../features/home/components/HomeContent.tsx | 401 +++++++++--------- 5 files changed, 247 insertions(+), 204 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36af2298a4..070df2844a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ and this project adheres to - ♿(frontend) improve accessibility: - ♿(frontend) add skip to content button for keyboard accessibility #1624 + - ♿(frontend) add missing label and fix Axes errors to improve a11y + #1693 ### Fixed @@ -22,8 +24,6 @@ and this project adheres to - ✨ Add comments feature to the editor #1330 - ✨(backend) Comments on text editor #1330 - ✨(frontend) link to create new doc #1574 -- ♿(frontend) improve accessibility: - - ♿(frontend) add skip to content button for keyboard accessibility #1624 ### Fixed @@ -52,6 +52,7 @@ and this project adheres to - ♻️(frontend) preserve @ character when esc is pressed after typing it #1512 - ♻️(frontend) make summary button fixed to remain visible during scroll #1581 - ♻️(frontend) pdf embed use full width #1526 + #1624 ### Fixed diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 1c8b270115..55dc408fdd 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -194,6 +194,43 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { useUploadStatus(editor); + useEffect(() => { + if (!refEditorContainer.current) { + return; + } + + const setEditorAriaAttributes = () => { + const editorElement = + refEditorContainer.current?.querySelector( + '.ProseMirror.bn-editor[contenteditable="true"]', + ); + + if (!editorElement) { + return; + } + + const label = t('Document editor'); + + editorElement.setAttribute('aria-label', label); + editorElement.setAttribute('title', label); + }; + + setEditorAriaAttributes(); + + const observer = new MutationObserver(() => { + setEditorAriaAttributes(); + }); + + observer.observe(refEditorContainer.current, { + childList: true, + subtree: true, + }); + + return () => { + observer.disconnect(); + }; + }, [t]); + useEffect(() => { setEditor(editor); @@ -226,7 +263,6 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { slashMenu={false} theme="light" comments={canSeeComment} - aria-label={t('Document editor')} > @@ -247,7 +283,6 @@ export const BlockNoteReader = ({ const { user } = useAuth(); const { setEditor } = useEditorStore(); const threadStore = useComments(docId, false, user); - const { t } = useTranslation(); const editor = useCreateBlockNote( { collaboration: { @@ -289,7 +324,6 @@ export const BlockNoteReader = ({ editor={editor} editable={false} theme="light" - aria-label={t('Document viewer')} formattingToolbar={false} slashMenu={false} comments={false} diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx index 2218bb6e4e..39b591f8c0 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx @@ -1,5 +1,6 @@ import { MouseEvent, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; +import { useTranslation } from 'react-i18next'; import { BoxButton, BoxButtonType, Text, TextType } from '@/components'; import { EmojiPicker, emojidata } from '@/docs/doc-editor/'; @@ -30,6 +31,7 @@ export const DocIcon = ({ ...textProps }: DocIconProps) => { const { updateDocEmoji } = useDocTitleUpdate(); + const { t } = useTranslation(); const iconRef = useRef(null); @@ -83,6 +85,8 @@ export const DocIcon = ({ ref={iconRef} onClick={toggleEmojiPicker} color="tertiary-text" + aria-label={t(emoji ? 'Edit document emoji' : 'Add emoji')} + title={t(emoji ? 'Edit document emoji' : 'Add emoji')} {...buttonProps} > {!emoji ? ( diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx index c6ca068258..080a579f03 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx @@ -199,7 +199,6 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => { } diff --git a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx index fd02d9a7da..dc2803dcb5 100644 --- a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx +++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx @@ -32,226 +32,231 @@ export function HomeContent() { const isFrLanguage = i18n.resolvedLanguage === 'fr'; return ( - - - {isSmallMobile && ( - - - - )} + + + {isSmallMobile && ( + + + + )} - - - - - - - Docs is built on top of{' '} - - Django Rest Framework - {' '} - and{' '} - - Next.js - - . We also use{' '} - - Yjs - {' '} - and{' '} - - BlockNote.js - - , both of which we are proud to sponsor. - - - - - You can easily self-host Docs (check our installation{' '} - - documentation - - ). -
- Docs uses an innovation and business friendly{' '} - - licence - {' '} - (MIT). -
- Contributions are welcome (see our roadmap{' '} - - here - - ). - - - - - Docs is the result of a joint effort lead by the - French 🇫🇷🥖 - - (DINUM) - {' '} - and German 🇩🇪🥨 governments{' '} - - (ZenDiS) - - . - - - - - - + + + - - } + } + /> + + + + + - - - - -