✨(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:
@@ -6,6 +6,11 @@ and this project adheres to
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### Fixed
|
||||
|
||||
- ♿(frontend) improve accessibility:
|
||||
- ♿(frontend) improve ARIA in doc grid and editor for a11y #1519
|
||||
|
||||
## [3.9.0] - 2025-11-10
|
||||
|
||||
### Added
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user