(frontend) move editor button out of grid and fix roles/aria-label

improves accessibility and layout consistency of editor interface

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-10-23 10:59:20 +02:00
parent 3ab01c98c8
commit 0d596e338c
5 changed files with 26 additions and 18 deletions

View File

@@ -6,6 +6,11 @@ and this project adheres to
## [Unreleased] ## [Unreleased]
### Fixed
- ♿(frontend) improve accessibility:
- ♿(frontend) improve ARIA in doc grid and editor for a11y #1519
## [3.9.0] - 2025-11-10 ## [3.9.0] - 2025-11-10
### Added ### Added

View File

@@ -186,6 +186,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
formattingToolbar={false} formattingToolbar={false}
slashMenu={false} slashMenu={false}
theme="light" theme="light"
aria-label={t('Document editor')}
> >
<BlockNoteSuggestionMenu /> <BlockNoteSuggestionMenu />
<BlockNoteToolbar /> <BlockNoteToolbar />
@@ -200,6 +201,7 @@ interface BlockNoteReaderProps {
export const BlockNoteReader = ({ initialContent }: BlockNoteReaderProps) => { export const BlockNoteReader = ({ initialContent }: BlockNoteReaderProps) => {
const { setEditor } = useEditorStore(); const { setEditor } = useEditorStore();
const { t } = useTranslation();
const editor = useCreateBlockNote( const editor = useCreateBlockNote(
{ {
collaboration: { collaboration: {
@@ -231,6 +233,7 @@ export const BlockNoteReader = ({ initialContent }: BlockNoteReaderProps) => {
editor={editor} editor={editor}
editable={false} editable={false}
theme="light" theme="light"
aria-label={t('Document version viewer')}
formattingToolbar={false} formattingToolbar={false}
slashMenu={false} slashMenu={false}
/> />

View File

@@ -152,23 +152,23 @@ export const DocsGrid = ({
<DocGridContentList docs={docs} /> <DocGridContentList docs={docs} />
)} )}
</Box> </Box>
{hasNextPage && !loading && (
<InView
data-testid="infinite-scroll-trigger"
as="div"
onChange={loadMore}
>
{!isFetching && hasNextPage && (
<Button
onClick={() => void fetchNextPage()}
color="primary-text"
>
{t('More docs')}
</Button>
)}
</InView>
)}
</Box> </Box>
{hasNextPage && !loading && (
<InView
data-testid="infinite-scroll-trigger"
as="div"
onChange={loadMore}
>
{!isFetching && hasNextPage && (
<Button
onClick={() => void fetchNextPage()}
color="primary-text"
>
{t('More docs')}
</Button>
)}
</InView>
)}
</Box> </Box>
)} )}
</Card> </Card>

View File

@@ -19,7 +19,7 @@ export const Draggable = <T,>(props: DraggableProps<T>) => {
{...attributes} {...attributes}
data-testid={`draggable-doc-${props.id}`} data-testid={`draggable-doc-${props.id}`}
className="--docs--grid-draggable" className="--docs--grid-draggable"
role="presentation" role="none"
> >
{props.children} {props.children}
</div> </div>

View File

@@ -35,7 +35,7 @@ export const Droppable = ({
<Box <Box
ref={setNodeRef} ref={setNodeRef}
data-testid={`droppable-doc-${id}`} data-testid={`droppable-doc-${id}`}
role="presentation" role="none"
$css={css` $css={css`
border-radius: 4px; border-radius: 4px;
background-color: ${enableHover background-color: ${enableHover