(frontend) add missing label to improve a11y and pass axe checks

enhances a11y by adding label to fix axe tool errors on missing attributes

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-12-03 13:30:00 +01:00
parent 7823303d03
commit b1a18b2477
4 changed files with 15 additions and 5 deletions

View File

@@ -259,7 +259,6 @@ export const BlockNoteReader = ({
const { user } = useAuth();
const { setEditor } = useEditorStore();
const { threadStore } = useComments(docId, false, user);
const { t } = useTranslation();
const editor = useCreateBlockNote(
{
collaboration: {
@@ -305,7 +304,6 @@ export const BlockNoteReader = ({
editor={editor}
editable={false}
theme="light"
aria-label={t('Document viewer')}
formattingToolbar={false}
slashMenu={false}
comments={false}

View File

@@ -1,5 +1,6 @@
import { MouseEvent, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { BoxButton, BoxButtonType, Text, TextType } from '@/components';
import { EmojiPicker, emojidata } from '@/docs/doc-editor/';
@@ -30,6 +31,7 @@ export const DocIcon = ({
...textProps
}: DocIconProps) => {
const { updateDocEmoji } = useDocTitleUpdate();
const { t } = useTranslation();
const iconRef = useRef<HTMLDivElement>(null);
@@ -43,6 +45,14 @@ export const DocIcon = ({
return defaultIcon;
}
const emojiLabel = withEmojiPicker
? emoji
? t('Edit document emoji')
: t('Add emoji')
: emoji
? t('Document emoji')
: undefined;
const toggleEmojiPicker = (e: MouseEvent) => {
if (withEmojiPicker) {
e.stopPropagation();
@@ -83,6 +93,8 @@ export const DocIcon = ({
ref={iconRef}
onClick={toggleEmojiPicker}
color="tertiary-text"
aria-label={emojiLabel}
title={emojiLabel}
{...buttonProps}
>
{!emoji ? (

View File

@@ -199,7 +199,6 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
<ButtonCloseModal
aria-label={t('Close the share modal')}
onClick={onClose}
tabIndex={-1}
/>
</Box>
}