Feat/accessibility-structure: added new pages and card previews for accessibility hub

aries-site/src/data/structures/foundation.js

@@ -1,3 +1,11 @@
+import {
+  AccessibilityTestingPreview,
+  AccessibilityProductVideoPreview,
+  AccessibilityDesignAndDevelopmentPreview,
+  AccessibilityGovernmentPreview,
+  AccessibilityGuidePreview,
+} from '../../examples/cardPreviews';
+
 export const foundation = [
   {
     name: 'Accessibility',
@@ -18,11 +26,12 @@ export const foundation = [
     seoDescription: `Accessibility is central to the HPE Design System and 
     ensures that HPE applications are usable by as many people as possible.`,
     sections: [
-      'Accessibility in Design', 
-      'Accessibility in Development',
+      'Accessibility in Design and Development',
       'Designer and Software Developer Guides',
-      'Accessibile Product Design Videos',
+      'Accessible Product Design Videos',
+      'Testing for Accessibility',
       'Government Standards and Regulations',
+      'External Resources',
     ],
     tags: [
       'accessibility',
@@ -41,6 +50,119 @@ export const foundation = [
       'testing tools',
     ],
   },
+  {
+    name: 'Accessibility in Design and Development',
+    category: 'Philosophy',
+    cardOrder: 4,
+    description: `More information regarding accessibility specifically with
+    regards to HPE's design and development process and lifecycle.`,
+    preview: {
+      component: () => <AccessibilityDesignAndDevelopmentPreview />,
+      background: 'background-back',
+    },
+    seoDescription: `More information regarding accessibility specifically with
+    regards to HPE's design and development process and lifecycle.`,
+    sections: [
+      'Accessibility in Design', 
+      'Accessibility in Development',
+    ],
+    tags: [
+      'accessibility',
+      'product accessibility',
+      'accessible design',
+      'accessible products',
+    ],
+  },
+  {
+    name: 'Designer and Software Developer Guides',
+    category: 'Philosophy',
+    cardOrder: 5,
+    description: `Guides written by the Product and Accessibility Office to help
+    HPE designers and developers build more inclusive products.`,
+    preview: {
+      component: () => <AccessibilityGuidePreview />,
+      background: 'background-back',
+    },
+    seoDescription: `Guides written by the Product and Accessibility Office to help
+    HPE designers and developers build more inclusive products.`,
+    tags: [
+      'accessibility',
+      'accessibility resources',
+      'product accessibility',
+      'accessible design',
+      'accessible products',
+    ],
+  },
+  {
+    name: 'Accessible Product Design Videos',
+    category: 'Philosophy',
+    cardOrder: 6,
+    description: `Short educational videos from HPE explaining basic accessible 
+    design principles in software and web technologies.`,
+    preview: {
+      component: () => <AccessibilityProductVideoPreview />,
+      background: 'background-back',
+    },
+    seoDescription: `A collection of short educational videos from HPE explaining 
+    basic accessible design principles in software and web technologies.`,
+    tags: [
+      'accessibility',
+      'accessibility resources',
+      'product accessibility',
+      'accessible design',
+      'accessible products',
+    ],
+  },
+  {
+    name: 'Testing for Accessibility',
+    category: 'Philosophy',
+    cardOrder: 7,
+    description: `Testing tools and resources to help ensure full coverage
+    for accessibility on HPE products for a range of disabilities.`,
+    preview: {
+      component: () => <AccessibilityTestingPreview />,
+      background: 'background-back',
+    },
+    seoDescription: `Testing tools and resources to help ensure full coverage
+    for accessibility on HPE products for a range of disabilities.`,
+    tags: [
+      'accessibility',
+      'product accessibility',
+      'WCAG',
+      'WAVE',
+      'Web Accessibility Evaluation Tool',
+      'plugins',
+      'color contrast',
+      'accessibility tools',
+      'ANDI',
+      'colorblind',
+      'testing tools',
+      'simulator',
+    ],
+  },
+  {
+    name: 'Government Standards and Regulations',
+    category: 'Philosophy',
+    cardOrder: 8,
+    description: `A list of national and international accessibility laws and 
+    regulations that relate to HPE's accessibility guidance and principles.`,
+    preview: {
+      component: () => <AccessibilityGovernmentPreview />,
+      background: 'background-back',
+    },
+    seoDescription: `A list of national and international accessibility laws and 
+    regulations that relate to HPE's accessibility guidance and principles.`,
+    tags: [
+      'accessibility',
+      'accessibility resources',
+      'product accessibility',
+      'accessible design',
+      'accessible products',
+      'accessiblility laws',
+      'government standards and regulations',
+      'WCAG',
+    ],
+  },
   {
     name: 'Our Brand',
     category: 'Assets',

aries-site/src/examples/cardPreviews/accessibility/design-and-development.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Box } from 'grommet';
+import { Code, Desktop } from 'grommet-icons';
+
+export const AccessibilityDesignAndDevelopmentPreview = () => (
+    <Box direction="row" gap="small">
+        <Desktop color="text-strong" size="xlarge" />
+        <Code color="text-strong" size="xlarge" />
+    </Box>
+);

aries-site/src/examples/cardPreviews/accessibility/government.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Box } from 'grommet';
+import { Group, Organization } from 'grommet-icons';
+
+export const AccessibilityGovernmentPreview = () => (
+    <Box direction="row" gap="small">
+        <Organization color="text-strong" size="xlarge" />
+        <Group color="text-strong" size="xlarge" />
+    </Box>
+);

aries-site/src/examples/cardPreviews/accessibility/guide.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Resources } from 'grommet-icons';
+
+export const AccessibilityGuidePreview = () => (
+    <Resources color="text-strong" size="xlarge" />
+);

aries-site/src/examples/cardPreviews/accessibility/index.js

@@ -0,0 +1,5 @@
+export * from './design-and-development';
+export * from './government';
+export * from './guide';
+export * from './testing';
+export * from './video';

aries-site/src/examples/cardPreviews/accessibility/testing.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Troubleshoot } from 'grommet-icons';
+
+export const AccessibilityTestingPreview = () => (
+    <Troubleshoot color="text-strong" size="xlarge" />
+);

