Skip to content

Commit 81f3997

Browse files
OvgoddOvgodd
committed
✨(frontend) improve accessibility of search modal for screen readers
added clearer sr-only translations and aria-hidden for non-essential content Signed-off-by: Cyril <c.gromoff@gmail.com>
1 parent 0cf8b9d commit 81f3997

File tree

13 files changed

+70
-29
lines changed

13 files changed

+70
-29
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ and this project adheres to
1313
- ⚡️(frontend) improve accessibility:
1414
- #1248
1515
- #1235
16+
- #1275
1617
- #1255
1718
- #1262
1819
- #1244

‎src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ test.describe('Doc Editor', () => {
9393

9494
await page.getByRole('button', { name: 'Share' }).click();
9595

96-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
96+
const selectVisibility = page.getByTestId('doc-visibility');
9797

9898
// When the visibility is changed, the ws should close the connection (backend signal)
9999
const wsClosePromise = webSocket.waitForEvent('close');
@@ -561,7 +561,7 @@ test.describe('Doc Editor', () => {
561561

562562
await page.getByRole('button', { name: 'Share' }).click();
563563

564-
await page.getByLabel('Visibility', { exact: true }).click();
564+
await page.getByTestId('doc-visibility').click();
565565

566566
await page
567567
.getByRole('menuitem', {
@@ -573,7 +573,7 @@ test.describe('Doc Editor', () => {
573573
page.getByText('The document visibility has been updated.'),
574574
).toBeVisible();
575575

576-
await page.getByLabel('Visibility mode').click();
576+
await page.getByTestId('doc-access-mode').click();
577577
await page.getByRole('menuitem', { name: 'Editing' }).click();
578578

579579
// Close the modal
@@ -655,7 +655,7 @@ test.describe('Doc Editor', () => {
655655

656656
await page.getByRole('button', { name: 'Share' }).click();
657657

658-
await page.getByLabel('Visibility mode').click();
658+
await page.getByTestId('doc-access-mode').click();
659659
await page.getByRole('menuitem', { name: 'Reading' }).click();
660660

661661
// Close the modal

‎src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ test.describe('Doc Header', () => {
3030

3131
await page.getByRole('button', { name: 'Share' }).click();
3232

33-
await page.getByLabel('Visibility', { exact: true }).click();
33+
await page.getByTestId('doc-visibility').click();
3434

3535
await page
3636
.getByRole('menuitem', {

‎src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,10 @@ test.describe('Doc Tree: Inheritance', () => {
259259
test.use({ storageState: { cookies: [], origins: [] } });
260260

261261
test('A child inherit from the parent', async ({ page, browserName }) => {
262+
// test.slow() to extend timeout since this scenario chains Keycloak login + redirects,
263+
// doc creation/navigation and async doc-tree loading (/documents/:id/tree), which can exceed 30s (especially in CI).
264+
test.slow();
265+
262266
await page.goto('/');
263267
await keyCloakSignIn(page, browserName);
264268

@@ -271,7 +275,7 @@ test.describe('Doc Tree: Inheritance', () => {
271275
await verifyDocName(page, docParent);
272276

273277
await page.getByRole('button', { name: 'Share' }).click();
274-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
278+
const selectVisibility = page.getByTestId('doc-visibility');
275279
await selectVisibility.click();
276280

277281
await page
@@ -307,6 +311,7 @@ test.describe('Doc Tree: Inheritance', () => {
307311
await expect(page.locator('h2').getByText(docChild)).toBeVisible();
308312

309313
const docTree = page.getByTestId('doc-tree');
314+
await expect(docTree).toBeVisible({ timeout: 10000 });
310315
await expect(docTree.getByText(docParent)).toBeVisible();
311316
});
312317
});

‎src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ test.describe('Doc Visibility', () => {
4141

4242
await page.getByRole('button', { name: 'Share' }).click();
4343

44-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
44+
const selectVisibility = page.getByTestId('doc-visibility');
4545

4646
await expect(selectVisibility.getByText('Private')).toBeVisible();
4747

@@ -51,13 +51,13 @@ test.describe('Doc Visibility', () => {
5151
await selectVisibility.click();
5252
await page.getByLabel('Connected').click();
5353

54-
await expect(page.getByLabel('Visibility mode')).toBeVisible();
54+
await expect(page.getByTestId('doc-access-mode')).toBeVisible();
5555

5656
await selectVisibility.click();
5757

5858
await page.getByLabel('Public', { exact: true }).click();
5959

60-
await expect(page.getByLabel('Visibility mode')).toBeVisible();
60+
await expect(page.getByTestId('doc-access-mode')).toBeVisible();
6161
});
6262
});
6363

@@ -205,7 +205,7 @@ test.describe('Doc Visibility: Public', () => {
205205
await verifyDocName(page, docTitle);
206206

207207
await page.getByRole('button', { name: 'Share' }).click();
208-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
208+
const selectVisibility = page.getByTestId('doc-visibility');
209209
await selectVisibility.click();
210210

211211
await page
@@ -218,8 +218,8 @@ test.describe('Doc Visibility: Public', () => {
218218
page.getByText('The document visibility has been updated.'),
219219
).toBeVisible();
220220

221-
await expect(page.getByLabel('Visibility mode')).toBeVisible();
222-
await page.getByLabel('Visibility mode').click();
221+
await expect(page.getByTestId('doc-access-mode')).toBeVisible();
222+
await page.getByTestId('doc-access-mode').click();
223223
await page
224224
.getByRole('menuitem', {
225225
name: 'Reading',
@@ -289,7 +289,7 @@ test.describe('Doc Visibility: Public', () => {
289289
await verifyDocName(page, docTitle);
290290

291291
await page.getByRole('button', { name: 'Share' }).click();
292-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
292+
const selectVisibility = page.getByTestId('doc-visibility');
293293
await selectVisibility.click();
294294

295295
await page
@@ -302,7 +302,7 @@ test.describe('Doc Visibility: Public', () => {
302302
page.getByText('The document visibility has been updated.'),
303303
).toBeVisible();
304304

305-
await page.getByLabel('Visibility mode').click();
305+
await page.getByTestId('doc-access-mode').click();
306306
await page.getByLabel('Editing').click();
307307

308308
await expect(
@@ -358,7 +358,7 @@ test.describe('Doc Visibility: Authenticated', () => {
358358
await verifyDocName(page, docTitle);
359359

360360
await page.getByRole('button', { name: 'Share' }).click();
361-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
361+
const selectVisibility = page.getByTestId('doc-visibility');
362362
await selectVisibility.click();
363363
await page
364364
.getByRole('menuitem', {
@@ -410,7 +410,7 @@ test.describe('Doc Visibility: Authenticated', () => {
410410
await verifyDocName(page, docTitle);
411411

412412
await page.getByRole('button', { name: 'Share' }).click();
413-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
413+
const selectVisibility = page.getByTestId('doc-visibility');
414414
await selectVisibility.click();
415415
await page
416416
.getByRole('menuitem', {
@@ -495,6 +495,7 @@ test.describe('Doc Visibility: Authenticated', () => {
495495
page,
496496
browserName,
497497
}) => {
498+
test.slow();
498499
await page.goto('/');
499500
await keyCloakSignIn(page, browserName);
500501

@@ -508,7 +509,7 @@ test.describe('Doc Visibility: Authenticated', () => {
508509
await verifyDocName(page, docTitle);
509510

510511
await page.getByRole('button', { name: 'Share' }).click();
511-
const selectVisibility = page.getByLabel('Visibility', { exact: true });
512+
const selectVisibility = page.getByTestId('doc-visibility');
512513
await selectVisibility.click();
513514
await page
514515
.getByRole('menuitem', {
@@ -521,7 +522,7 @@ test.describe('Doc Visibility: Authenticated', () => {
521522
).toBeVisible();
522523

523524
const urlDoc = page.url();
524-
await page.getByLabel('Visibility mode').click();
525+
await page.getByTestId('doc-access-mode').click();
525526
await page.getByLabel('Editing').click();
526527

527528
await expect(
@@ -539,13 +540,17 @@ test.describe('Doc Visibility: Authenticated', () => {
539540
const otherBrowser = BROWSERS.find((b) => b !== browserName);
540541
await keyCloakSignIn(page, otherBrowser!);
541542

542-
await expect(page.getByTestId('header-logo-link')).toBeVisible();
543+
await expect(page.getByTestId('header-logo-link')).toBeVisible({
544+
timeout: 10000,
545+
});
543546

544547
await page.goto(urlDoc);
545548

546549
await verifyDocName(page, docTitle);
547550
await page.getByRole('button', { name: 'Share' }).click();
548551
await page.getByRole('button', { name: 'Copy link' }).click();
549-
await expect(page.getByText('Link Copied !')).toBeVisible();
552+
await expect(page.getByText('Link Copied !')).toBeVisible({
553+
timeout: 10000,
554+
});
550555
});
551556
});

‎src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const updateShareLink = async (
4545
linkReach: LinkReach,
4646
linkRole?: LinkRole | null,
4747
) => {
48-
await page.getByRole('button', { name: 'Visibility', exact: true }).click();
48+
await page.getByTestId('doc-visibility').click();
4949
await page.getByRole('menuitem', { name: linkReach }).click();
5050

5151
const visibilityUpdatedText = page
@@ -55,9 +55,7 @@ export const updateShareLink = async (
5555
await expect(visibilityUpdatedText).toBeVisible();
5656

5757
if (linkRole) {
58-
await page
59-
.getByRole('button', { name: 'Visibility mode', exact: true })
60-
.click();
58+
await page.getByTestId('doc-access-mode').click();
6159
await page.getByRole('menuitem', { name: linkRole }).click();
6260
await expect(visibilityUpdatedText).toBeVisible();
6361
}

‎src/frontend/apps/impress/src/components/DropButton.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export interface DropButtonProps {
4848
isOpen?: boolean;
4949
onOpenChange?: (isOpen: boolean) => void;
5050
label?: string;
51+
testId?: string;
5152
}
5253

5354
export const DropButton = ({
@@ -57,6 +58,7 @@ export const DropButton = ({
5758
onOpenChange,
5859
children,
5960
label,
61+
testId,
6062
}: PropsWithChildren<DropButtonProps>) => {
6163
const { themeTokens } = useCunninghamTheme();
6264
const font = themeTokens['font']?.['families']['base'];
@@ -79,6 +81,7 @@ export const DropButton = ({
7981
ref={triggerRef}
8082
onPress={() => onOpenChangeHandler(true)}
8183
aria-label={label}
84+
data-testid={testId}
8285
$css={css`
8386
font-family: ${font};
8487
${buttonCss};

‎src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export type DropdownMenuProps = {
3838
topMessage?: string;
3939
selectedValues?: string[];
4040
afterOpenChange?: (isOpen: boolean) => void;
41+
testId?: string;
4142
};
4243

4344
export const DropdownMenu = ({
@@ -52,6 +53,7 @@ export const DropdownMenu = ({
5253
topMessage,
5354
afterOpenChange,
5455
selectedValues,
56+
testId,
5557
}: PropsWithChildren<DropdownMenuProps>) => {
5658
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
5759
const [isOpen, setIsOpen] = useState(opened ?? false);
@@ -100,6 +102,7 @@ export const DropdownMenu = ({
100102
onOpenChange={onOpenChange}
101103
label={label}
102104
buttonCss={buttonCss}
105+
testId={testId}
103106
button={
104107
showArrow ? (
105108
<Box

‎src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@ export const QuickSearchInput = ({
4646
$gap={spacingsTokens['2xs']}
4747
$padding={{ horizontal: 'base', vertical: 'sm' }}
4848
>
49-
{!loading && <Icon iconName="search" $variation="600" />}
49+
{!loading && (
50+
<Icon iconName="search" $variation="600" aria-hidden="true" />
51+
)}
5052
{loading && (
5153
<div>
5254
<Loader size="small" />

‎src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,11 @@ export const DocVersionEditor = ({
119119
causes={error.cause}
120120
icon={
121121
error.status === 502 ? (
122-
<Text className="material-icons" $theme="danger">
122+
<Text
123+
className="material-icons"
124+
$theme="danger"
125+
aria-hidden={true}
126+
>
123127
wifi_off
124128
</Text>
125129
) : undefined

0 commit comments

Comments
 (0)