mirror of
https://github.com/suitenumerique/docs
synced 2026-04-21 13:37:20 +00:00
♿️(frontend) fix modal aria-label object Object
Add aria-label on modals with JSX title to avoid returning object Object
This commit is contained in:
Cyril
parent
54c15c541e
commit
7cf144e0de
11 changed files with 13 additions and 21 deletions
|
|
@ -16,6 +16,7 @@ and this project adheres to
|
|||
- 🙈(docker) add **/.next to .dockerignore #2034
|
||||
- ♿️(frontend) fix share modal heading hierarchy #2007
|
||||
- ♿️(frontend) fix Copy link toast accessibility for screen readers #2029
|
||||
- ♿️(frontend) fix modal aria-label and name #2014
|
||||
|
||||
## [v4.8.1] - 2026-03-17
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ test.describe('Doc Version', () => {
|
|||
await page.getByRole('menuitem', { name: 'Version history' }).click();
|
||||
await expect(page.getByText('History', { exact: true })).toBeVisible();
|
||||
|
||||
const modal = page.getByLabel('version history modal');
|
||||
const modal = page.getByRole('dialog', { name: 'Version history' });
|
||||
const panel = modal.getByLabel('version list');
|
||||
await expect(panel).toBeVisible();
|
||||
await expect(modal.getByText('No versions')).toBeVisible();
|
||||
|
|
@ -155,7 +155,7 @@ test.describe('Doc Version', () => {
|
|||
await page.getByLabel('Open the document options').click();
|
||||
await page.getByRole('menuitem', { name: 'Version history' }).click();
|
||||
|
||||
const modal = page.getByLabel('version history modal');
|
||||
const modal = page.getByRole('dialog', { name: 'Version history' });
|
||||
const panel = modal.getByLabel('version list');
|
||||
await expect(panel).toBeVisible();
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export const AlertModal = ({
|
|||
isOpen={isOpen}
|
||||
size={ModalSize.MEDIUM}
|
||||
onClose={onClose}
|
||||
aria-describedby="alert-modal-title"
|
||||
aria-label={title}
|
||||
title={
|
||||
<Text
|
||||
$size="h6"
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export const ModalConfirmDownloadUnsafe = ({
|
|||
isOpen
|
||||
closeOnClickOutside
|
||||
onClose={() => onClose()}
|
||||
aria-describedby="modal-confirm-download-unsafe-title"
|
||||
aria-label={t('Warning')}
|
||||
rightActions={
|
||||
<>
|
||||
<Button
|
||||
|
|
@ -48,7 +48,7 @@ export const ModalConfirmDownloadUnsafe = ({
|
|||
size={ModalSize.SMALL}
|
||||
title={
|
||||
<Text
|
||||
as="h1"
|
||||
as="h2"
|
||||
id="modal-confirm-download-unsafe-title"
|
||||
$gap="0.7rem"
|
||||
$size="h6"
|
||||
|
|
@ -61,10 +61,7 @@ export const ModalConfirmDownloadUnsafe = ({
|
|||
</Text>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
aria-label={t('Modal confirmation to download the attachment')}
|
||||
className="--docs--modal-confirm-download-unsafe"
|
||||
>
|
||||
<Box className="--docs--modal-confirm-download-unsafe">
|
||||
<Box>
|
||||
<Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
|
||||
<Text $variation="secondary">
|
||||
|
|
|
|||
|
|
@ -196,6 +196,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
|
|||
closeOnClickOutside
|
||||
onClose={() => onClose()}
|
||||
hideCloseButton
|
||||
aria-label={t('Export')}
|
||||
aria-describedby="modal-export-title"
|
||||
rightActions={
|
||||
<>
|
||||
|
|
@ -247,7 +248,6 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
|
|||
>
|
||||
<Box
|
||||
$margin={{ bottom: 'xl' }}
|
||||
aria-label={t('Content modal to export the document')}
|
||||
$gap="1rem"
|
||||
className="--docs--modal-export-content"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
|
|||
isOpen
|
||||
closeOnClickOutside
|
||||
onClose={() => onClose()}
|
||||
aria-label={t("Why you can't edit the document?")}
|
||||
rightActions={
|
||||
<>
|
||||
<Button
|
||||
|
|
@ -92,11 +93,7 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
|
|||
</Text>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
aria-label={t('Content modal to explain why the user cannot edit')}
|
||||
className="--docs--modal-alert-network"
|
||||
$margin={{ top: 'md' }}
|
||||
>
|
||||
<Box className="--docs--modal-alert-network" $margin={{ top: 'md' }}>
|
||||
<Text $size="sm" $variation="secondary">
|
||||
{t(
|
||||
'Others are editing this document. Unfortunately your network blocks WebSockets, the technology enabling real-time co-editing.',
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export const ModalRemoveDoc = ({
|
|||
closeOnClickOutside
|
||||
hideCloseButton
|
||||
onClose={handleClose}
|
||||
aria-describedby="modal-remove-doc-title"
|
||||
aria-label={t('Delete a doc')}
|
||||
rightActions={
|
||||
<>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@ const DocSearchModalGlobal = ({
|
|||
aria-describedby="doc-search-modal-title"
|
||||
>
|
||||
<Box
|
||||
aria-label={t('Search modal')}
|
||||
$direction="column"
|
||||
$justify="space-between"
|
||||
className="--docs--doc-search-modal"
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const ModalConfirmationVersion = ({
|
|||
isOpen
|
||||
closeOnClickOutside
|
||||
onClose={() => onClose()}
|
||||
aria-describedby="modal-confirmation-version-title"
|
||||
aria-label={t('Warning')}
|
||||
rightActions={
|
||||
<>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -60,11 +60,10 @@ export const ModalSelectVersion = ({
|
|||
closeOnClickOutside={true}
|
||||
size={ModalSize.EXTRA_LARGE}
|
||||
onClose={onClose}
|
||||
aria-describedby="modal-select-version-title"
|
||||
aria-label={t('Version history')}
|
||||
>
|
||||
<NoPaddingStyle />
|
||||
<Box
|
||||
aria-label="version history modal"
|
||||
className="--docs--modal-select-version noPadding"
|
||||
$direction="row"
|
||||
$height="100%"
|
||||
|
|
|
|||
|
|
@ -196,7 +196,6 @@ export const DocMoveModal = ({
|
|||
}
|
||||
>
|
||||
<Box
|
||||
aria-label={t('Move modal')}
|
||||
$direction="column"
|
||||
$justify="space-between"
|
||||
className="--docs--doc-move-modal"
|
||||
|
|
|
|||
Loading…
Reference in a new issue