feat(website): A11y updates (#11869)

* adds lang attribute * fixes: empty anchor tag * adds alt attributes * alt tag logo grid updates * fix footer contrast color * only render header if it exists * adds `main` element to page * testing pre-releases * fix: button aria-label updates * chore: update deps * fix: adds `main` element to all pages * chore: formatting * fix: adds alts to use-cases page * chore: update headline element * chore: adds alt text * fix: adds alt tags * style: fix height issue * fix: use h1 at top of page * fix: remove main to avoid duplicate tag * chore: fix deps * main is already defined in docs page component * Update website/components/footer/style.css Co-authored-by: Jimmy Merritello <7191639+jmfury@users.noreply.github.com> Co-authored-by: Jimmy Merritello <7191639+jmfury@users.noreply.github.com>
hashicorp · Jun 21, 2021 · 5b80764 · 5b80764
1 parent 72c18c6
commit 5b80764
Show file tree

Hide file tree

Showing 20 changed files with 2,062 additions and 1,779 deletions.
diff --git a/website/components/before-after-diagram/index.jsx b/website/components/before-after-diagram/index.jsx
@@ -29,7 +29,7 @@ function BeforeAfterDiagram(props) {
           </span>
           <div>
             {beforeHeadline && (
-              <h3
+              <h2
                 className={s.contentHeadline}
                 dangerouslySetInnerHTML={{
                   __html: beforeHeadline,
@@ -59,7 +59,7 @@ function BeforeAfterDiagram(props) {
           </span>
           <div>
             {afterHeadline && (
-              <h3
+              <h2
                 className={s.contentHeadline}
                 dangerouslySetInnerHTML={{
                   __html: afterHeadline,

diff --git a/website/components/before-after-diagram/style.module.css b/website/components/before-after-diagram/style.module.css
@@ -101,8 +101,6 @@
   }
 
   @media (--medium-up) {
-    height: unset;
-
     & div {
       height: unset;
     }

diff --git a/website/components/footer/style.css b/website/components/footer/style.css
@@ -10,14 +10,13 @@
   }
 
   & a {
-    color: black;
-    opacity: 0.5;
-    transition: opacity 0.25s ease;
+    color: var(--gray-3);
+    transition: color 0.25s ease;
     cursor: pointer;
     display: inline-block;
 
     &:hover {
-      opacity: 1;
+      color: black;
     }
   }
 

diff --git a/website/components/hcp-callout-section/index.jsx b/website/components/hcp-callout-section/index.jsx
@@ -12,10 +12,11 @@ export default function HcpCalloutSection({
 }) {
   return (
     <div className={styles.hcpCalloutSection} id={id}>
-      <div className={styles.header}>
-        <h2>{header}</h2>
-      </div>
-
+      {header ? (
+        <div className={styles.header}>
+          <h2>{header}</h2>
+        </div>
+      ) : null}
       <div className={styles.content}>
         <div className={styles.info}>
           <h1>{title}</h1>
@@ -28,6 +29,7 @@ export default function HcpCalloutSection({
                 <div key={link.text}>
                   <Button
                     title={link.text}
+                    label="Learn more — HCP Vault"
                     linkType={link.type}
                     url={link.url}
                     theme={{ variant, brand: 'neutral', background: 'light' }}

diff --git a/website/components/use-case-cta-section/index.jsx b/website/components/use-case-cta-section/index.jsx
@@ -8,6 +8,7 @@ export default function UseCaseCtaSection() {
         <Button
           url="/downloads"
           title="Download"
+          label="Download CLI"
           linkType="download"
           theme={{
             variant: 'primary',

diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -5,27 +5,28 @@
   "author": "HashiCorp",
   "dependencies": {
     "@hashicorp/mktg-global-styles": "3.0.2",
-    "@hashicorp/nextjs-scripts": "18.3.1",
+    "@hashicorp/mktg-logos": "1.2.0",
+    "@hashicorp/nextjs-scripts": "18.4.1",
     "@hashicorp/react-alert-banner": "6.1.1",
-    "@hashicorp/react-button": "5.0.1",
-    "@hashicorp/react-case-study-slider": "6.0.2",
+    "@hashicorp/react-button": "5.1.0",
+    "@hashicorp/react-case-study-slider": "6.1.0",
     "@hashicorp/react-code-block": "4.0.1",
     "@hashicorp/react-content": "7.0.1",
-    "@hashicorp/react-docs-page": "13.3.1",
-    "@hashicorp/react-featured-slider": "4.0.2",
-    "@hashicorp/react-hashi-stack-menu": "2.0.3",
+    "@hashicorp/react-docs-page": "13.4.0",
+    "@hashicorp/react-featured-slider": "4.1.0",
+    "@hashicorp/react-hashi-stack-menu": "2.0.4",
     "@hashicorp/react-head": "3.0.2",
-    "@hashicorp/react-hero": "7.2.1",
+    "@hashicorp/react-hero": "7.3.0",
     "@hashicorp/react-image": "4.0.1",
     "@hashicorp/react-inline-svg": "6.0.1",
-    "@hashicorp/react-logo-grid": "4.0.1",
+    "@hashicorp/react-logo-grid": "4.1.0",
     "@hashicorp/react-markdown-page": "1.2.0",
-    "@hashicorp/react-product-downloads-page": "2.0.3",
+    "@hashicorp/react-product-downloads-page": "2.1.0",
     "@hashicorp/react-section-header": "5.0.2",
-    "@hashicorp/react-subnav": "8.2.1",
+    "@hashicorp/react-subnav": "8.3.0",
     "@hashicorp/react-tabs": "6.0.1",
-    "@hashicorp/react-text-split": "3.1.1",
-    "@hashicorp/react-text-splits": "3.0.0",
+    "@hashicorp/react-text-split": "3.2.0",
+    "@hashicorp/react-text-splits": "3.1.0",
     "@hashicorp/react-use-cases": "3.0.2",
     "@hashicorp/react-vertical-text-block-list": "6.0.2",
     "next": "10.2.2",
@@ -36,11 +37,11 @@
     "tippy.js": "4.0.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.6",
+    "@types/react": "^17.0.11",
     "dart-linkcheck": "^2.0.15",
     "husky": "^4.3.8",
-    "inquirer": "^8.1.0",
-    "prettier": "^2.3.0"
+    "inquirer": "^8.1.1",
+    "prettier": "^2.3.1"
   },
   "husky": {
     "hooks": {

diff --git a/website/pages/_app.js b/website/pages/_app.js
@@ -33,26 +33,22 @@ export default function App({ Component, pageProps }) {
         image="https://www.vaultproject.io/img/og-image.png"
         icon={[
           {
-            href:
-              'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=16&w=16',
+            href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=16&w=16',
             type: 'image/png',
             sizes: '16x16',
           },
           {
-            href:
-              'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=32&w=32',
+            href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=32&w=32',
             type: 'image/png',
             sizes: '32x32',
           },
           {
-            href:
-              'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=96&w=96',
+            href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=96&w=96',
             type: 'image/png',
             sizes: '96x96',
           },
           {
-            href:
-              'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=192&w=192',
+            href: 'https://www.datocms-assets.com/2885/1597163356-vault-favicon.png?h=192&w=192',
             type: 'image/png',
             sizes: '192x192',
           },

diff --git a/website/pages/_document.js b/website/pages/_document.js
@@ -9,7 +9,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <Html>
+      <Html lang="en">
         <Head>
           <HashiHead />
         </Head>

diff --git a/website/pages/community/index.jsx b/website/pages/community/index.jsx
@@ -5,39 +5,35 @@ import HashiHead from '@hashicorp/react-head'
 
 function CommunityPage() {
   return (
-    <div id="community">
+    <main id="community">
       <HashiHead is={Head} title="Community | Vault by HashiCorp" />
       <SectionHeader
         headline="Community"
         description="Vault is an open source project with a growing community. There are active, dedicated users willing to help you through various mediums."
-        use_h1={true}
+        useH1={true}
       />
       <VerticalTextBlockList
         product="vault"
         data={[
           {
             header: 'Discussion List',
-            body:
-              '<a href="https://discuss.hashicorp.com/c/vault">Vault Community Forum</a>',
+            body: '<a href="https://discuss.hashicorp.com/c/vault">Vault Community Forum</a>',
           },
           {
             header: 'Bug Tracker',
-            body:
-              '<a href="https://github.com/hashicorp/vault/issues">Issue tracker on GitHub</a> for reporting bugs. Use IRC or the mailing list for general help.',
+            body: '<a href="https://github.com/hashicorp/vault/issues">Issue tracker on GitHub</a> for reporting bugs. Use IRC or the mailing list for general help.',
           },
           {
             header: 'Training',
-            body:
-              '<a href="https://www.hashicorp.com/training">Paid HashiCorp</a> training courses are available in a city near you. Private training courses are also available.',
+            body: '<a href="https://www.hashicorp.com/training">Paid HashiCorp</a> training courses are available in a city near you. Private training courses are also available.',
           },
           {
             header: 'Certification',
-            body:
-              'Learn more about our <a href="https://www.hashicorp.com/certification/">Cloud Engineer Certification program</a> and <a href="https://www.hashicorp.com/certification/vault-associate/">HashiCorp&apos;s Security Automation Certification</a> exams.',
+            body: 'Learn more about our <a href="https://www.hashicorp.com/certification/">Cloud Engineer Certification program</a> and <a href="https://www.hashicorp.com/certification/vault-associate/">HashiCorp&apos;s Security Automation Certification</a> exams.',
           },
         ]}
       />
-    </div>
+    </main>
   )
 }
 

diff --git a/website/pages/downloads/index.jsx b/website/pages/downloads/index.jsx
@@ -23,13 +23,11 @@ export default function DownloadsPage(staticProps) {
         },
         {
           label: 'Getting Started with Vault UI',
-          href:
-            'http://learn.hashicorp.com/collections/vault/getting-started-ui',
+          href: 'http://learn.hashicorp.com/collections/vault/getting-started-ui',
         },
         {
           label: 'Vault on HCP',
-          href:
-            'http://learn.hashicorp.com/collections/vault/getting-started-ui',
+          href: 'http://learn.hashicorp.com/collections/vault/getting-started-ui',
         },
         {
           label: 'View all Vault tutorials',

diff --git a/website/pages/home/content.json b/website/pages/home/content.json
@@ -5,13 +5,13 @@
       "format": "svg"
     },
     "beforeHeadline": "Static Infrastructure",
-    "beforeContent": "Datacenters with inherently high-trust networks with clear network perimeters.\n\n#### Traditional Approach\n\n- High trust networks\n- A clear network perimeter\n- Security enforced by IP Address",
+    "beforeContent": "Datacenters with inherently high-trust networks with clear network perimeters.\n\n <h4 class=\"g-type-label\">Traditional Approach </h4>\n\n- High trust networks\n- A clear network perimeter\n- Security enforced by IP Address",
     "afterImage": {
       "url": "https://www.datocms-assets.com/2885/1579635892-dynamic-infrastructure.svg",
       "format": "svg"
     },
     "afterHeadline": "Dynamic Infrastructure",
-    "afterContent": "Multiple clouds and private datacenters without a clear network perimeter.\n\n#### Vault Approach\n\n\n- Low-trust networks in public clouds\n- Unknown network perimeter across clouds\n- Security enforced by Identity"
+    "afterContent": "Multiple clouds and private datacenters without a clear network perimeter.\n\n <h4 class=\"g-type-label\">Vault Approach</h4> \n\n\n- Low-trust networks in public clouds\n- Unknown network perimeter across clouds\n- Security enforced by Identity"
   },
   "principles": [
     {
@@ -34,36 +34,40 @@
       "logoGrid": [
         {
           "url": "https://www.datocms-assets.com/2885/1566919170-aws.svg",
-          "alt": "AWS"
+          "alt": "AWS logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1539799149-azure-stacked-color.svg",
-          "alt": "Microsoft Azure"
+          "alt": "Microsoft Azure logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1513617132-google-cloud.svg",
-          "alt": "Google Cloud"
+          "alt": "Google Cloud logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1556657783-oktalogo.svg",
-          "alt": "Okta"
+          "alt": "Okta logo"
         },
-        { "url": "https://www.datocms-assets.com/2885/1539817287-cf.svg" },
+        {
+          "url": "https://www.datocms-assets.com/2885/1539817287-cf.svg",
+          "alt": "Cloud Foundary logo"
+        },
+
         {
           "url": "https://www.datocms-assets.com/2885/1521842502-alibaba.png",
-          "alt": "Alibaba Cloud"
+          "alt": "Alibaba Cloud logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1506540149-black.svg",
-          "alt": "SSH"
+          "alt": "SSH logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1540418681-kubernetes.png",
-          "alt": "Kubernetes"
+          "alt": "Kubernetes logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1622654359-githublogo.png",
-          "alt": "GitHub"
+          "alt": "GitHub logo"
         }
       ]
     },
@@ -75,39 +79,39 @@
       "logoGrid": [
         {
           "url": "https://www.datocms-assets.com/2885/1506540090-color.svg",
-          "alt": "MySQL"
+          "alt": "MySQL logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1506540114-color.svg",
-          "alt": "Cassandra"
+          "alt": "Cassandra logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1566919186-oracle.svg",
-          "alt": "Oracle"
+          "alt": "Oracle logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1566919170-aws.svg",
-          "alt": "AWS"
+          "alt": "AWS logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1506540175-color.svg",
-          "alt": "MongoDB"
+          "alt": "MongoDB logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1619808181-conusul-attributedcolor.svg",
-          "alt": "Consul"
+          "alt": "Consul logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1539817686-microsoft-sql-server.svg",
-          "alt": "Microsoft SQL"
+          "alt": "Microsoft SQL logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1539818112-postgresql.svg",
-          "alt": "PostgreSql"
+          "alt": "PostgreSql logo"
         },
         {
           "url": "https://www.datocms-assets.com/2885/1539799149-azure-stacked-color.svg",
-          "alt": "Microsoft Azure"
+          "alt": "Microsoft Azure logo"
         }
       ]
     }