From eb2a5693eaaddfc379f8432beac5647b868841c8 Mon Sep 17 00:00:00 2001 From: Kjartan Einarsson Date: Tue, 15 Oct 2024 16:53:31 -0700 Subject: [PATCH 1/4] Update aria-* attributes to be more descriptive and add missing aria-* attributes/roles --- app/src/components/dialog/InfoDialog.tsx | 8 +- app/src/components/fields/AreaSizeFields.tsx | 14 ++- app/src/components/fields/CustomTextField.tsx | 3 + .../MultiAutocompleteFieldVariableSize.tsx | 10 ++- .../fields/PlanStartEndDateFields.tsx | 10 ++- app/src/components/layout/Footer.tsx | 18 ++-- app/src/components/layout/Header.tsx | 85 +++++++++++++------ .../PlanAdvancedFilters.tsx | 17 +++- .../search-plan-filter/PlanFilter.tsx | 28 ++++-- .../search-project-filter/ProjectFilter.tsx | 31 +++++-- app/src/components/toolbar/ActionToolbars.tsx | 4 +- .../admin/users/AccessRequestList.tsx | 9 +- .../features/admin/users/ActiveUsersList.tsx | 31 +++++-- .../features/admin/users/ManageUsersPage.tsx | 10 ++- .../admin/users/ReviewAccessRequestForm.tsx | 11 ++- .../admin/users/UsersDetailHeader.tsx | 17 ++-- .../features/admin/users/UsersDetailPage.tsx | 11 ++- .../admin/users/UsersDetailProjectsPlans.tsx | 18 ++-- app/src/features/plans/PlanListPage.tsx | 33 +++++-- app/src/features/projects/Plans.tsx | 19 ++++- app/src/features/projects/Projects.tsx | 20 ++++- .../projects/ProjectsPlansListPage.tsx | 2 +- .../projects/components/ProjectsTableHead.tsx | 8 +- .../components/ProjectsTableToolbar.tsx | 14 ++- .../projects/list/ProjectsListPage.tsx | 71 +++++++++++----- app/src/features/user/MyPlans.tsx | 14 +-- app/src/features/user/MyProjects.tsx | 14 +-- app/src/layouts/AppLayout.tsx | 6 +- 28 files changed, 388 insertions(+), 148 deletions(-) diff --git a/app/src/components/dialog/InfoDialog.tsx b/app/src/components/dialog/InfoDialog.tsx index 6823b0c9..e9bf70d1 100644 --- a/app/src/components/dialog/InfoDialog.tsx +++ b/app/src/components/dialog/InfoDialog.tsx @@ -74,7 +74,7 @@ const InfoDialog: React.FC = (props) => { return ( - + @@ -93,6 +93,8 @@ const InfoDialog: React.FC = (props) => { sx={{ width: 20, height: 32 }} image={item.typeIcon} title={item.typeLabel} + role="img" + aria-label={`${item.typeLabel} icon`} /> {item.typeLabel} {infoContent} @@ -112,7 +114,7 @@ const InfoDialog: React.FC = (props) => { {isError ? ( - + Unable to play media ) : ( @@ -133,7 +135,7 @@ const InfoDialog: React.FC = (props) => { )} - diff --git a/app/src/components/fields/AreaSizeFields.tsx b/app/src/components/fields/AreaSizeFields.tsx index daee7f85..e28d41d1 100644 --- a/app/src/components/fields/AreaSizeFields.tsx +++ b/app/src/components/fields/AreaSizeFields.tsx @@ -53,7 +53,8 @@ const AreaSizeFields: React.FC = (props) => { inputProps: { min: AREA_SIZE_MIN_MAX.min, max: AREA_SIZE_MIN_MAX.max, - 'data-testid': 'min-area' + 'data-testid': 'min-area', + 'aria-label': 'Minimum Area Size' }, endAdornment: Ha }} @@ -61,7 +62,8 @@ const AreaSizeFields: React.FC = (props) => { // Firefox min/max area min: AREA_SIZE_MIN_MAX.min, max: AREA_SIZE_MIN_MAX.max, - 'data-testid': 'min-area' + 'data-testid': 'min-area', + 'aria-label': 'Minimum Area Size' }} onChange={handleChange} error={get(touched, minName) && Boolean(get(errors, minName))} @@ -69,6 +71,7 @@ const AreaSizeFields: React.FC = (props) => { InputLabelProps={{ shrink: true }} + aria-invalid={get(touched, minName) && Boolean(get(errors, minName))} /> @@ -88,7 +91,8 @@ const AreaSizeFields: React.FC = (props) => { inputProps: { min: minValue, max: AREA_SIZE_MIN_MAX.max, - 'data-testid': 'max-area' + 'data-testid': 'max-area', + 'aria-label': 'Maximum Area Size' }, endAdornment: Ha }} @@ -96,7 +100,8 @@ const AreaSizeFields: React.FC = (props) => { // Firefox min/max dates min: minValue, max: AREA_SIZE_MIN_MAX.max, - 'data-testid': 'max-area' + 'data-testid': 'max-area', + 'aria-label': 'Maximum Area Size' }} onChange={handleChange} error={get(touched, maxName) && Boolean(get(errors, maxName))} @@ -104,6 +109,7 @@ const AreaSizeFields: React.FC = (props) => { InputLabelProps={{ shrink: true }} + aria-invalid={get(touched, maxName) && Boolean(get(errors, maxName))} /> diff --git a/app/src/components/fields/CustomTextField.tsx b/app/src/components/fields/CustomTextField.tsx index 181527c8..81e4d62b 100644 --- a/app/src/components/fields/CustomTextField.tsx +++ b/app/src/components/fields/CustomTextField.tsx @@ -2,6 +2,7 @@ import TextField from '@mui/material/TextField'; import { FormikContextType, useFormikContext } from 'formik'; import get from 'lodash-es/get'; import React from 'react'; + export interface ICustomTextField { label: string; name: string; @@ -28,6 +29,8 @@ const CustomTextField: React.FC> = (pr fullWidth={true} error={get(touched, name) && Boolean(get(errors, name))} helperText={get(touched, name) && (get(errors, name) as string)} + aria-label={label} + aria-invalid={get(touched, name) && Boolean(get(errors, name))} {...other} /> ); diff --git a/app/src/components/fields/MultiAutocompleteFieldVariableSize.tsx b/app/src/components/fields/MultiAutocompleteFieldVariableSize.tsx index 0a43e9cb..2228f34c 100644 --- a/app/src/components/fields/MultiAutocompleteFieldVariableSize.tsx +++ b/app/src/components/fields/MultiAutocompleteFieldVariableSize.tsx @@ -281,7 +281,12 @@ const MultiAutocompleteFieldVariableSize: React.FC = (p { selected }: any ) => { return ( - + } checkedIcon={} @@ -290,6 +295,7 @@ const MultiAutocompleteFieldVariableSize: React.FC = (p disabled={props.options?.includes(renderOption) || false} value={renderOption.value} color="default" + aria-label={renderOption.label} /> {renderOption.label} @@ -306,6 +312,8 @@ const MultiAutocompleteFieldVariableSize: React.FC = (p placeholder="Type to start searching" error={get(touched, props.id) && Boolean(get(errors, props.id))} helperText={get(touched, props.id) && get(errors, props.id)} + aria-label={props.label} + aria-invalid={get(touched, props.id) && Boolean(get(errors, props.id))} /> )} /> diff --git a/app/src/components/fields/PlanStartEndDateFields.tsx b/app/src/components/fields/PlanStartEndDateFields.tsx index 84c4a907..05eecfad 100644 --- a/app/src/components/fields/PlanStartEndDateFields.tsx +++ b/app/src/components/fields/PlanStartEndDateFields.tsx @@ -18,11 +18,11 @@ interface IStartEndDateFieldsProps { } const CalendarStartIcon = () => { - return ; + return ; }; const CalendarEndIcon = () => { - return ; + return ; }; /** @@ -71,7 +71,8 @@ const StartEndDateFields: React.FC = (props) => { error: get(touched, startName) && Boolean(get(errors, startName)), helperText: get(touched, startName) && get(errors, startName), inputProps: { - 'data-testid': 'start_date' + 'data-testid': 'start_date', + 'aria-label': 'Start Date' }, InputLabelProps: { shrink: true @@ -111,7 +112,8 @@ const StartEndDateFields: React.FC = (props) => { error: get(touched, endName) && Boolean(get(errors, endName)), helperText: get(touched, endName) && get(errors, endName), inputProps: { - 'data-testid': 'end_date' + 'data-testid': 'end_date', + 'aria-label': 'End Date' }, InputLabelProps: { shrink: true diff --git a/app/src/components/layout/Footer.tsx b/app/src/components/layout/Footer.tsx index bc9a3dd7..9cfe42ed 100644 --- a/app/src/components/layout/Footer.tsx +++ b/app/src/components/layout/Footer.tsx @@ -34,27 +34,33 @@ const pageStyles = { const Footer: React.FC = () => { return ( -