Skip to content

Dropdown menus - option selection : ajout aria-hidden sur les icônes #1036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ test.describe('Doc Export', () => {
await createDoc(page, 'doc-editor', browserName, 1);
await page
.getByRole('button', {
name: 'download',
name: 'Export the document',
})
.click();

Expand Down Expand Up @@ -75,7 +75,7 @@ test.describe('Doc Export', () => {

await page
.getByRole('button', {
name: 'download',
name: 'Export the document',
})
.click();

Expand Down Expand Up @@ -122,7 +122,7 @@ test.describe('Doc Export', () => {

await page
.getByRole('button', {
name: 'download',
name: 'Export the document',
})
.click();

Expand Down Expand Up @@ -186,7 +186,7 @@ test.describe('Doc Export', () => {

await page
.getByRole('button', {
name: 'download',
name: 'Export the document',
})
.click();

Expand Down Expand Up @@ -250,7 +250,7 @@ test.describe('Doc Export', () => {

await page
.getByRole('button', {
name: 'download',
name: 'Export the document',
})
.click();

Expand Down Expand Up @@ -294,7 +294,7 @@ test.describe('Doc Export', () => {

await page
.getByRole('button', {
name: 'download',
name: 'Export the document',
})
.click();

Expand Down
16 changes: 12 additions & 4 deletions src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ test.describe('Doc Header', () => {

await expect(card.getByText('Owner ·')).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Export the document' }),
).toBeVisible();
await expect(
page.getByRole('button', { name: 'Open the document options' }),
).toBeVisible();
Expand Down Expand Up @@ -143,7 +145,9 @@ test.describe('Doc Header', () => {

await goToGridDoc(page);

await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Export the document' }),
).toBeVisible();

await page.getByLabel('Open the document options').click();

Expand Down Expand Up @@ -214,7 +218,9 @@ test.describe('Doc Header', () => {

await goToGridDoc(page);

await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Export the document' }),
).toBeVisible();
await page.getByLabel('Open the document options').click();

await expect(page.getByLabel('Delete document')).toBeDisabled();
Expand Down Expand Up @@ -274,7 +280,9 @@ test.describe('Doc Header', () => {

await goToGridDoc(page);

await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Export the document' }),
).toBeVisible();
await page.getByLabel('Open the document options').click();

await expect(page.getByLabel('Delete document')).toBeDisabled();
Expand Down
12 changes: 11 additions & 1 deletion src/frontend/apps/impress/src/components/DropdownMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { PropsWithChildren, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';

import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
Expand Down Expand Up @@ -38,6 +39,7 @@ export const DropdownMenu = ({
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const [isOpen, setIsOpen] = useState(false);
const blockButtonRef = useRef<HTMLDivElement>(null);
const { t } = useTranslation();

const onOpenChange = (isOpen: boolean) => {
setIsOpen(isOpen);
Expand Down Expand Up @@ -150,6 +152,7 @@ export const DropdownMenu = ({
$direction="row"
$align="center"
$gap={spacingsTokens['base']}
aria-selected={option.isSelected ? true : undefined}
>
{option.icon && (
<Icon
Expand All @@ -164,7 +167,14 @@ export const DropdownMenu = ({
</Text>
</Box>
{option.isSelected && (
<Icon iconName="check" $size="20px" $theme="greyscale" />
<Icon
role="img"
iconName="check"
$size="20px"
$theme="greyscale"
aria-label={t('Checked')}
aria-hidden="false"
/>
)}
</BoxButton>
);
Expand Down
1 change: 1 addition & 0 deletions src/frontend/apps/impress/src/components/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const Icon = ({
}: IconProps) => {
return (
<Text
aria-hidden={!!!textProps['aria-label']}
{...textProps}
className={clsx('--docs--icon-bg', textProps.className, {
'material-icons-filled': variant === 'filled',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ export const DocToolBoxLicenceAGPL = ({
setIsModalExportOpen(true);
}}
size={isSmallMobile ? 'small' : 'medium'}
aria-label={t('Export the document')}
/>
)}
<DropdownMenu options={options}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';

import { Box, HorizontalSeparator } from '@/components';
import { Box, HorizontalSeparator, Icon } from '@/components';
import { Doc, useCopyDocLink } from '@/features/docs';

import { DocVisibility } from './DocVisibility';
Expand Down Expand Up @@ -36,7 +36,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
fullWidth={false}
onClick={copyDocLink}
color="tertiary"
icon={<span className="material-icons">add_link</span>}
icon={<Icon iconName="add_link" />}
>
{t('Copy link')}
</Button>
Expand Down
8 changes: 8 additions & 0 deletions src/frontend/apps/impress/src/i18n/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"Beautify": "Verschönern",
"Can't load this page, please check your internet connection.": "Diese Seite kann nicht geladen werden. Bitte überprüfen Sie Ihre Internetverbindung.",
"Cancel": "Abbrechen",
"Checked": "Angehakt",
"Close the modal": "Pop up schliessen",
"Collaborate": "Zusammenarbeiten",
"Collaborate and write in real time, without layout constraints.": "In Echtzeit und ohne Layout-Beschränkungen schreiben und zusammenarbeiten.",
Expand Down Expand Up @@ -253,6 +254,7 @@
"Callout": "Destacado",
"Can't load this page, please check your internet connection.": "No se puede cargar esta página, por favor compruebe su conexión a Internet.",
"Cancel": "Cancelar",
"Checked": "Marcado",
"Close the modal": "Cerrar modal",
"Collaborate": "Colabora",
"Collaborate and write in real time, without layout constraints.": "Colaborar y escribir en tiempo real, sin restricciones de diseño.",
Expand Down Expand Up @@ -437,6 +439,7 @@
"Callout": "Alerte",
"Can't load this page, please check your internet connection.": "Impossible de charger cette page, veuillez vérifier votre connexion Internet.",
"Cancel": "Annuler",
"Checked": "Coché",
"Close the modal": "Fermer la modale",
"Collaborate": "Collaborer",
"Collaborate and write in real time, without layout constraints.": "Collaborez et rédigez en temps réel, sans contrainte de mise en page.",
Expand Down Expand Up @@ -625,6 +628,7 @@
"Beautify": "Filtro bellezza",
"Can't load this page, please check your internet connection.": "Impossibile caricare questa pagina, controlla la tua connessione internet.",
"Cancel": "Cancella",
"Checked": "Selezionato",
"Collaborate": "Collabora",
"Collaborate and write in real time, without layout constraints.": "Collaborare e scrivere in tempo reale, senza vincoli di layout.",
"Collaborative writing, Simplified.": "Scrittura collaborativa, semplificata.",
Expand Down Expand Up @@ -781,6 +785,7 @@
"Beautify": "Maak mooier",
"Can't load this page, please check your internet connection.": "Kan deze pagina niet laden. Controleer je internetverbinding.",
"Cancel": "Breek af",
"Checked": "Aangevinkt",
"Close the modal": "Sluit het venster",
"Collaborate": "Samenwerken",
"Collaborate and write in real time, without layout constraints.": "Samenwerken en schrijven in realtime, zonder lay-out beperkingen.",
Expand Down Expand Up @@ -952,6 +957,7 @@
"Anonymous": "Anonym",
"Beautify": "Försköna",
"Cancel": "Avbryt",
"Checked": "Markerad",
"Close the modal": "Stäng fönstret",
"Convert Markdown": "Konvertera Markdown",
"Correct": "Korrekt",
Expand Down Expand Up @@ -989,6 +995,7 @@
"Banner image": "Afiş görseli",
"Beautify": "Güzelleştir",
"Cancel": "İptal",
"Checked": "İşaretli",
"Collaborate": "İşbirliği Yapın",
"Collaborate and write in real time, without layout constraints.": "Düzen kısıtlamaları olmadan gerçek zamanlı olarak işbirliği yapın ve yazın.",
"Collaborative writing, Simplified.": "İş birliğiyle yazmak çok daha Kolay.",
Expand Down Expand Up @@ -1078,6 +1085,7 @@
"Callout": "标注",
"Can't load this page, please check your internet connection.": "无法加载此页面,请检查您的网络连接。",
"Cancel": "取消",
"Checked": "已勾选",
"Close the modal": "关闭对话框",
"Collaborate": "协作",
"Collaborate and write in real time, without layout constraints.": "实时协作和写入,不受布局限制。",
Expand Down
Loading