Skip to content

Commit 496184d

Browse files
aldbraldbr
committed
feat: add aria-label to make app more accessible
1 parent 091ac82 commit 496184d

16 files changed

Lines changed: 106 additions & 59 deletions

File tree

‎packages/diracx-web-components/src/components/DashboardLayout/ExportButton.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,11 @@ export function ExportButton() {
141141
return (
142142
<>
143143
<Tooltip title="Export application state">
144-
<IconButton onClick={handleClick} data-testid="export-button">
144+
<IconButton
145+
aria-label="Export application state"
146+
onClick={handleClick}
147+
data-testid="export-button"
148+
>
145149
<OutputIcon />
146150
</IconButton>
147151
</Tooltip>

‎packages/diracx-web-components/src/components/DashboardLayout/ImportButton.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@ export function ImportButton() {
243243
<>
244244
<Tooltip title="Import application state">
245245
<IconButton
246+
aria-label="Import application state"
246247
onClick={() => setDialogOpen(true)}
247248
data-testid="import-button"
248249
>

‎packages/diracx-web-components/src/components/DashboardLayout/ThemeToggleButton.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ export function ThemeToggleButton() {
1212
const { theme, toggleTheme } = useTheme();
1313

1414
return (
15-
<IconButton onClick={toggleTheme} data-testid="theme-toggle-button">
15+
<IconButton
16+
onClick={toggleTheme}
17+
aria-label="Toggle theme"
18+
data-testid="theme-toggle-button"
19+
>
1620
{theme === "light" ? (
1721
<DarkMode data-testid="dark-mode" />
1822
) : (

‎packages/diracx-web-components/src/components/JobMonitor/JobDataTable.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -367,18 +367,30 @@ export function JobDataTable({
367367
() => (
368368
<>
369369
<Tooltip title="Reschedule">
370-
<IconButton onClick={() => handleReschedule()}>
370+
<IconButton
371+
aria-label="Reschedule selected jobs"
372+
data-testid="reschedule-jobs-button"
373+
onClick={() => handleReschedule()}
374+
>
371375
<Replay />
372376
</IconButton>
373377
</Tooltip>
374378
<Tooltip title="Kill">
375-
<IconButton onClick={() => handleKill()}>
379+
<IconButton
380+
aria-label="Kill selected jobs"
381+
data-testid="kill-jobs-button"
382+
onClick={() => handleKill()}
383+
>
376384
<Clear />
377385
</IconButton>
378386
</Tooltip>
379387
<Tooltip title="Delete">
380-
<IconButton onClick={() => handleDelete()}>
381-
<Delete data-testid="delete-jobs-button" />
388+
<IconButton
389+
aria-label="Delete selected jobs"
390+
data-testid="delete-jobs-button"
391+
onClick={() => handleDelete()}
392+
>
393+
<Delete />
382394
</IconButton>
383395
</Tooltip>
384396
</>

‎packages/diracx-web-components/src/components/Login/LoginForm.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export function LoginForm({
160160
variant="h3"
161161
gutterBottom
162162
sx={{ textAlign: "center" }}
163-
data-testid="h3-vo-name"
163+
data-testid="vo-name"
164164
>
165165
{selectedVO}
166166
</Typography>
@@ -173,7 +173,7 @@ export function LoginForm({
173173
{...params}
174174
label="Select a Virtual Organization"
175175
variant="outlined"
176-
data-testid="autocomplete-vo-select"
176+
data-testid="vo-select"
177177
/>
178178
)}
179179
value={selectedVO}
@@ -198,7 +198,7 @@ export function LoginForm({
198198
}
199199
label="Select a Group"
200200
onChange={handleGroupChange}
201-
data-testid="select-group"
201+
data-testid="group-select"
202202
>
203203
{Object.keys(
204204
metadata.virtual_organizations[selectedVO].groups,
@@ -220,7 +220,7 @@ export function LoginForm({
220220
flexGrow: 1,
221221
}}
222222
onClick={handleConfigurationChanges}
223-
data-testid="button-login"
223+
data-testid="login-form-button"
224224
>
225225
Login via your Identity Provider
226226
</Button>

‎packages/diracx-web-components/src/components/shared/DataTable.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,10 @@ function DataTableToolbar<T extends Record<string, unknown>>({
138138
{numSelected > 0 ? (
139139
<Stack direction="row">
140140
<Tooltip title={`Get ID${numSelected > 1 ? "s" : ""}`}>
141-
<IconButton onClick={handleCopyIDs}>
141+
<IconButton
142+
aria-label={`Get ID${numSelected > 1 ? "s" : ""}`}
143+
onClick={handleCopyIDs}
144+
>
142145
<FormatListBulleted />
143146
</IconButton>
144147
</Tooltip>
@@ -154,7 +157,11 @@ function DataTableToolbar<T extends Record<string, unknown>>({
154157
<Box>
155158
<Toolbar>
156159
<Tooltip title="Hide/Show columns">
157-
<IconButton onClick={handleVisibilityClick}>
160+
<IconButton
161+
aria-label="Hide/Show columns"
162+
data-testid="column-visibility-button"
163+
onClick={handleVisibilityClick}
164+
>
158165
<Visibility />
159166
</IconButton>
160167
</Tooltip>

‎packages/diracx-web-components/src/components/shared/SearchBar/DisplayTokenEquation.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,11 @@ export function DisplayTokenEquation({
5252
: "default";
5353

5454
return (
55-
<Box sx={{ display: "flex", alignItems: "center" }}>
55+
<Box
56+
sx={{ display: "flex", alignItems: "center" }}
57+
role="group"
58+
aria-label={`Filter equation ${equationIndex + 1}`}
59+
>
5660
{tokens.map((token, tokenIndex) => {
5761
if (
5862
equationIndex === focusedTokenIndex?.equationIndex &&
@@ -71,6 +75,7 @@ export function DisplayTokenEquation({
7175
key={tokenIndex}
7276
label={chipLabel}
7377
color={chipColor}
78+
aria-label={`${token.nature}: ${chipLabel}`}
7479
onClick={(e) => handleClick(e, tokenIndex)}
7580
onDelete={isLast ? handleDelete : undefined}
7681
id={`tokenid:equation-${equationIndex}-token-${tokenIndex}`}

‎packages/diracx-web-components/src/components/shared/SearchBar/SearchBar.tsx‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useRef, useEffect } from "react";
22

3-
import { Box, Menu, MenuItem, IconButton } from "@mui/material";
3+
import { Box, Menu, MenuItem, IconButton, Tooltip } from "@mui/material";
44

55
import DeleteIcon from "@mui/icons-material/Delete";
66
import RefreshIcon from "@mui/icons-material/Refresh";
@@ -404,6 +404,8 @@ export function SearchBar({
404404
},
405405
alignItems: "center",
406406
}}
407+
role="search"
408+
aria-label="Search filters"
407409
data-testid="search-bar"
408410
>
409411
<Box
@@ -459,24 +461,36 @@ export function SearchBar({
459461
</Menu>
460462
</Box>
461463
<Box sx={{ marginLeft: "auto", display: "flex", alignItems: "center" }}>
462-
<IconButton
463-
onClick={() => refreshFunction(tokenEquations, setFilters)}
464-
disabled={
465-
!tokenEquations.every((eq) => eq.status === EquationStatus.VALID)
466-
}
467-
>
468-
<RefreshIcon />
469-
</IconButton>
464+
<Tooltip title="Refresh search">
465+
<span>
466+
<IconButton
467+
aria-label="Refresh search"
468+
data-testid="refresh-search-button"
469+
onClick={() => refreshFunction(tokenEquations, setFilters)}
470+
disabled={
471+
!tokenEquations.every(
472+
(eq) => eq.status === EquationStatus.VALID,
473+
)
474+
}
475+
>
476+
<RefreshIcon />
477+
</IconButton>
478+
</span>
479+
</Tooltip>
470480

471481
{tokenEquations.length !== 0 && (
472-
<IconButton
473-
onClick={() => {
474-
setInputValue("");
475-
clearFunction(setFilters, setTokenEquations);
476-
}}
477-
>
478-
<DeleteIcon />
479-
</IconButton>
482+
<Tooltip title="Clear all filters">
483+
<IconButton
484+
aria-label="Clear all filters"
485+
data-testid="clear-filters-button"
486+
onClick={() => {
487+
setInputValue("");
488+
clearFunction(setFilters, setTokenEquations);
489+
}}
490+
>
491+
<DeleteIcon />
492+
</IconButton>
493+
</Tooltip>
480494
)}
481495
</Box>
482496
</Box>

‎packages/diracx-web-components/test/LoginForm.test.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,28 @@ describe("LoginForm", () => {
1515
render(<SingleVO />);
1616

1717
// now immediately rendered
18-
expect(screen.getByTestId("h3-vo-name")).toBeInTheDocument();
19-
expect(screen.queryByTestId("autocomplete-vo-select")).toBeNull();
20-
expect(screen.getByTestId("select-group")).toBeInTheDocument();
21-
expect(screen.getByTestId("button-login")).toBeInTheDocument();
18+
expect(screen.getByTestId("vo-name")).toBeInTheDocument();
19+
expect(screen.queryByTestId("vo-select")).toBeNull();
20+
expect(screen.getByTestId("group-select")).toBeInTheDocument();
21+
expect(screen.getByTestId("login-form-button")).toBeInTheDocument();
2222
});
2323

2424
it("works for the MultiVO story", () => {
2525
render(<MultiVO />);
2626

2727
const input = screen
28-
.getByTestId("autocomplete-vo-select")
28+
.getByTestId("vo-select")
2929
.querySelector("input") as HTMLInputElement;
3030

3131
// before selection
32-
expect(screen.queryByTestId("button-login")).toBeNull();
32+
expect(screen.queryByTestId("login-form-button")).toBeNull();
3333

3434
// pick “LHCp”
3535
fireEvent.change(input, { target: { value: "LHC" } });
3636
fireEvent.click(screen.getByText("LHCp"));
3737

38-
expect(screen.getByTestId("select-group")).toBeInTheDocument();
39-
expect(screen.getByTestId("button-login")).toBeInTheDocument();
38+
expect(screen.getByTestId("group-select")).toBeInTheDocument();
39+
expect(screen.getByTestId("login-form-button")).toBeInTheDocument();
4040
});
4141

4242
it("works for the Error story", () => {
@@ -45,13 +45,13 @@ describe("LoginForm", () => {
4545
expect(
4646
screen.getByText("An error occurred while fetching metadata."),
4747
).toBeInTheDocument();
48-
expect(screen.queryByTestId("h3-vo-name")).toBeNull();
48+
expect(screen.queryByTestId("vo-name")).toBeNull();
4949
});
5050

5151
it("works for the Loading story", () => {
5252
render(<Loading />);
5353

5454
expect(screen.getByText("Loading...")).toBeInTheDocument();
55-
expect(screen.queryByTestId("h3-vo-name")).toBeNull();
55+
expect(screen.queryByTestId("vo-name")).toBeNull();
5656
});
5757
});

‎packages/diracx-web-components/test/SearchBar.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ describe("SearchBar", () => {
120120

121121
// Check if delete button is present
122122
await waitFor(() => {
123-
const deleteButton = screen.getByTestId("DeleteIcon");
123+
const deleteButton = screen.getByTestId("clear-filters-button");
124124
expect(deleteButton).toBeInTheDocument();
125125
});
126126
});
@@ -135,7 +135,7 @@ describe("SearchBar", () => {
135135
expect(screen.getByText("Running | Completed")).toBeInTheDocument();
136136

137137
// Click delete button
138-
const deleteButton = screen.getByTestId("DeleteIcon");
138+
const deleteButton = screen.getByTestId("clear-filters-button");
139139
user.click(deleteButton);
140140
});
141141

0 commit comments

Comments
 (0)