aries-site/src/examples/cardPreviews/accessibility/video.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CirclePlay } from 'grommet-icons';
+
+export const AccessibilityProductVideoPreview = () => (
+    <CirclePlay color="text-strong" size="xlarge" />
+);

aries-site/src/examples/cardPreviews/index.js

@@ -1,3 +1,4 @@
+export * from './accessibility';
 export * from './anchor';
 export * from './box';
 export * from './button';

aries-site/src/pages/foundation/accessibility-in-design-and-development.mdx

@@ -0,0 +1,22 @@
+## Accessibility in Design
+
+Usability testing and best practice research build the foundation for all
+design decisions. Each HPE Design System Figma file contains a "Use Cases
+and Research" page detailing the considerations and decision making process
+for a given component.
+
+Not part of the Design System Figma? See our
+[Designer Guidance](/foundation/designer-guidance#setting-up-your-figma-account) to sign up.
+
+As an example, the [HPE Design System Colors](/foundation/color) were selected to meet WCAG
+standards. Notably, text colors are accessible on [background colors](/foundation/color#background-colors) and call-to-action
+colors, like [HPE Green](/foundation/color#green-color-accessibility).
+
+## Accessibility in Development
+
+We recommend you develop your apps using [Grommet](https://v2.grommet.io/)
+because it seamlessly integrates with [grommet-theme-hpe](https://github.com/grommet/grommet-theme-hpe)and is built to support keyboard navigation, HTML landmarks, and many ARIA attributes out of the box.
+
+While supplemental attributes may need to be implemented and accessibility testing should still be performed, Grommet handles many of the general DOM requirements for you.
+
+For guidance on setting up your development environment, see [Developer Guidance](/foundation/developer-guidance).

aries-site/src/pages/foundation/accessibility.mdx

@@ -1,4 +1,15 @@
-import { GuideSection, VideoSection } from '../../examples/foundation';
+import { getPageDetails } from '../../utils';
+import { CardGrid } from '../../components';
+
+export const accessibilityPatterns = [
+  'Accessibility in Design and Development',
+  'Designer and Software Developer Guides',
+  'Accessible Product Design Videos',
+  'Testing for Accessibility',
+  'Government Standards and Regulations',
+];
+
+export const accessibilityCards = accessibilityPatterns.map(pattern => getPageDetails(pattern));
 
 At HPE, we believe in being a force for good. We solve for humanity with humanity.
 We use technology to make the world better. We are unconditionally inclusive.
@@ -24,89 +35,10 @@ Considerations for sight, mobility, hearing, and cognition are incorporated
 into all HPE Design System components, patterns, and guidance, providing
 design and development tools for all teams to build accessible applications.
 
-Get started with these [resources and tools](#automated-testing-tools) to perform a
-baseline audit of the accessibility of your application.
-
-## Designer and Software Developer Guides
-
-The following collection of guides from the [HPE Product Accessibility Program Office](https://hpe.sharepoint.com/sites/F5/CTO/Office/Accessibility/Pages/index.aspx) help designers and developers create accessible products which meet the needs of HPE’s clients.
-
-<GuideSection />
-
-## Accessible Product Design Videos
-
-A collection of short educational videos from HPE explaining basic accessible design principles in software and web technologies.
-
-Each video is less than 10 minutes and is accompanied by a “Pocket Guide” with key takeaways that can be found under HPE [Accessible Design Training](https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/accessible-design-training.aspx).
-
-<VideoSection />
-
-## Accessibility in Design
-
-Usability testing and best practice research build the foundation for all
-design decisions. Each HPE Design System Figma file contains a "Use Cases
-and Research" page detailing the considerations and decision making process
-for a given component.
-
-Not part of the Design System Figma? See our
-[Designer Guidance](/foundation/designer-guidance#setting-up-your-figma-account) to sign up.
-
-As an example, the [HPE Design System Colors](/foundation/color) were selected to meet WCAG
-standards. Notably, text colors are accessible on [background colors](/foundation/color#background-colors) and call-to-action
-colors, like [HPE Green](/foundation/color#green-color-accessibility).
-
-## Accessibility in Development
-
-We recommend you develop your apps using [Grommet](https://v2.grommet.io/)
-because it seamlessly integrates with [grommet-theme-hpe](https://github.com/grommet/grommet-theme-hpe)and is built to support keyboard navigation, HTML landmarks, and many ARIA attributes out of the box.
-
-While supplemental attributes may need to be implemented and accessibility testing should still be performed, Grommet handles many of the general DOM requirements for you.
-
-For guidance on setting up your development environment, see [Developer Guidance](/foundation/developer-guidance).
-
-## Testing for Accessibility
-
-The following are steps you should look to incorporate into your workflow to better test and ensure accessibility across the board:
-
-1. **Think of accessibility first.** If accessibility is incorporated into the design process and development lifecycle as early as possible, many violations could be avoided in the future. More research, dialogue, testing and empathy will increase the accessibility of HPE products.
-2. **Conduct thorough research.** It is important to understand the limitations and pain points of the audience you are trying to engage with and build for. Read about the current best practices and standards for the interface you are building. Understand how users with disabilities will interact with your product.
-3. **Put empathy into practice and try it yourself.** When testing your products manually by yourself, it is important to simulate the experience of a person with a disability to the best of your capabilities. For example:
-  - Turn your monitor off when using a screen reader. 
-  - Avoid any reliance on your mouse. 
-  - Use [technologies to aid in simulating disabilities](#disability-simulator-tools) such as color blindness, dyslexia and tunnel vision. 
-4. **Observe through real people.** The best way to understand the problems that users with disabilities face is to see how they navigate in their daily lives. Break down assumptions by learning about disabilities outside of the context of the web, too.
-5. **Conduct testing with real users.** Automated testing tools only catch approximately 30-50% of accessibility violations. Manual testing is essential to thoroughly conducting an accessibility test on a product. Test with a variety of users with disabilities to ensure full coverage. [Bill Tipton](https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/bill-tipton-biography.aspx), from the Product Accessibility Office, is an excellent internal resource for usability testing. Bill has used a screen reader in his daily life since 1999 when he lost his eyesight. Please email him or [Bill Bettega](https://hpe.sharepoint.com/sites/F5/CTO/Office/Accessibility/Pages/bill-bettega-biography.aspx) with any of your product testing requests and they will respond when they are able to assist.
-6. **Be an active advocate.** Testing does not end at the final report of accessibility violations of a product. To further advance accessibility, after testing, you should remain an ally and advocate for the disabled community. Amplifying all voices will lend a hand to making the internet more inclusive.
-
-## Automated Testing Tools
-
-### CI/CD Tools
-- [Lighthouse Github Action](https://github.com/jakejarvis/lighthouse-action): [Built into the Design System repo](https://github.com/grommet/hpe-design-system/blob/master/.github/workflows/main.yml), this Github action performs a Lighthouse audit on open pull requests to ensure no accessibility violations, among other checks.
-- [axe-core](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react): An accessibility testing engine built to integrate with existing functional testing to help automate accessibility checks.
-- [axe-testcafe](https://www.npmjs.com/package/axe-testcafe): A TestCafe module that allows you to use the aXe accessibility engine in TestCafe tests. Some use of these tests has been [incorporated into the Design System testing](https://github.com/grommet/hpe-design-system/blob/master/aries-site/src/tests/accessibility/axe.js).
-
-### Browser Extension Tools
-- [AxeDev Tools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US): Identifies violations and pinpoints them so you are able to easily see and fix them.
-- [Access Assistant](https://chrome.google.com/webstore/detail/access-assistant/ojiighldhdmahfdnhfdebnpmlbiemdfm/related): Offered by [Level Access](https://www.levelaccess.com/), this tool identifies the most common, highest risk accessibility violations on a product. Reports can be saved to monitor compliance over time.
-- [WAVE (Web Accessibility Evaluation Tool) Browser Plugin](https://wave.webaim.org/extension/): Scans webpages to recognize missing HTML requirements and color contrast standards.
-- [Lighthouse](https://developers.google.com/web/tools/lighthouse): Integrated into Chrome, this tools is available as a tab after clicking 'Inspect' on a webpage and will generate an accessibility report for the page.
-- [ANDI Browser Tool](https://www.ssa.gov/accessibility/andi/help/install.html): Activate on a page to check the accessibility of images, headings, color contrast, data tables, links, and more.
-
-### Disability Simulator Tools
-- [Silktide](https://silktide.com/resources/toolbar/): An extension tool that helps simulate disabilities on the web including color blindness, dyslexia, tunnel vision, cataracts and blindness.
-- [WebAIM Color Contrast Checker](https://webaim.org/resources/contrastchecker/): Check color contrast ratios of specific color values to identify if they meet WCAG AA and/or AAA standards.
-- [Colorblind Web Page Filter](https://www.toptal.com/designers/colorfilter/): See what your application looks like to users with various types of colorblindness.
-
-## Government Standards and Regulations
-
-To help enforce the World Wide Web's accessibility, policies and laws have been put in place which require certain standards to be met for all web, software and non-web documents.
-
-As a designer or developer, we are morally responsible for creating accessible products, and it is necessary that we are aware of the mandated standards established across the world. The following links provide insight into how governments and policy makers have come to include accessibility into laws, emphasizing the importance of making the web inclusive for all. In general, it is helpful to understand some of these policies and how they may affect your work product.
+Get started with these resources and subsections to learn more about accessibility
+in practice and perform a baseline audit of the accessibility of your application:
 
-- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/): A robust set of international accessibility design guidelines. The guidelines identified as level A and AA are the required design elements for all applications and are incorporated in the US Section 508 standard and HPE's Design System.
-- [U.S. Section 508](https://www.section508.gov/): This site provides guidance for IT accessibility, covering program management, procurement, tools, training, and policy compliance.
-- [Americans with Disabilities Act (ADA)](https://www.ada.gov/ada_intro.htm): An equal opportunity law that prohibits discrimination against people with disabilities where public services are offered — now including the public web domain.
-- [European Accessibility Act (EAA)](https://ec.europa.eu/social/main.jsp?catId=1202): A directive that aims to improve the market for accessible products and services that have been identified as most important for individuals with disabilities.
+<CardGrid cards={accessibilityCards} />
 
 ## External Resources
 

aries-site/src/pages/foundation/accessible-product-design-videos.mdx

@@ -0,0 +1,7 @@
+import { VideoSection } from '../../examples/foundation';
+
+## Accessible Product Design Videos
+
+Each video is less than 10 minutes and is accompanied by a “Pocket Guide” with key takeaways that can be found under HPE [Accessible Design Training](https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/accessible-design-training.aspx).
+
+<VideoSection />

aries-site/src/pages/foundation/designer-and-software-developer-guides.mdx

@@ -0,0 +1,7 @@
+import { GuideSection } from '../../examples/foundation';
+
+## Designer and Software Developer Guides
+
+The following collection of guides from the [HPE Product Accessibility Program Office](https://hpe.sharepoint.com/sites/F5/CTO/Office/Accessibility/Pages/index.aspx) help designers and developers create accessible products which meet the needs of HPE’s clients.
+
+<GuideSection />