Merge pull request #223 from zimmerman-team/feat/1879

1879: Improve WCAG compliance
zimmerman-team · Sep 21, 2020 · 9dc569b · 9dc569b
2 parents cfdbfe5 + 9b1b1fb
commit 9dc569b
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 47 deletions.
diff --git a/src/app/components/inputs/selects/AsyncSelect/index.tsx b/src/app/components/inputs/selects/AsyncSelect/index.tsx
@@ -28,6 +28,7 @@ const customStyles = {
   multiValueLabel: MultiValueLabel,
   multiValueRemove: (provided: any) => ({ ...provided }),
   menu: Menu,
+  placeholder: styles => ({...styles, color: 'black', opacity: '1'}),
 };
 
 async function loadOptions(search, loadedOptions, { page }, pivot) {

diff --git a/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx b/src/app/components/inputs/selects/ConnectedSelect/common/index.tsx
@@ -128,8 +128,15 @@ export const Control = () => ({
 export const ValueContainer = (provided) => ({
   ...provided,
   padding: '5px',
+  marginLeft: '10px',
+  fontFamily: 'Inter',
+  color: 'rgb(18, 18, 18)',
+  fontStyle: 'normal',
+  fontWeight: 200,
 });
 
+
+
 export const MenuList = (provided, state) => ({
   ...provided,
   height: '300px',

diff --git a/src/app/components/inputs/selects/ConnectedSelect/index.tsx b/src/app/components/inputs/selects/ConnectedSelect/index.tsx
@@ -28,6 +28,7 @@ const customStyles = {
   multiValueLabel: MultiValueLabel,
   multiValueRemove: (provided: any) => ({ ...provided }),
   menu: Menu,
+  placeholder: styles => ({...styles, color: 'black', opacity: '1'}),
 };
 
 export const ConnectedSelect = (props: any) => {
@@ -57,7 +58,7 @@ export const ConnectedSelect = (props: any) => {
         {props.helperText && (
           <FieldInputLabel
             label={props.helperText}
-            css="color: rgba(1,1,10,0.38) !important;"
+            css="color: #717172 !important; font-weight: 300 !important;"
           />
         )}
         {props.helperTextLink && props.helperTextUrl && (

diff --git a/src/app/components/inputs/textinputs/DateInputField/index.tsx b/src/app/components/inputs/textinputs/DateInputField/index.tsx
@@ -42,8 +42,8 @@ const BaseComponent = styled((props) => <TextField {...props} />)`
     padding: 0;
 
     font-size: 16px;
-    font-weight: 300;
-    color: rgba(1, 1, 10, 0.38);
+    font-weight: 200;
+    color: rgba(0, 0, 0);
     margin-left: 15px;
   }
   & [class*='MuiFormLabel-root'] {

diff --git a/src/app/components/inputs/textinputs/IconTextInputFIeld/index.tsx b/src/app/components/inputs/textinputs/IconTextInputFIeld/index.tsx
@@ -33,10 +33,9 @@ const IconTextInput = (props: Props) => {
         </Box>
       </FieldBackdrop>
       {props.helperText && (
-        /* todo: the way text color is set is a bit hacky, should be refactoredd*/
         <FormHelperText
           css={`
-            color: rgba(1, 1, 10, 0.38) !important;
+            color: #717172 !important;
           `}
         >
           {props.helperText}

diff --git a/src/app/components/inputs/textinputs/SearchInputField/index.tsx b/src/app/components/inputs/textinputs/SearchInputField/index.tsx
@@ -62,6 +62,11 @@ export const SearchInputField = (props: Props) => {
         > div {
           min-height: auto;
         }
+
+        > div > div > input::-webkit-input-placeholder {
+          color: #01010A;
+          opacity: 1;
+        }
       `}
     />
   );

diff --git a/src/app/modules/about-module/layout.tsx b/src/app/modules/about-module/layout.tsx
@@ -5,6 +5,14 @@ import { ModuleHeader } from 'app/modules/common/ModuleHeader';
 import { ParagraphContainer } from 'app/modules/about-module/common/ParagraphContainer';
 import Grid from '@material-ui/core/Grid';
 import Hidden from '@material-ui/core/Hidden';
+import styled from 'styled-components';
+
+export const Link = styled.a`
+  color: #185364;
+  :hover{
+    color: #03DBE4;
+  }
+`;
 
 export const AboutLayout = () => {
   return (
@@ -26,12 +34,12 @@ export const AboutLayout = () => {
                 according to the IATI Standard. Data users can gain data on
                 development and humanitarian resources and results through using
                 the{' '}
-                <a
+                <Link
                   href="https://test-datastore.iatistandard.org/api/"
                   target="_blank"
                 >
                   Datastore’s API
-                </a>
+                </Link>
                 . Users will also be able to download data from a new
                 user-friendly Datastore Query Builder.
               </Typography>
@@ -45,21 +53,21 @@ export const AboutLayout = () => {
             <ParagraphContainer data-cy="p1">
               <Typography variant="body1">
                 The new{' '}
-                <a
+                <Link
                   href="https://test-datastore.iatistandard.org/api/"
                   target="_blank"
                 >
                   IATI Datastore API
-                </a>{' '}
+                </Link>{' '}
                 provides data published by organisations who have used version 2
                 of the IATI Standard. This is following the decision to
                 deprecate{' '}
-                <a
+                <Link
                   href="https://iatistandard.org/en/news/notice-iati-standard-version-1-is-deprecated/"
                   target="_blank"
                 >
                   version 1 by IATI members
-                </a>
+                </Link>
                 , which was implemented July 2019.
               </Typography>
             </ParagraphContainer>
@@ -71,12 +79,12 @@ export const AboutLayout = () => {
                 Schema provides the exact order and format that publishers
                 should provide their XML files in. More information about the
                 Schema can be found on{' '}
-                <a
+                <Link
                   href="http://reference.iatistandard.org/203/schema/"
                   target="_blank"
                 >
                   IATI’s Reference site
-                </a>
+                </Link>
                 .
               </Typography>
             </ParagraphContainer>
@@ -104,20 +112,20 @@ export const AboutLayout = () => {
               <Typography variant="body1">
                 For detailed documentation on how to use the API, please refer
                 to the{' '}
-                <a
+                <Link
                   href="https://test-datastore.iatistandard.org/documentation/introduction"
                   target="_blank"
                 >
                   Datastore API documentation
-                </a>
+                </Link>
                 . For information on how to map queries from the ‘old’ Datastore
                 to the new one, please see the{' '}
-                <a
+                <Link
                   href="https://docs.google.com/document/d/1nTu1Jdg17toiQoemJT3R9YPwvAwCN1gpFnnL1R-lfHY/edit"
                   target="_blank"
                 >
                   mapping document
-                </a>
+                </Link>
                 .
               </Typography>
             </ParagraphContainer>
@@ -130,23 +138,23 @@ export const AboutLayout = () => {
             <ParagraphContainer data-cy="p5">
               <Typography variant="body1">
                 The{' '}
-                <a
+                <Link
                   href="https://test-datastore.iatistandard.org/querybuilder/core-filters"
                   target="_blank"
                 >
                   Query builder
-                </a>{' '}
+                </Link>{' '}
                 allows users to build common queries through a series of drop
                 down and freetext filters.
                 <br />
                 <br />
                 For guidance on how to use the query builder, see the{' '}
-                <a
+                <Link
                   href="https://iatistandard.org/documents/10453/IATI_Datastore_Query_Builder_User_Guide.pdf"
                   target="_blank"
                 >
                   Query Builder User Guide.
-                </a>
+                </Link>
               </Typography>
             </ParagraphContainer>
           </Grid>

diff --git a/src/app/modules/common/ModuleHeader/index.tsx b/src/app/modules/common/ModuleHeader/index.tsx
@@ -2,13 +2,18 @@ import React from 'react';
 import { Box, Grid, Typography, useTheme } from '@material-ui/core';
 import { Header } from 'app/components/surfaces/Header';
 import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
+import styled from 'styled-components';
 
 type ModuleModel = {
   title?: string;
   description?: string;
   extraText?: boolean;
 };
 
+const Link = styled.a`
+  color: #03DBE4;
+`;
+
 export const ModuleHeader = (props: ModuleModel) => {
   const theme = useTheme();
   const md = useMediaQuery(theme.breakpoints.down('md'));
@@ -30,12 +35,12 @@ export const ModuleHeader = (props: ModuleModel) => {
                 <>
                   For guidance on how
                   <br /> to use the query builder, see the{' '}
-                  <a
+                  <Link
                     href="https://iatistandard.org/documents/10453/IATI_Datastore_Query_Builder_User_Guide.pdf"
                     target="_blank"
                   >
                     Query Builder User Guide.
-                  </a>
+                  </Link>
                 </>
               )}
             </Typography>

diff --git a/src/app/modules/landing-module/layout.tsx b/src/app/modules/landing-module/layout.tsx
@@ -12,10 +12,6 @@ import { HomeHeader } from 'app/components/HomeHeader';
 import { AppBar } from 'app/components/surfaces/AppBar';
 import Providers from 'app/Providers';
 
-const TypographyOpacity = styled((props) => <Typography {...props} />)`
-  opacity: 0.8;
-`;
-
 export const LandingLayout = () => {
   return (
     <PageContainer footer>
@@ -28,23 +24,23 @@ export const LandingLayout = () => {
               IATI Datastore
             </Typography>
             <Box width="100%" height="24px" />
-            <TypographyOpacity variant="h5" color="textSecondary">
+            <Typography variant="h5" color="textSecondary">
               The IATI Datastore provides data on development and humanitarian
               spending and projects that address poverty and crises across the
               world.
-            </TypographyOpacity>
+            </Typography>
             <Box width="100%" height="24px" />
-            <TypographyOpacity variant="body2" color="textSecondary">
+            <Typography variant="body2" color="textSecondary">
               Find data published by organisations from governments, development
               finance institutions and UN agencies to NGOs, foundations and the
               private sector. They have published data according to the IATI
               Standard, our set of rules and guidance for sharing useful, open
               data.
-            </TypographyOpacity>
+            </Typography>
             <Box width="100%" height="24px" />
-            <TypographyOpacity variant="body2" color="textSecondary">
+            <Typography variant="body2" color="textSecondary">
               Access data through using the Datastore’s API or Query Builder.
-            </TypographyOpacity>
+            </Typography>
           </Grid>
 
           <Box width="100%" height="36px" />
@@ -61,10 +57,6 @@ export const LandingLayout = () => {
         <LandingMidSection />
       </Container>
 
-      {/*FOOTER*/}
-      {/*TODO: replace box with footer component*/}
-      {/*<Box width="100%" height="200px" bgcolor="#155366" />*/}
-      {/*<Footer />*/}
     </PageContainer>
   );
 };
diff --git a/src/app/modules/notfound-module/layout.tsx b/src/app/modules/notfound-module/layout.tsx
@@ -4,6 +4,7 @@ import { PageContainer } from 'app/modules/common/PageContainer';
 import { ModuleHeader } from 'app/modules/common/ModuleHeader';
 import Grid from '@material-ui/core/Grid';
 import ErrorImage from 'app/assets/images/404_image.png';
+import { Link } from 'app/modules/about-module/layout';
 
 export const PageNotFoundLayout = () => {
   return (
@@ -78,23 +79,17 @@ export const PageNotFoundLayout = () => {
             >
               An error ocurred and your request couldn’t be completed.
               <br /> Either check the URL,{' '}
-              <a
+              <Link
                 href="/"
-                css={`
-                  color: #3e8c9f;
-                `}
               >
                 home page
-              </a>
+              </Link>
               , or feel free to{' '}
-              <a
+              <Link
                 href="/"
-                css={`
-                  color: #3e8c9f;
-                `}
               >
                 report this issue.
-              </a>
+              </Link>
             </div>
           </Grid>
         </Grid>