(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

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

View File

@@ -152,23 +152,23 @@ export const DocsGrid = ({
<DocGridContentList docs={docs} />
)}
</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>
{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>
)}
</Card>

View File

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

View File

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