Merge branch 'develop' into 'staging'

content updates from UAT, gtag, hero updates

See merge request !21

gatsby-config.js

@@ -46,6 +46,14 @@ module.exports = {
       },
     },
     `gatsby-plugin-force-trailing-slashes`,
+    {
+      resolve: `gatsby-plugin-google-gtag`,
+      options: {
+        trackingIds: [
+          'G-JKZWCK5K3P', // Google Analytics / GA
+        ],
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

package-lock.json

@@ -8585,6 +8585,15 @@
         "webpack-assets-manifest": "^3.1.1"
       }
     },
+    "gatsby-plugin-google-gtag": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-google-gtag/-/gatsby-plugin-google-gtag-3.2.0.tgz",
+      "integrity": "sha512-NmKv9bRkdxgmkGUIpK1Tk0sgnggU6WDY+oH+nQG1+gs1yJqW6g1d3zzFKf/m0c5A/44Eqb7f+6h8PTjIL/XoVw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "minimatch": "^3.0.4"
+      }
+    },
     "gatsby-plugin-manifest": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.12.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "gatsby-image": "^2.11.0",
     "gatsby-plugin-force-trailing-slashes": "^1.0.5",
     "gatsby-plugin-gatsby-cloud": "^1.0.2",
+    "gatsby-plugin-google-gtag": "^3.2.0",
     "gatsby-plugin-manifest": "^2.12.1",
     "gatsby-plugin-offline": "^3.10.2",
     "gatsby-plugin-react-helmet": "^3.10.0",

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 (
-    <Box {...nodeStyles}>
+    <Box {...nodeStyles} a11yTitle={levelLabels[value]}>
       <Text size="small" {...textStyles}>
         {children}
       </Text>
@@ -30,51 +40,55 @@ const LevelNode = ({ levels, value, children }) => {
   );
 };
 
