✨(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]
|
## [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
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user