From 5b80764db4d480c85b3ae60f69c46acef7b3b6f1 Mon Sep 17 00:00:00 2001 From: Kendall Strautman <36613477+kendallstrautman@users.noreply.github.com> Date: Mon, 21 Jun 2021 09:50:59 -0700 Subject: [PATCH] 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> --- .../components/before-after-diagram/index.jsx | 4 +- .../before-after-diagram/style.module.css | 2 - website/components/footer/style.css | 7 +- .../components/hcp-callout-section/index.jsx | 10 +- .../components/use-case-cta-section/index.jsx | 1 + website/package-lock.json | 3588 +++++++++-------- website/package.json | 31 +- website/pages/_app.js | 12 +- website/pages/_document.js | 2 +- website/pages/community/index.jsx | 18 +- website/pages/downloads/index.jsx | 6 +- website/pages/home/content.json | 44 +- website/pages/home/index.jsx | 13 +- website/pages/not-found/index.jsx | 4 +- .../use-cases/data-encryption/content.json | 2 + .../pages/use-cases/data-encryption/index.jsx | 12 +- .../identity-based-access/content.json | 31 +- .../use-cases/identity-based-access/index.jsx | 11 +- .../use-cases/secrets-management/content.json | 23 +- .../use-cases/secrets-management/index.jsx | 20 +- 20 files changed, 2062 insertions(+), 1779 deletions(-) diff --git a/website/components/before-after-diagram/index.jsx b/website/components/before-after-diagram/index.jsx index cc51e8a3d59dd..a2aaaa8900f75 100644 --- a/website/components/before-after-diagram/index.jsx +++ b/website/components/before-after-diagram/index.jsx @@ -29,7 +29,7 @@ function BeforeAfterDiagram(props) {
{beforeHeadline && ( -

{afterHeadline && ( -

-
-

{header}

-
- + {header ? ( +
+

{header}

+
+ ) : null}

{title}

@@ -28,6 +29,7 @@ export default function HcpCalloutSection({
-
+ ) } diff --git a/website/pages/not-found/index.jsx b/website/pages/not-found/index.jsx index 3dfbff4ed369b..79a7b91af5f68 100644 --- a/website/pages/not-found/index.jsx +++ b/website/pages/not-found/index.jsx @@ -16,7 +16,7 @@ export default function NotFound() { }, []) return ( -
+

Page Not Found

We‘re sorry but we can‘t find the page you‘re looking @@ -27,6 +27,6 @@ export default function NotFound() { Back to Home

-
+ ) } diff --git a/website/pages/use-cases/data-encryption/content.json b/website/pages/use-cases/data-encryption/content.json index ee2483471ac33..001d9734f0ccb 100644 --- a/website/pages/use-cases/data-encryption/content.json +++ b/website/pages/use-cases/data-encryption/content.json @@ -2,12 +2,14 @@ "beforeAfterDiagram": { "beforeImage": { "url": "/img/use-cases/data-encryption/data-encryption-challenge.png", + "alt": "Graphic — data sharing to keys broken by bad actor", "format": "svg" }, "beforeHeadline": "The Challenge", "beforeContent": "All application data should be encrypted, but deploying a cryptography and key management infrastructure is expensive, hard to develop against, and not cloud or multi-datacenter friendly", "afterImage": { "url": "/img/use-cases/data-encryption/data-encryption-solution.png", + "alt": "Graphic — data sharing between keys safely with Vault in middle", "format": "svg" }, "afterHeadline": "The Solution", diff --git a/website/pages/use-cases/data-encryption/index.jsx b/website/pages/use-cases/data-encryption/index.jsx index 4bdcf733afa06..8b76b8e6db731 100644 --- a/website/pages/use-cases/data-encryption/index.jsx +++ b/website/pages/use-cases/data-encryption/index.jsx @@ -18,7 +18,7 @@ export async function getStaticProps() { export default function DataEncryptionUseCase({ content }) { return ( -
+
{/* Header / Buttons */}
@@ -53,6 +59,6 @@ export default function DataEncryptionUseCase({ content }) { -

+ ) } diff --git a/website/pages/use-cases/identity-based-access/content.json b/website/pages/use-cases/identity-based-access/content.json index fb00412285610..7549cda81676b 100644 --- a/website/pages/use-cases/identity-based-access/content.json +++ b/website/pages/use-cases/identity-based-access/content.json @@ -1,12 +1,14 @@ { "beforeAfterDiagram": { "beforeImage": { - "url": "/img/use-cases/identity-based-access/identity-based-access-challenge.png" + "url": "/img/use-cases/identity-based-access/identity-based-access-challenge.png", + "alt": "Grpahic — different identity icons around cloud tool icons" }, "beforeHeadline": "The Challenge", "beforeContent": "With the proliferation of different clouds, services, and systems all with their own identity providers, organizations need a way to manage identity sprawl", "afterImage": { - "url": "/img/use-cases/identity-based-access/identity-based-access-solution.png" + "url": "/img/use-cases/identity-based-access/identity-based-access-solution.png", + "alt": "Graphic — organized idenetiy icons in boxes outline with vault icon" }, "afterHeadline": "The Solution", "afterContent": "Vault merges identities across providers and uses a unified ACL system to broker access to systems and secrets" @@ -20,35 +22,35 @@ "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/1540418681-kubernetes.png", - "alt": "Kubernetes" + "alt": "Kubernetes logo" }, { "url": "https://www.datocms-assets.com/2885/1619808232-nomad-logomark-color.svg", - "alt": "Nomad" + "alt": "Nomad logo" }, { "url": "https://www.datocms-assets.com/2885/1556657783-oktalogo.svg", - "alt": "Okta" + "alt": "Okta logo" }, { "url": "https://www.datocms-assets.com/2885/1608658344-pivotalcf.png", - "alt": "PivotalCF" + "alt": "PivotalCF logo" }, { "url": "https://www.datocms-assets.com/2885/1506540149-black.svg", - "alt": "SSH" + "alt": "SSH logo" }, { "url": "https://www.datocms-assets.com/2885/1608143270-ellipsis.png", @@ -63,7 +65,8 @@ "textSide": "right" }, "image": { - "url": "/img/use-cases/identity-based-access/entities.png" + "url": "/img/use-cases/identity-based-access/entities.png", + "alt": "Vault UI showing entity entries" } }, { @@ -72,7 +75,8 @@ "content": "Require multiple Identity Entities or members of Identity Groups to authorize an requested action." }, "image": { - "url": "/img/use-cases/identity-based-access/control-groups.png" + "url": "/img/use-cases/identity-based-access/control-groups.png", + "alt": "'Control Groups' UI prompting authorization" } }, { @@ -93,7 +97,8 @@ "textSide": "right" }, "image": { - "url": "/img/use-cases/identity-based-access/admin.png" + "url": "/img/use-cases/identity-based-access/admin.png", + "alt": "Vault UI showing admin members entries" } }, { diff --git a/website/pages/use-cases/identity-based-access/index.jsx b/website/pages/use-cases/identity-based-access/index.jsx index 9164867e1cb33..835955f1d1cbc 100644 --- a/website/pages/use-cases/identity-based-access/index.jsx +++ b/website/pages/use-cases/identity-based-access/index.jsx @@ -18,7 +18,7 @@ export async function getStaticProps() { export default function DataEncryptionUseCase({ content }) { return ( -
+
{/* Header / Buttons */}
-
@@ -53,6 +58,6 @@ export default function DataEncryptionUseCase({ content }) { -

+ ) } diff --git a/website/pages/use-cases/secrets-management/content.json b/website/pages/use-cases/secrets-management/content.json index addbe2c795157..5f290c908fae8 100644 --- a/website/pages/use-cases/secrets-management/content.json +++ b/website/pages/use-cases/secrets-management/content.json @@ -2,12 +2,14 @@ "beforeAfterDiagram": { "beforeImage": { "url": "/img/use-cases/secrets-management/secrets-mgmt-challenge.png", + "alt": "Graphic — keys connecting with providers", "format": "svg" }, "beforeHeadline": "The Challenge", "beforeContent": "Secrets for applications and systems need to be centralized and static IP-based solutions don't scale in dynamic environments with frequently changing applications and machines", "afterImage": { "url": "/img/use-cases/secrets-management/secrets-mgmt-solution.png", + "alt": "Graphic — keys connecting with providers through vault", "format": "png" }, "afterHeadline": "The Solution", @@ -20,7 +22,8 @@ "content": "Dynamically create, revoke, and rotate secrets programmatically." }, "image": { - "url": "/img/use-cases/secrets-management/dynamic_secrets@3x.png" + "url": "/img/use-cases/secrets-management/dynamic_secrets@3x.png", + "alt": "Vault UI with AWS config" } }, { @@ -43,39 +46,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/1619808181-conusul-attributedcolor.svg", - "alt": "Consul" + "alt": "Consul 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/1539818112-postgresql.svg", - "alt": "PostgreSql" + "alt": "PostgreSql 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/1608143270-ellipsis.png", - "alt": "ellipsis icon" + "alt": "ellipsis icon logo" } ] }, diff --git a/website/pages/use-cases/secrets-management/index.jsx b/website/pages/use-cases/secrets-management/index.jsx index 016d46c0570e7..8e4d51af4e2a0 100644 --- a/website/pages/use-cases/secrets-management/index.jsx +++ b/website/pages/use-cases/secrets-management/index.jsx @@ -19,7 +19,7 @@ export async function getStaticProps() { export default function SecretsManagmentUseCase({ content }) { return ( -
+
{/* Header / Buttons */} @@ -35,7 +35,12 @@ export default function SecretsManagmentUseCase({ content }) { url="/downloads" theme={{ brand: 'vault' }} /> -
@@ -54,13 +59,11 @@ export default function SecretsManagmentUseCase({ content }) { features={[ { logo: { - url: - 'https://www.datocms-assets.com/2885/1539889072-1524097013-adobe-white-1.svg', + url: 'https://www.datocms-assets.com/2885/1539889072-1524097013-adobe-white-1.svg', alt: 'Adobe Logo', }, image: { - url: - 'https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&fm=jpg&h=312.5&q=80&w=500', + url: 'https://www.datocms-assets.com/2885/1520367019-dan_mcteer_adobe_hashiconf2017.jpg?fit=crop&fm=jpg&h=312.5&q=80&w=500', alt: 'Dan McTeer at HashiConf 2017', }, heading: @@ -69,8 +72,7 @@ export default function SecretsManagmentUseCase({ content }) { 'Securing secrets and application data is a complex task for globally distributed organizations. For Adobe, managing secrets for over 20 products across 100,000 hosts, four regions, and trillions of transactions annually requires a different approach altogether.', link: { text: 'Read Case Study', - url: - 'https://www.hashicorp.com/resources/adobe-100-trillion-transactions-hashicorp-vault', + url: 'https://www.hashicorp.com/resources/adobe-100-trillion-transactions-hashicorp-vault', type: 'outbound', }, }, @@ -86,6 +88,6 @@ export default function SecretsManagmentUseCase({ content }) { - + ) }