FI-2077: Improve colors and contrasts for a11y (#392)

* convert input colors to secondary * bold modal action text * add focus border to buttons * update colors for tabs and buttons --------- Co-authored-by: Alyssa Wang <[email protected]>
inferno-framework · Sep 12, 2023 · 44da696 · 44da696
1 parent 3b09428
commit 44da696
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 11 deletions.
diff --git a/client/src/components/InputsModal/InputCheckboxGroup.tsx b/client/src/components/InputsModal/InputCheckboxGroup.tsx
@@ -108,6 +108,7 @@ const InputCheckboxGroup: FC<InputCheckboxGroupProps> = ({
               control={
                 <Checkbox
                   size="small"
+                  color="secondary"
                   name={option.value}
                   checked={values[option.value as keyof CheckboxValues] || false}
                   onChange={handleChange}

diff --git a/client/src/components/InputsModal/InputOAuthCredentials.tsx b/client/src/components/InputsModal/InputOAuthCredentials.tsx
@@ -107,6 +107,7 @@ const InputOAuthCredentials: FC<InputOAuthCredentialsProps> = ({
           value={oAuthCredentials[field.name as keyof OAuthCredentials]}
           className={classes.inputField}
           variant="standard"
+          color="secondary"
           fullWidth
           onChange={(event) => {
             const value = event.target.value;

diff --git a/client/src/components/InputsModal/InputRadioGroup.tsx b/client/src/components/InputsModal/InputRadioGroup.tsx
@@ -66,7 +66,7 @@ const InputRadioGroup: FC<InputRadioGroupProps> = ({
           {requirement.options?.list_options?.map((option, i) => (
             <FormControlLabel
               value={option.value}
-              control={<Radio size="small" />}
+              control={<Radio size="small" color="secondary" />}
               label={option.label}
               key={`radio-button-${i}`}
             />

diff --git a/client/src/components/InputsModal/InputTextArea.tsx b/client/src/components/InputsModal/InputTextArea.tsx
@@ -25,6 +25,7 @@ const InputTextArea: FC<InputTextAreaProps> = ({ requirement, index, inputsMap,
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
+        color="secondary"
         fullWidth
         label={<FieldLabel requirement={requirement} />}
         helperText={requirement.description}

diff --git a/client/src/components/InputsModal/InputTextField.tsx b/client/src/components/InputsModal/InputTextField.tsx
@@ -30,6 +30,7 @@ const InputTextField: FC<InputTextFieldProps> = ({
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
+        color="secondary"
         fullWidth
         label={<FieldLabel requirement={requirement} />}
         helperText={requirement.description}

diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
@@ -349,6 +349,7 @@ const InputsModal: FC<InputsModalProps> = ({
                   input: classes.serialInput,
                 },
               }}
+              color="secondary"
               fullWidth
               multiline
               data-testid="serial-input"
@@ -399,7 +400,7 @@ const InputsModal: FC<InputsModalProps> = ({
             color="secondary"
             data-testid="cancel-button"
             onClick={() => closeModal()}
-            sx={{ mr: 1 }}
+            sx={{ mr: 1, fontWeight: 'bold' }}
           >
             Cancel
           </Button>
@@ -409,6 +410,7 @@ const InputsModal: FC<InputsModalProps> = ({
             disableElevation
             onClick={submitClicked}
             disabled={missingRequiredInput || invalidInput}
+            sx={{ fontWeight: 'bold' }}
           >
             Submit
           </Button>

diff --git a/client/src/components/InputsModal/styles.tsx b/client/src/components/InputsModal/styles.tsx
@@ -13,7 +13,7 @@ export default makeStyles()((theme: Theme) => ({
       color: theme.palette.common.grayDarkest,
     },
     '& label.Mui-focused': {
-      color: theme.palette.common.orangeDarkest,
+      color: theme.palette.secondary.main,
     },
     '& label.Mui-disabled': {
       color: theme.palette.common.gray,
@@ -36,7 +36,7 @@ export default makeStyles()((theme: Theme) => ({
     margin: '8px 0',
     borderColor: theme.palette.common.grayLight,
     '&:focus-within': {
-      borderColor: theme.palette.primary.main,
+      borderColor: theme.palette.secondary.main,
     },
   },
   serialInput: {

diff --git a/client/src/components/PresetsSelector/PresetsSelector.tsx b/client/src/components/PresetsSelector/PresetsSelector.tsx
@@ -109,7 +109,7 @@ const PresetsSelector: FC<PresetsModalProps> = ({ presets, testSessionId, getSes
         <DialogActions>
           <Button
             data-testid="preset-cancel-button"
-            sx={{ color: theme.palette.primary.dark }}
+            sx={{ color: theme.palette.primary.dark, fontWeight: 'bold' }}
             onClick={() => {
               setSelectedPreset(formerPreset);
               setModalVisible(false);
@@ -119,7 +119,7 @@ const PresetsSelector: FC<PresetsModalProps> = ({ presets, testSessionId, getSes
           </Button>
           <Button
             data-testid="preset-apply-button"
-            sx={{ color: theme.palette.primary.dark }}
+            sx={{ color: theme.palette.primary.dark, fontWeight: 'bold' }}
             onClick={() => {
               applyPresetToSession(presetTitleToIdMap[selectedPreset]);
               setFormerPreset(selectedPreset);

diff --git a/client/src/components/RequestDetailModal/RequestDetailModal.tsx b/client/src/components/RequestDetailModal/RequestDetailModal.tsx
@@ -121,6 +121,7 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             variant="contained"
             data-testid="cancel-button"
             onClick={hideModal}
+            sx={{ fontWeight: 'bold' }}
           >
             Close
           </Button>

diff --git a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
@@ -53,7 +53,7 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
             <Cancel
               tabIndex={0}
               aria-hidden="false"
-              style={{ color: result.optional ? grey[500] : red[500] }}
+              style={{ color: result.optional ? grey[500] : red[700] }}
               data-testid={`${result.id}-${result.result}`}
             />
           </CustomTooltip>
@@ -64,7 +64,7 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
             <Cancel
               tabIndex={0}
               aria-hidden="false"
-              style={{ color: result.optional ? grey[500] : red[500] }}
+              style={{ color: result.optional ? grey[500] : red[700] }}
               data-testid={`${result.id}-${result.result}`}
             />
           </CustomTooltip>

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
@@ -217,7 +217,11 @@ const TestListItem: FC<TestListItemProps> = ({
         TransitionProps={{ unmountOnExit: true }}
         onClick={handleAccordionClick}
         onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
+          if (e.key === 'Enter') {
+            // Don't open/close accordion on enter
+            setTabIndex(findPopulatedTabIndex());
+          }
+          if (e.key === ' ') {
             handleAccordionClick();
           }
         }}

diff --git a/client/src/components/_common/ActionModal.tsx b/client/src/components/_common/ActionModal.tsx
@@ -31,6 +31,7 @@ const ActionModal: FC<ActionModalProps> = ({ modalVisible, message, cancelTestRu
           disableElevation
           onClick={cancelTestRun}
           data-testid="cancel-button"
+          sx={{ fontWeight: 'bold' }}
         >
           Cancel
         </Button>

diff --git a/client/src/components/_common/CustomTab.tsx b/client/src/components/_common/CustomTab.tsx
@@ -10,7 +10,7 @@ interface CustomTabProps {
 const CustomTab = styled((props: CustomTabProps) => <Tab disableRipple {...props} />)(
   ({ theme }) => ({
     pointerEvents: 'auto',
-    fontWeight: 'bolder',
+    fontWeight: 'bold',
     '&:hover, :focus-within': {
       color: theme.palette.common.grayDarkest,
     },

diff --git a/client/src/components/_common/SelectionPanel/RadioSelection.tsx b/client/src/components/_common/SelectionPanel/RadioSelection.tsx
@@ -3,6 +3,7 @@ import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
 import { RadioOption, RadioOptionSelection } from '~/models/selectionModels';
 import CustomTooltip from '~/components/_common/CustomTooltip';
+import useStyles from '~/components/_common/SelectionPanel/styles';
 
 export interface RadioSelectionProps {
   options: RadioOption[];
@@ -13,6 +14,7 @@ const RadioSelection: FC<RadioSelectionProps> = ({
   options,
   setSelections: setParentSelections,
 }) => {
+  const { classes } = useStyles();
   const initialSelectedRadioOptions: RadioOptionSelection[] = options.map((option) => ({
     // just grab the first to start
     // perhaps choices should be persisted in the URL to make it easy to share specific options
@@ -39,7 +41,12 @@ const RadioSelection: FC<RadioSelectionProps> = ({
   return (
     <Box px={4} py={2}>
       {options.map((option, i) => (
-        <FormControl fullWidth id={`radio-input-${i}`} key={`radio-form-control${i}`}>
+        <FormControl
+          fullWidth
+          id={`radio-input-${i}`}
+          key={`radio-form-control${i}`}
+          className={classes.label}
+        >
           <FormLabel sx={{ display: 'flex', alignItems: 'center' }}>
             {option.title || option.id}
             {option.description && (

diff --git a/client/src/components/_common/SelectionPanel/styles.tsx b/client/src/components/_common/SelectionPanel/styles.tsx
@@ -2,6 +2,11 @@ import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
 
 export default makeStyles()((theme: Theme) => ({
+  label: {
+    '& label.Mui-focused': {
+      color: theme.palette.common.orangeDarkest,
+    },
+  },
   optionsList: {
     display: 'flex',
     flexDirection: 'column',

diff --git a/client/src/index.css b/client/src/index.css
@@ -22,4 +22,16 @@ body {
   overscroll-behavior-y: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+}
+
+/* Keyboard-only focus indicator */
+button:focus-visible {
+  border: 1px solid #707070;
+}
+
+/* Darken button backgrounds on hover on text styled buttons */
+button:hover {
+  &.MuiButton-text {
+    background-color: #cbd5df60;
+  }
 }