mirror of
https://github.com/suitenumerique/docs
synced 2026-04-21 13:37:20 +00:00
✨(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:
parent
3ab01c98c8
commit
0d596e338c
5 changed files with 26 additions and 18 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue