Merge pull request #3731 from sparkdesignsystem/homepage-updates

Accessibility updates for docs site
sparkdesignsystem · Jan 12, 2021 · 22fc550 · 22fc550
2 parents 1e9d8fa + bbf81d2
commit 22fc550
Show file tree

Hide file tree

Showing 49 changed files with 474 additions and 149 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spark-design-system-gatsby",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A documentation and guide site for Spark Design System",
   "homepage": "https://github.com/sparkdesignsystem/spark-design-system",
   "license": "MIT",

diff --git a/src/components/ComponentPreview.js b/src/components/ComponentPreview.js
@@ -13,6 +13,7 @@ const ComponentPreview = ({
   maxHeight,
   maxWidth,
   allowScrolling,
+  titleAttr,
 }) => {
   const iframeURL = `https://html.sparkdesignsystem.com/iframe.html?id=${componentType}-${componentName}`;
 
@@ -26,7 +27,7 @@ const ComponentPreview = ({
             maxWidth,
           }}
           scrolling={allowScrolling}
-          title="Component Preview"
+          title={titleAttr}
           className="docs-c-ComponentPreview sprk-o-Box"
           src={iframeURL}
           loading="lazy"
@@ -56,11 +57,13 @@ ComponentPreview.propTypes = {
   maxWidth: PropTypes.string,
   minHeight: PropTypes.string,
   allowScrolling: PropTypes.bool,
+  titleAttr: PropTypes.string,
 };
 
 ComponentPreview.defaultProps = {
   componentType: 'components',
   allowScrolling: false,
+  titleAttr: 'Component Preview',
 };
 
 export default ComponentPreview;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -79,9 +79,16 @@ const Header = ({ setContext }) => {
     element: Link,
   }));
 
-  const usingSparkPages = usingSparkComponents.concat(
+  const usingSparkGuides = useUsingSparkData().guides.map((page) => ({
+    text: page.node.frontmatter.title,
+    to: `/using-spark/guides/${page.node.parent.name}`,
+    element: Link,
+  }));
+
+  const usingSparkPages = usingSparkFoundations.concat(
+    usingSparkGuides,
+    usingSparkComponents,
     usingSparkExamples,
-    usingSparkFoundations,
   );
 
   const principlePages = usePrincipleSparkData().map((page) => ({

diff --git a/src/components/InstallingSparkDocsMenu.js b/src/components/InstallingSparkDocsMenu.js
@@ -7,9 +7,9 @@ const InstallingSparkDocsMenu = () => {
   const pages = useInstallingSparkData();
 
   return (
-    <>
-      <h3 className="docs-menu__heading">Installing Spark</h3>
+    <div className="docs-menu__collection">
       <nav aria-label="Installing Spark">
+        <h3 className="docs-menu__heading">Installing Spark</h3>
         <ul className="docs-menu__collection">
           {pages.map((page) => (
             <li
@@ -27,7 +27,7 @@ const InstallingSparkDocsMenu = () => {
           ))}
         </ul>
       </nav>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/PrinciplesDocsMenu.js b/src/components/PrinciplesDocsMenu.js
@@ -6,11 +6,11 @@ import { usePrincipleSparkData } from '../hooks/use-principle-spark';
 const PrinciplesSparkDocsMenu = () => {
   const pages = usePrincipleSparkData();
   return (
-    <>
-      <h3 className="docs-menu__heading">Principles</h3>
+    <div className="docs-menu__collection">
       <nav aria-label="Principles">
+        <h3 className="docs-menu__heading">Principles</h3>
         <ul className="docs-menu__collection">
-          {pages.map(page => (
+          {pages.map((page) => (
             <li
               key={page.node.parent.name}
               className="docs-menu__collection-item sprk-u-pbs"
@@ -20,13 +20,13 @@ const PrinciplesSparkDocsMenu = () => {
                 variant="simple"
                 to={`/principles/${page.node.parent.name}`}
               >
-                { page.node.frontmatter.title || page.node.parent.name }
+                {page.node.frontmatter.title || page.node.parent.name}
               </SprkLink>
             </li>
           ))}
         </ul>
       </nav>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/UsingSparkDocsMenu.js b/src/components/UsingSparkDocsMenu.js
@@ -24,41 +24,39 @@ const UsingSparkDocsMenu = () => {
   const generatedFoundationPages = firstColorPages.concat(allOtherPages);
 
   return (
-    <>
-      <h3 className="docs-menu__heading">Using Spark</h3>
-      <div className="docs-menu__collection">
-        <nav aria-label="Using Spark">
-          {foundationPages.length > 0 && (
-            <ContextSubMenu
-              directory="foundations"
-              heading="Foundations"
-              collection={generatedFoundationPages}
-            />
-          )}
-          {guidePages.length > 0 && (
-            <ContextSubMenu
-              directory="guides"
-              heading="Guides"
-              collection={guidePages}
-            />
-          )}
-          {componentPages.length > 0 && (
-            <ContextSubMenu
-              directory="components"
-              heading="Components"
-              collection={componentPages}
-            />
-          )}
-          {examplePages.length > 0 && (
-            <ContextSubMenu
-              directory="examples"
-              heading="Examples"
-              collection={examplePages}
-            />
-          )}
-        </nav>
-      </div>
-    </>
+    <div className="docs-menu__collection">
+      <nav aria-label="Using Spark">
+        <h3 className="docs-menu__heading">Using Spark</h3>
+        {foundationPages.length > 0 && (
+          <ContextSubMenu
+            directory="foundations"
+            heading="Foundations"
+            collection={generatedFoundationPages}
+          />
+        )}
+        {guidePages.length > 0 && (
+          <ContextSubMenu
+            directory="guides"
+            heading="Guides"
+            collection={guidePages}
+          />
+        )}
+        {componentPages.length > 0 && (
+          <ContextSubMenu
+            directory="components"
+            heading="Components"
+            collection={componentPages}
+          />
+        )}
+        {examplePages.length > 0 && (
+          <ContextSubMenu
+            directory="examples"
+            heading="Examples"
+            collection={examplePages}
+          />
+        )}
+      </nav>
+    </div>
   );
 };
 

diff --git a/src/components/layouts/Layout.js b/src/components/layouts/Layout.js
@@ -76,7 +76,7 @@ const Layout = ({ children, initialContext, hasSideBar, location }) => {
               Skip to Main Content
             </SprkLink>
           </div>
-          <div className="sprk-u-BackgroundColor--black sprk-u-AbsoluteCenter sprk-u-pam">
+          <aside className="sprk-u-BackgroundColor--black sprk-u-AbsoluteCenter sprk-u-pam">
             <p className="sprk-u-Color--white">
               Designs launching
               <span className="sprk-u-FontWeight--bold sprk-u-mas">before</span>
@@ -90,7 +90,7 @@ const Layout = ({ children, initialContext, hasSideBar, location }) => {
               . Questions? Please contact your Product Owner or Experience
               Director.
             </p>
-          </div>
+          </aside>
           <Header
             context={context}
             setContext={setContext}

diff --git a/src/components/markdown-render/inlineCode.js b/src/components/markdown-render/inlineCode.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import customTheme from 'prism-react-renderer/themes/github';
 
 const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
   className = className ? className : '';
@@ -10,7 +9,7 @@ const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
       {...defaultProps}
       code={children}
       language={language}
-      theme={theme || customTheme}
+      theme={undefined}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,7 +3,7 @@ import {
   SprkStack,
   SprkStackItem,
   SprkCard,
-  SprkButton,
+  SprkLink,
 } from '@sparkdesignsystem/spark-react';
 import Layout from '../components/layouts/Layout';
 import componentsMedia from '../images/components.svg';
@@ -27,7 +27,7 @@ const teaserDesigners = {
   media: {
     href: '/principles/design-principles',
     mediaLinkElement: 'a',
-    imgAlt: 'An illustration of someone hands drawing on a tablet.',
+    imgAlt: 'Go to Designer Basics',
     imgSrc: designersMedia,
     mediaVariant: 'img',
   },
@@ -52,7 +52,7 @@ const teaserDevelopers = {
   media: {
     href: '/installing-spark',
     mediaLinkElement: 'a',
-    imgAlt: 'An illustration of a computer with code displayed.',
+    imgAlt: 'Go to Developer Basics',
     imgSrc: developersMedia,
     mediaVariant: 'img',
   },
@@ -78,7 +78,7 @@ const teaserComponents = {
   media: {
     href: '/using-spark/components/button',
     mediaLinkElement: 'a',
-    imgAlt: 'An illustration of a graph paper and a magnifying glass.',
+    imgAlt: 'Go to Components',
     imgSrc: componentsMedia,
     mediaVariant: 'img',
   },
@@ -102,7 +102,7 @@ const teaserFoundations = {
   media: {
     href: '/using-spark/foundations/color',
     mediaLinkElement: 'a',
-    imgAlt: 'Decorative illustrations of type and color.',
+    imgAlt: 'Go to Foundations',
     imgSrc: foundationsMedia,
     mediaVariant: 'img',
   },
@@ -125,7 +125,7 @@ const teaserUtils = {
   media: {
     href: '/using-spark/foundations/css-utilities',
     mediaLinkElement: 'a',
-    imgAlt: 'Decorative illustrations of pages.',
+    imgAlt: 'Go to Utilities',
     imgSrc: utilitiesMedia,
     mediaVariant: 'img',
   },
@@ -147,7 +147,7 @@ const teaserNews = {
   media: {
     href: 'https://github.com/sparkdesignsystem/spark-design-system/releases',
     mediaLinkElement: 'a',
-    imgAlt: 'Decorative illustrations of mail and notifications.',
+    imgAlt: 'Go to News',
     imgSrc: newsMedia,
     mediaVariant: 'img',
   },
@@ -226,12 +226,13 @@ const IndexPage = () => (
           </SprkStackItem>
 
           <SprkStackItem>
-            <SprkButton
+            <SprkLink
               href="https://github.com/sparkdesignsystem/spark-design-system/blob/master/CONTRIBUTING.md"
-              variant="secondary"
+              additionalClasses="sprk-c-Button sprk-c-Button--secondary"
+              variant="plain"
             >
               Learn More
-            </SprkButton>
+            </SprkLink>
           </SprkStackItem>
         </SprkStack>
       </SprkStackItem>

diff --git a/src/pages/installing-spark/angular.mdx b/src/pages/installing-spark/angular.mdx
@@ -30,7 +30,7 @@ to the one in the [Angular CLI Overview](https://angular.io/cli)
 - <a href="https://angular.io/guide/router" target="_blank">Angular Routing</a> is installed
 (not required by Angular CLI, but it is required for Spark)
 
-### Schematics
+## Schematics
 Spark Angular now supports schematics. If you'd like to install Spark in this way,
 run the following commands from your application's root directory.
 ``` bash
@@ -41,7 +41,15 @@ run the following commands from your application's root directory.
 
 ## Installing Spark Packages
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/c5zBjNYrxGA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/c5zBjNYrxGA"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  title="Youtube Player: Installing Spark in an Angular Project"
+></iframe>
 
 1. Start by going to your project
 directory and installing `spark-angular`

diff --git a/src/pages/installing-spark/html-add-components.mdx b/src/pages/installing-spark/html-add-components.mdx
@@ -21,7 +21,15 @@ This guide is Part 3 in a 3-Part series. You can also check out
 For instructions on setting up Spark in other environments, check out the
 guides for [Angular](/installing-spark/angular) and [React](/installing-spark/react) development environments.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/EwSArEBTaPU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/EwSArEBTaPU"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  title="Youtube Player: Installing Spark in an HTML Project Part 3/3 - Adding a Spark Component"
+></iframe>
 
 ## Navigating to Component HTML
 

diff --git a/src/pages/installing-spark/html-environment-setup.mdx b/src/pages/installing-spark/html-environment-setup.mdx
@@ -22,7 +22,15 @@ Before you begin, make sure you <a href="https://www.npmjs.com/get-npm" target="
 (`npm`). This is a tool that makes it easy to share and reuse
 JavaScript code and to update the JavaScript code you’re sharing.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/vo4BIUoYX28" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/vo4BIUoYX28"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  title="Youtube Player: Installing Spark in an HTML Project Part 1/3 - Setting Up Project Environment"
+></iframe>
 
 ## Create the Folder Structure
 

diff --git a/src/pages/installing-spark/html-installation.mdx b/src/pages/installing-spark/html-installation.mdx
@@ -20,7 +20,15 @@ This guide is Part 2 in a 3-Part series. You can also check out
 For instructions on setting up Spark in other environments, check out the
 guides for [Angular](/installing-spark/angular) and [React](/installing-spark/react) development environments.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/u9Cz3IJWJe4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/u9Cz3IJWJe4"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  title="Youtube Player: Installing Spark in an HTML Project Part 2/3 - Configuring Spark"
+></iframe>
 
 ## Install the Spark Package