From e0cf514e33476337249494f8a44f71b521429071 Mon Sep 17 00:00:00 2001 From: Kevin Calva Date: Fri, 2 Apr 2021 14:25:08 -0500 Subject: [PATCH 01/15] added accessibility features to: HomePage, Service Category, Service Detail, Global Footer, and Global Header pages --- src/components/Classification.js | 92 +++++++++++-------- src/components/app/Footer.js | 15 ++- src/components/app/Header.js | 24 ++++- src/components/core/PrimaryButton.js | 1 + src/components/hero/Hero.js | 5 + src/components/layout/ContentContainer.js | 8 ++ src/components/layout/index.js | 1 + src/components/pages/home/OfferAccordion.js | 2 + src/components/pages/home/Solutions.js | 7 +- .../pages/service-category/ServiceList.js | 19 +++- .../pages/solution-detail/SolutionList.js | 5 +- src/styles/theme.js | 8 ++ src/templates/ServiceDetail.js | 11 ++- 13 files changed, 148 insertions(+), 50 deletions(-) create mode 100644 src/components/layout/ContentContainer.js diff --git a/src/components/Classification.js b/src/components/Classification.js index b4a066b..e3079e4 100644 --- a/src/components/Classification.js +++ b/src/components/Classification.js @@ -2,6 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Text, Box } from 'grommet'; +const levelLabels = { + U: 'Controlled Unclassified Information', + S: 'Secret', + 'S-SAR': 'Secret//Special Access Required', + 'S-SCI': 'Secret//Sensitive Compartmented Information', + TS: 'Top Secret', + 'TS-SAR': 'Top Secret//Special Access Required', + 'TS-SCI': 'Top Secret//Sensitive Compartmented Information', +}; + const LevelNode = ({ levels, value, children }) => { const matchingLevel = levels?.includes(value); const nodeStyles = { @@ -22,7 +32,7 @@ const LevelNode = ({ levels, value, children }) => { }; return ( - + {children} @@ -30,51 +40,56 @@ const LevelNode = ({ levels, value, children }) => { ); }; -const Classification = ({ levels }) => ( - +const Classification = ({ levels, serviceName }) => { + const supportedLevels = levels.map((item) => levelLabels[item]).join(', '); + return ( - - CUI - - - S - - - S//SAR - - - S//SCI - - - TS - - - TS//SAR - - - TS//SCI - + + + CUI + + + S + + + S//SAR + + + S//SCI + + + TS + + + TS//SAR + + + TS//SCI + + - -); + ); +}; Classification.propTypes = { level: PropTypes.arrayOf([ @@ -86,6 +101,7 @@ Classification.propTypes = { 'TS-SAR', 'TS-SCI', ]), + serviceName: PropTypes.string, }; export default Classification; diff --git a/src/components/app/Footer.js b/src/components/app/Footer.js index 1497558..c225a3d 100644 --- a/src/components/app/Footer.js +++ b/src/components/app/Footer.js @@ -33,8 +33,19 @@ const Footer = () => { gap="medium" align="center" > - C3I&N - + C3I & Networks Directorate logo + diff --git a/src/components/app/Header.js b/src/components/app/Header.js index acd1266..a68f9bc 100644 --- a/src/components/app/Header.js +++ b/src/components/app/Header.js @@ -1,7 +1,14 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'gatsby'; -import { Box, Text, Header as GHeader, ResponsiveContext } from 'grommet'; +import { + Box, + Text, + Header as GHeader, + ResponsiveContext, + SkipLinks, + SkipLink, +} from 'grommet'; import styled from 'styled-components'; import { RenderPropSticky as Sticky } from 'react-sticky-el'; import { Container, Column } from '../layout'; @@ -30,6 +37,15 @@ const StyledHeader = styled(GHeader)` : theme.custom.header.height}; `; +const skipLinkList = [ + , +]; const Header = ({ transparent }) => { const size = useContext(ResponsiveContext); const isMobile = ['xsmall', 'small'].includes(size); @@ -59,6 +75,8 @@ const Header = ({ transparent }) => { display: 'flex', flexDirection: 'row', }} + aria-label="Link to homepage" + tabIndex={2} > { +