-const Classification = ({ levels }) => (
-  <Box
-    direction="row"
-    align="start"
-    style={{ minWidth: '380px', maxWidth: '500px' }}
-  >
+const Classification = ({ levels, serviceName }) => {
+  const supportedLevels = levels.map((item) => levelLabels[item]).join(', ');
+  return (
     <Box
-      border={{ size: 'small', side: 'bottom', color: 'light-1' }}
-      flex="grow"
       direction="row"
+      align="start"
+      style={{ minWidth: '380px', maxWidth: '500px' }}
+      a11yTitle={`Classification levels supported by ${serviceName}: ${supportedLevels}`}
     >
       <Box
-        direction="row"
-        align="center"
-        gap="xsmall"
-        justify="between"
-        pad={{ vertical: 'small' }}
+        border={{ size: 'small', side: 'bottom', color: 'light-1' }}
         flex="grow"
-        border={{ size: 'xsmall', side: 'top', color: 'light-1' }}
+        direction="row"
       >
-        <LevelNode levels={levels} value="U">
-          CUI
-        </LevelNode>
-        <LevelNode levels={levels} value="S">
-          S
-        </LevelNode>
-        <LevelNode levels={levels} value="S-SAR">
-          S//SAR
-        </LevelNode>
-        <LevelNode levels={levels} value="S-SCI">
-          S//SCI
-        </LevelNode>
-        <LevelNode levels={levels} value="TS">
-          TS
-        </LevelNode>
-        <LevelNode levels={levels} value="TS-SAR">
-          TS//SAR
-        </LevelNode>
-        <LevelNode levels={levels} value="TS-SCI">
-          TS//SCI
-        </LevelNode>
+        <Box
+          direction="row"
+          align="center"
+          gap="xsmall"
+          justify="between"
+          pad={{ vertical: 'small' }}
+          flex="grow"
+          border={{ size: 'xsmall', side: 'top', color: 'light-1' }}
+        >
+          <LevelNode levels={levels} value="U">
+            CUI
+          </LevelNode>
+          <LevelNode levels={levels} value="S">
+            S
+          </LevelNode>
+          <LevelNode levels={levels} value="S-SAR">
+            S//SAR
+          </LevelNode>
+          <LevelNode levels={levels} value="S-SCI">
+            S//SCI
+          </LevelNode>
+          <LevelNode levels={levels} value="TS">
+            TS
+          </LevelNode>
+          <LevelNode levels={levels} value="TS-SAR">
+            TS//SAR
+          </LevelNode>
+          <LevelNode levels={levels} value="TS-SCI">
+            TS//SCI
+          </LevelNode>
+        </Box>
       </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 Classification.propTypes = {
   level: PropTypes.arrayOf([
@@ -86,6 +100,7 @@ Classification.propTypes = {
     'TS-SAR',
     'TS-SCI',
   ]),
+  serviceName: PropTypes.string,
 };
 
 export default Classification;

src/components/ContactForm.js

@@ -144,6 +144,7 @@ const ContactForm = ({ onClose }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
+                  a11yTitle="Submit"
                   label="Submit"
                   style={{ width: onClose ? '250px' : '100%' }}
                 />

src/components/DownHex.js

@@ -17,6 +17,7 @@ const DownHex = () => (
         align="center"
         justify="center"
         style={{ position: 'relative', overflow: 'hidden' }}
+        aria-hidden="true"
       >
         <DtHex
           color="white"

src/components/FeedbackFooter.js

@@ -26,7 +26,11 @@ const FeedbackFooter = () => {
             pad="medium"
             gap="medium"
           >
-            <Box justify="center" align={isMobile ? 'center' : 'start'}>
+            <Box
+              justify="center"
+              align={isMobile ? 'center' : 'start'}
+              aria-hidden="true"
+            >
               <Text weight="bold">We could use your help!</Text>
               <Text size="small">
                 Send us feedback on this website or, better,
@@ -36,10 +40,12 @@ const FeedbackFooter = () => {
             </Box>
             <Box border={{ side: 'right', size: 'xsmall', color: 'light-1' }} />
             <Box justify="center" align="center">
-              <Box width="200px">
+              <Box width="200px" aria-hidden="true">
                 <SecondaryButton
                   label="CUSTOMER FEEDBACK"
                   onClick={handleToggleOpen}
+                  aria-haspopup="dialog"
+                  aria-expanded={isOpen ? true : false}
                 />
               </Box>
             </Box>

src/components/FeedbackForm.js

@@ -136,6 +136,7 @@ const FeedbackForm = ({ onClose }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
+                  a11yTitle="Submit"
                   label="Submit"
                   style={{ width: '250px' }}
                 />

src/components/app/Footer.js

@@ -18,6 +18,7 @@ const Footer = () => {
           justify="between"
           direction={isMobile ? 'column' : 'row'}
           gap="large"
+          aria-hidden="true"
         >
           <Box
             gap="medium"
@@ -33,7 +34,12 @@ const Footer = () => {
             gap="medium"
             align="center"
           >
-            <img src={C3Logo} width="117" height="117" alt="C3I&N" />
+            <img
+              src={C3Logo}
+              width="117"
+              height="117"
+              alt="C3I & Networks Directorate logo"
+            />
             <AFLogo height="117" />
           </Box>
         </Box>

src/components/app/Header.js

 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 = [
+  <SkipLink
+    id="main-content"
+    label="SKIP TO CONTENT"
+    tabIndex={1}
+    color="black"
+    responsive={true}
+  />,
+];
 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}
                       >
                         <Box
                           as="span"
@@ -85,6 +103,10 @@ const Header = ({ transparent }) => {
                         </Box>
                       </Link>
                     </Box>
+                    <SkipLinks
+                      children={skipLinkList}
+                      messages={{ skipTo: undefined }}
+                    />
                     <Nav sticky={isFixed} />
                   </Box>
                 </Column>

src/components/app/Nav.js

@@ -25,7 +25,13 @@ const Nav = ({ sticky }) => {
 
   return (
     <>
-      {isMobile && <Button icon={<Menu />} onClick={handleToggleMenu} />}
+      {isMobile && (
+        <Button
+          icon={<Menu />}
+          onClick={handleToggleMenu}
+          a11yTitle="Primary navigation menu"
+        />
+      )}
       {!isMobile && (
         <Box
           as="nav"
@@ -82,6 +88,9 @@ const Nav = ({ sticky }) => {
                   onClick={handleToggleMenu}
                   color={menuOpen ? 'black' : 'white'}
                   style={{ textTransform: 'uppercase' }}
+                  aria-expanded={menuOpen ? true : false}
+                  tabIndex={0}
+                  a11yTitle="available services"
                 >
                   <Box
                     direction="row"

src/components/core/PrimaryButton.js

@@ -25,7 +25,7 @@ const PrimaryButton = ({ label, ...rest }) => (
         <Text size="small" weight="bold">
           {label}
         </Text>{' '}
-        <FormNext color="white" />
+        <FormNext color="white" aria-hidden="true" />
       </Box>
     </Button>
   </ThemeContext.Extend>

src/components/core/SecondaryButton.js

@@ -32,7 +32,7 @@ const SecondaryButton = ({ label, ...rest }) => (
         <Text size="small" weight="bold" color="black">
           {label}
         </Text>{' '}
-        <FormNext color="accent-1" />
+        <FormNext color="accent-1" aria-hidden="true" />
       </Box>
     </Button>
   </ThemeContext.Extend>

src/components/hero/Hero.js

-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import Img from 'gatsby-image';
-import { Box, Heading, Text, ThemeContext } from 'grommet';
-import { FormPrevious } from 'grommet-icons';
+import {
+  Box,
+  Heading,
+  Text,
+  Button,
+  ThemeContext,
+  ResponsiveContext,
+} from 'grommet';
+import { FormPrevious, StatusGoodSmall } from 'grommet-icons';
 import DownHex from '../DownHex';
 import { Container, Column } from '../layout';
 import { PrimaryButton } from '../core';
@@ -21,40 +28,21 @@ const SlideImage = ({ image }) => (
   <Img fluid={image.childImageSharp.fluid} style={abs} />
 );
 
-const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
-  const thinFont = {
-    level: {
-      1: {
-        font: { weight: '300' },
-        small: { size: '100px', height: '100px' },
-        medium: { size: '100px', height: '100px' },
-        large: { size: '100px', height: '100px' },
-        xlarge: { size: '100px', height: '100px' },
-      },
-    },
+const Slide = ({ title, subtitle, core, cta, slug, logo, isMobile, size }) => {
+  const headingSizes = {
+    xsmall: { fontSize: '40px', lineHeight: '40px' },
+    small: { fontSize: '40px', lineHeight: '40px' },
+    medium: { fontSize: '60px', lineHeight: '60px', maxWidth: '600px' },
+    large: { fontSize: '80px', lineHeight: '80px' },
+    xlarge: { fontSize: '80px', lineHeight: '80px' },
   };
 
-  const heavyFont = {
-    level: {
-      1: {
-        small: { size: '80px', height: '80px' },
-        medium: { size: '80px', height: '80px' },
-        large: { size: '80px', height: '80px' },
-        xlarge: { size: '80px', height: '80px' },
-      },
-    },
-  };
-
-  const headingTheme = title === 'Summit' ? thinFont : heavyFont;
-
   return (
     <Box
       align="start"
       justify="center"
-      border={{ color: 'red' }}
-      background="green"
-      height="100%"
-      pad={{ top: '80px' }}
+      fill="vertical"
+      pad={{ top: isMobile ? '0' : '80px' }}
     >
       <Box width="large" gap="medium" style={{ position: 'relative' }}>
         {core && (
@@ -83,13 +71,21 @@ const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
         )}
         <Box gap="medium">
           {!logo && (
-            <ThemeContext.Extend value={{ heading: headingTheme }}>
-              <Heading margin="none">{title}</Heading>
-            </ThemeContext.Extend>
+            <Heading
+              level={1}
+              margin="none"
+              responsive={false}
+              style={headingSizes[size]}
+            >
+              {title}
+            </Heading>
           )}
           {logo && (
-            <Box width="medium">
-              <Img fluid={logo.childImageSharp.fluid} />
+            <Box style={{ maxWidth: '600px', maxHeight: '250px' }}>
+              <Img
+                fluid={logo.childImageSharp.fluid}
+                imgStyle={{ objectFit: 'contain' }}
+              />
             </Box>
           )}
           {subtitle && (
@@ -104,7 +100,12 @@ const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
         </Box>
         {cta && (
           <Box direction="row" justify="start" pad={{ vertical: 'medium' }}>
-            <PrimaryButton label={cta} href={slug} style={{ width: '300px' }} />
+            <PrimaryButton
+              label={cta}
+              href={slug}
+              style={{ width: '300px' }}
+              a11yTitle={`Learn more about ${title}`}
+            />
           </Box>
         )}
       </Box>
@@ -112,6 +113,86 @@ const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
   );
 };
 
+const HeroNav = ({ nodes, index, onSelect }) => (
+  <Box
+    style={{ position: 'absolute', right: '50px', bottom: '50px' }}
+    width="small"
+    a11yTitle="carousel"
+    role="navigation"
+    tabIndex={0}
+  >
+    {nodes.map((node, i) => (
+      <Box
+        key={node.name}
+        height="80px"
+        background="black"
+        border={{ color: 'dark-1', size: 'xsmall' }}
+        onClick={() => onSelect(i)}
+        style={{ position: 'relative' }}
+        role="button"
+      >
+        <Img
+          style={{ ...abs, opacity: index === i ? '100%' : '0' }}
+          fluid={node.thumb.childImageSharp.fluid}
+        />
+
+        <Box
+          style={abs}
+          direction="row"
+          gap="small"
+          pad="small"
+          align="center"
+          a11yTitle={`Slide ${i + 1}: ${node.name}`}
+        >
+          {index !== i && <FormPrevious color="accent-1" />}
+          {node.thumblogo && (
+            <Img
+              fluid={node.thumblogo.childImageSharp.fluid}
+              imgStyle={{ objectFit: 'contain' }}
+              style={{ width: '80px' }}
+            />
+          )}
+          {!node.thumblogo && (
+            <Text
+              size="small"
+              weight="bold"
+              style={{ textTransform: 'uppercase' }}
+            >
+              {node.name}
+            </Text>
+          )}
+        </Box>
+      </Box>
+    ))}
+  </Box>
+);
+
+const MobileHeroNav = ({ nodes, index, onSelect }) => (
+  <Box
+    a11yTitle="carousel"
+    role="navigation"
+    tabIndex={0}
+    direction="row"
+    justify="center"
+    gap="medium"
+    style={{ position: 'absolute', bottom: '40px', left: '0', right: '0' }}
+  >
+    {nodes.map((node, i) => (
+      <Button
+        key={node.name}
+        icon={
+          <StatusGoodSmall
+            color={index === i ? 'accent-2' : 'accent-1'}
+            size={index === i ? 'medium' : 'small'}
+          />
+        }
+        a11yTitle={`Slide ${i + 1}: ${node.name}`}
+        onClick={() => onSelect(i)}
+      />
+    ))}
+  </Box>
+);
+
 const Hero = () => {
   const {
     allHeroYaml: { nodes },
@@ -159,6 +240,10 @@ const Hero = () => {
     }
   `);
 
+  const size = useContext(ResponsiveContext);
+
+  const isMobile = ['xsmall', 'small'].includes(size);
+
   const [index, setIndex] = useState(0);
 
   const handleSetSlide = (i) => {
@@ -171,65 +256,24 @@ const Hero = () => {
       style={{ position: 'relative', minHeight: '500px' }}
       background="brand"
     >
-      <Container>
-        <Column>
+      <Container fill="vertical">
+        <Column fill="vertical" aria-live="polite">
           {nodes
             .filter((node) => node.index === index)
             .map((node) => (
               <React.Fragment key={index}>
                 <SlideImage image={node.image} />
-                <Slide key={index} {...node} />
+                <Slide key={index} isMobile={isMobile} size={size} {...node} />
               </React.Fragment>
             ))}
         </Column>
       </Container>
-
-      <Box
-        style={{ position: 'absolute', right: '50px', bottom: '50px' }}
-        width="small"
-      >
-        {nodes.map((node, i) => (
-          <Box
-            key={node.name}
-            height="80px"
-            background="black"
-            border={{ color: 'dark-1', size: 'xsmall' }}
-            onClick={() => handleSetSlide(i)}
-            style={{ position: 'relative' }}
-          >
-            <Img
-              style={{ ...abs, opacity: index === i ? '100%' : '0' }}
-              fluid={node.thumb.childImageSharp.fluid}
-            />
-
-            <Box
-              style={abs}
-              direction="row"
-              gap="small"
-              pad="small"
-              align="center"
-            >
-              {index !== i && <FormPrevious color="accent-1" />}
-              {node.thumblogo && (
-                <Img
-                  fluid={node.thumblogo.childImageSharp.fluid}
-                  objectFit="contain"
-                  style={{ width: '80px' }}
-                />
-              )}
-              {!node.thumblogo && (
-                <Text
-                  size="small"
-                  weight="bold"
-                  style={{ textTransform: 'uppercase' }}
-                >
-                  {node.name}
-                </Text>
-              )}
-            </Box>
-          </Box>
-        ))}
-      </Box>
+      {!isMobile && (
+        <HeroNav nodes={nodes} index={index} onSelect={handleSetSlide} />
+      )}
+      {isMobile && (
+        <MobileHeroNav nodes={nodes} index={index} onSelect={handleSetSlide} />
+      )}
       <DownHex />
     </Box>
   );

src/components/layout/ContentContainer.js

+import React from 'react';
+import Container from './Container';
+
+const ContentContainer = (props) => {
+  return <Container id="main-content" {...props} />;
+};
+
+export default ContentContainer;

src/components/layout/index.js

 export { default as Container } from './Container';
 export { default as Column } from './Column';
+export { default as ContentContainer } from './ContentContainer';

src/components/mega-menu/MegaMobileMenu.js

@@ -45,7 +45,7 @@ const MenuItem = ({ name, to, onNavigate }) => {
           </Link>
         </Box>
       ) : (
-        <Button onClick={() => onNavigate(name)}>
+        <Button onClick={() => onNavigate(name)} aria-haspopup="menu">
           <Box
             direction="row"
             justify="between"
@@ -56,7 +56,7 @@ const MenuItem = ({ name, to, onNavigate }) => {
             <Text weight="bold" size="small">
               {name}
             </Text>{' '}
-            <FormNext color="accent-1" />
+            <FormNext color="accent-1" aria-hidden="true" />
           </Box>
         </Button>
       )}
@@ -166,7 +166,7 @@ const MegaMobileMenu = ({ onClose }) => {
             <Button onClick={handleBack}>
               {' '}
               <Box direction="row" align="center">
-                <FormPrevious color="accent-1" />{' '}
+                <FormPrevious color="accent-1" aria-hidden="true" />{' '}
                 <Text size="small" weight="bold">
                   Back
                 </Text>
@@ -174,7 +174,7 @@ const MegaMobileMenu = ({ onClose }) => {
             </Button>
           )}
         </Box>
-        <Button icon={<Close />} onClick={onClose} />
+        <Button icon={<Close />} onClick={onClose} a11yTitle="close menu" />
       </Box>
       <Box overflow="auto" style={{ position: 'relative' }} fill>
         <MenuHome onNavigate={handleNavigate} />

src/components/pages/home/OfferAccordion.js

@@ -20,6 +20,7 @@ const OfferHeader = ({ title, icon, description, active, isMobile }) => (
     fill
     align="center"
     justify="between"
+    a11yTitle={title}
   >
     <Box direction="row" gap="medium">
       {!isMobile && <Box>{icon}</Box>}

src/components/pages/home/Solutions.js

@@ -24,7 +24,12 @@ const SolutionGroup = ({ node, basis, isMobile }) => (
       ))}
     </Box>
 
-    <CtaLink to={node.frontmatter.slug}>Learn More</CtaLink>
+    <CtaLink
+      to={node.frontmatter.slug}
+      a11yTitle={`Learn more about ${node.frontmatter.title}`}
+    >
+      Learn More
+    </CtaLink>
   </Box>
 );
 

src/components/pages/service-category/ServiceList.js

@@ -31,13 +31,21 @@ const listQuery = graphql`
 const ServiceItem = ({ node, pad }) => (
   <Box basis="1/2" pad="medium">
     <Heading level={4}>{node.frontmatter.title}</Heading>
-    <Classification levels={node.frontmatter.levels} />
+    <Classification
+      levels={node.frontmatter.levels}
+      serviceName={node.frontmatter.title}
+    />
     {/* Undo this "flex" if we don't want learn more to line up */}
     <Box flex="grow" pad={{ vertical: pad }}>
       <Paragraph fill>{node.frontmatter.excerpt || node.excerpt}</Paragraph>
     </Box>
 
-    <CtaLink to={node.frontmatter.slug}>Learn More</CtaLink>
+    <CtaLink
+      to={node.frontmatter.slug}
+      a11yTitle={`Learn more about ${node.frontmatter.title}`}
+    >
+      Learn More
+    </CtaLink>
   </Box>
 );
 
@@ -63,7 +71,12 @@ const ServiceList = ({ categories }) => {
   const isMobile = ['xsmall', 'small'].includes(size);
 
   return (
-    <Box pad={{ vertical: 'large' }} background="white" style={{ zIndex: 5 }}>
+    <Box
+      pad={{ vertical: 'large' }}
+      background="white"
+      style={{ zIndex: 5 }}
+      id="main-content"
+    >
       {catGroup.map((group, i) => (
         <Box key={categories[i]} gap="small">
           {categories.length > 1 && (