Merge pull request #518 from guardian/tf-accessibility

Accessibility warning for banner designs
guardian · Oct 16, 2023 · d331835 · d331835
2 parents 03b7096 + 3f3e51d
commit d331835
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/public/src/components/channelManagement/bannerDesigns/BannerDesignForm.tsx b/public/src/components/channelManagement/bannerDesigns/BannerDesignForm.tsx
@@ -18,6 +18,7 @@ import { BannerDesignUsage } from './BannerDesignUsage';
 import { TickerDesignEditor } from './TickerDesignEditor';
 import { BannerVisualEditor } from './BannerVisualEditor';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { InfoOutlined } from '@material-ui/icons';
 
 type Props = {
   design: BannerDesign;
@@ -59,6 +60,14 @@ export const useStyles = makeStyles(({ spacing, palette }: Theme) => ({
     fontWeight: 500,
     color: palette.grey[700],
   },
+  info: {
+    display: 'flex',
+    marginBottom: spacing(1),
+    alignItems: 'center',
+    '& > * + *': {
+      marginLeft: spacing(1),
+    },
+  },
 }));
 
 const BannerDesignForm: React.FC<Props> = ({
@@ -134,6 +143,13 @@ const BannerDesignForm: React.FC<Props> = ({
 
   return (
     <div className={classes.container}>
+      <div className={classes.info}>
+        <InfoOutlined />
+        <span>
+          Create accessible designs that always meet WCAG Grading of AAA or AA. Check for colour
+          contrast at <a href="https://www.whocanuse.com/">whocanuse.com</a>
+        </span>
+      </div>
       <Accordion className={classes.accordion}>
         <AccordionSummary className={classes.sectionHeader} expandIcon={<ExpandMoreIcon />}>
           Usage