WCAG 2.1, AA 1.4.11 Non-Text Contrast

src/themes/themeConst.js

@@ -39,6 +39,23 @@ export const PNSPS_THEME = createTheme({
                 },
             },
         },
+        MuiButton: {
+            styleOverrides: {
+            outlined: {
+                borderColor: "#0050B3",
+                color: "#0050B3",
+
+                "&:hover": {
+                borderColor: "#0050B3",
+                backgroundColor: "transparent",
+                },
+
+                "& .MuiSvgIcon-root": {
+                color: "inherit",
+                },
+            },
+            },
+        },
         MuiInputAdornment: {
             styleOverrides: {
                 root: {
@@ -181,47 +198,89 @@ export const PNSPS_THEME = createTheme({
         MuiOutlinedInput: {
             styleOverrides: {
                 input: {
-                    padding: '10.5px 14px 10.5px 12px',
-                    '&.MuiOutlinedInput-input.Mui-disabled': {
-                        WebkitTextFillColor: 'rgba(0, 0, 0, 1)',
-                    },
-                    color: 'rgba(0, 0, 0, 0.85)'
+                padding: '10.5px 14px 10.5px 12px',
+                '&.MuiOutlinedInput-input.Mui-disabled': {
+                    WebkitTextFillColor: 'rgba(0, 0, 0, 1)',
+                },
+                color: 'rgba(0, 0, 0, 0.85)',
                 },
+
                 root: {
-                    '&:hover .MuiOutlinedInput-notchedOutline': {
-                        borderColor: theme.palette.primary.light
-                    },
-                    '&.Mui-focused': {
-                        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
-                        '& .MuiOutlinedInput-notchedOutline': {
-                            border: `1px solid ${theme.palette.primary.light}`
-                        }
-                    },
-                    '&.Mui-error': {
-                        '&:hover .MuiOutlinedInput-notchedOutline': {
-                            borderColor: theme.palette.error.light
-                        },
-                        '&.Mui-focused': {
-                            boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
-                            '& .MuiOutlinedInput-notchedOutline': {
-                                border: `1px solid ${theme.palette.error.light}`
-                            }
-                        }
-                    },
-                    height: ROW_HEIGHT
+                /* =============================
+                    Issue 1: Input boundary contrast
+                    ============================= */
+                '& .MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#767676',  // >= 3:1 on white
+                    borderWidth: 1,
+                },
+                '&:hover .MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#767676',
+                },
+
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.primary.main,
+                    borderWidth: 3,                 // thick focus indicator
+                },
+
+                /* Prevent “shrinking” of inner area when border gets thicker */
+                '&.Mui-focused .MuiOutlinedInput-input': {
+                    padding: '8.5px 12px 8.5px 10px', // 10.5-2, 14-2, 10.5-2, 12-2
                 },
+                '&.Mui-focused.MuiInputBase-sizeSmall .MuiOutlinedInput-input': {
+                    padding: '5.5px 6px 5.5px 10px',  // 7.5-2, 8-2, 7.5-2, 12-2
+                },
+
+                /* Error state */
+                '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.error.main,
+                    borderWidth: 1,
+                },
+                '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.error.main,
+                },
+                '&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.palette.error.main,
+                    borderWidth: 3,
+                },
+
+                height: ROW_HEIGHT,
+                },
+
                 inputSizeSmall: {
-                    padding: '7.5px 8px 7.5px 12px'
+                padding: '7.5px 8px 7.5px 12px',
                 },
+
                 inputMultiline: {
-                    root:{
-                        minHeight: ROW_HEIGHT,
-                        maxHeight: '50vh'
-                    },
-                    padding: '7.5px 8px 7.5px 12px'
-                }
+                root: {
+                    minHeight: ROW_HEIGHT,
+                    maxHeight: '50vh',
+                },
+                padding: '7.5px 8px 7.5px 12px',
+                },
+            },
+        },
+        MuiCheckbox: {
+            styleOverrides: {
+                root: {
+                /* Default (unchecked) state — darker */
+                color: '#595959', // >= 3:1 on white
 
-            }
+                /* Hover (keep contrast) */
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+
+                /* Checked state */
+                '&.Mui-checked': {
+                    color: theme.palette.primary.main,
+                },
+
+                /* Focus-visible */
+                '&.Mui-focusVisible': {
+                    boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.35)}`,
+                },
+                },
+            },
         },
         MuiTextField: {
             styleOverrides: {