fix(a11y): Colour contrast issues (#2981)

theopensystemslab · Apr 5, 2024 · 2554ee9 · 2554ee9
1 parent 2c53f38
commit 2554ee9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -40,6 +40,7 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
   text: {
     primary: "#0B0C0C",
     secondary: "#505A5F",
+    placeholder: "#68787D",
   },
   link: {
     main: DEFAULT_PRIMARY_COLOR,
@@ -60,6 +61,7 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
   },
   success: {
     main: "#4CAF50",
+    dark: "#265A26",
   },
   info: {
     main: "#2196F3",
@@ -484,7 +486,7 @@ const generateTeamTheme = (
     linkColour: DEFAULT_PRIMARY_COLOR,
     logo: null,
     favicon: null,
-  }
+  },
 ): MUITheme => {
   const themeOptions = getThemeOptions(teamTheme);
   const theme = responsiveFontSizes(createTheme(themeOptions), { factor: 3 });

diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -39,6 +39,20 @@ declare module "@mui/material/styles/createPalette" {
       dark: string;
     };
   }
+
+  interface TypeText {
+    primary: string;
+    secondary: string;
+    disabled: string;
+    placeholder: string;
+  }
+
+  interface TypeTextOptions {
+    primary: string;
+    secondary: string;
+    disabled: string;
+    placeholder: string;
+  }
 }
 
 // Append our custom variants to MUI Button

diff --git a/editor.planx.uk/src/ui/editor/RichTextInput.tsx b/editor.planx.uk/src/ui/editor/RichTextInput.tsx
@@ -98,8 +98,8 @@ export const RichContentContainer = styled(Box)(({ theme }) => ({
     },
     // Styles for placeholder text, to match ui/Input.tsx
     "& p.is-editor-empty:nth-child(1)::before": {
-      color: theme.palette.text.secondary,
-      opacity: "0.5",
+      color: theme.palette.text.placeholder,
+      opacity: 1,
       content: `attr(data-placeholder)`,
       float: "left",
       height: 0,

diff --git a/editor.planx.uk/src/ui/shared/Input.tsx b/editor.planx.uk/src/ui/shared/Input.tsx
@@ -54,9 +54,9 @@ const StyledInputBase = styled(InputBase, {
   "& input": {
     fontWeight: "inherit",
   },
-  "& ::placeholder": {
-    color: theme.palette.text.secondary,
-    opacity: "0.5",
+  "& input::placeholder, & textarea::placeholder": {
+    color: theme.palette.text.placeholder,
+    opacity: 1,
   },
   ...(bordered && {
     border: `2px solid ${theme.palette.text.primary}`,