Skip to content
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.

Sign up for GitHub

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

Add descriptions to all icons in the Admin Tools Notifications page #380

Merged
merged 2 commits into from
Jun 27, 2024
Merged

Add descriptions to all icons in the Admin Tools Notifications page #380

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e764eef
Add aria-labels to all icons in Notifications.tsx
ameliav Jun 27, 2024
53d3f4c
Merge branch 'develop' into 354-admin-tools-notification-icons-need-a…
ameliav Jun 27, 2024
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
45 changes: 40 additions & 5 deletions frontend/src/pages/Notifications/Notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import {
CheckCircleOutline,
Delete,
Edit,
ErrorOutline
ErrorOutline,
InfoOutlined
} from '@mui/icons-material';
import {
DataGrid,
Expand Down Expand Up @@ -65,7 +66,13 @@ const initialFormErrorValues = {
};

const initialInfoDialogValues = {
icon: <CheckCircleOutline color="success" sx={{ fontSize: '80px' }} />,
icon: (
<CheckCircleOutline
color="success"
aria-label="a success icon that displays an outlined circle with a checkmark in the center"
sx={{ fontSize: '80px' }}
/>
),
title: 'Success',
content: 'The notification was updated successfully.'
};
Expand Down Expand Up @@ -165,6 +172,7 @@ export const Notifications: React.FC = () => {
return (
<IconButton
color="primary"
aria-label="an icon button that displays a pencil and sends you to edit the selected table entry when clicked"
onClick={() => {
cellValues.row.startDatetime = formReadableDate(
toEST(cellValues.row.startDatetime)
Expand Down Expand Up @@ -195,6 +203,7 @@ export const Notifications: React.FC = () => {
return (
<IconButton
color="primary"
aria-label="an icon button that displays a trash can and sends you to delete the selected table entry when clicked"
onClick={() => {
setDeleteDialogToggle(true);
setRowToDelete(cellValues.row);
Expand Down Expand Up @@ -262,7 +271,13 @@ export const Notifications: React.FC = () => {
} catch (e: any) {
console.error(e);
setInfoDialogValues({
icon: <ErrorOutline color="error" sx={{ fontSize: '80px' }} />,
icon: (
<ErrorOutline
color="error"
aria-label="an error icon that displays an outlined circle with a x in the center"
sx={{ fontSize: '80px' }}
/>
),
title: 'Error',
content: `${errorMessage} ${e.message}. Check the console log for more details.`
});
Expand Down Expand Up @@ -628,7 +643,17 @@ export const Notifications: React.FC = () => {
</Typography>
</>
) : (
<Alert severity="info">
<Alert
icon={
<InfoOutlined
fontSize="inherit"
aria-label="an information alert icon that displays an outlined circle with the letter i in the center"
/>
}
severity="info"
role="alert"
aria-label="an information alert banner to display an information alert icon and text"
>
There is no active maintenance notification at this time. To make
a notification active, add a new one or update an inactive one.
</Alert>
Expand All @@ -641,7 +666,17 @@ export const Notifications: React.FC = () => {
Inactive Notifications
</Typography>
{inactiveNotifications.length === 0 ? (
<Alert severity="info">
<Alert
icon={
<InfoOutlined
fontSize="inherit"
aria-label="an information alert icon that displays an outlined circle with the letter i in the center"
/>
}
severity="info"
role="alert"
aria-label="an information alert banner to display an information alert icon and text"
>
There are no inactive maintenance notifications at this time. The
unused inactive notifications will be shown here.
</Alert>
Expand Down
Loading