Skip to content

Commit 22fc550

Browse files
author
Amber Febbraro
authored
Merge pull request #3731 from sparkdesignsystem/homepage-updates
Accessibility updates for docs site
2 parents 1e9d8fa + bbf81d2 commit 22fc550

49 files changed

Lines changed: 474 additions & 149 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "spark-design-system-gatsby",
3-
"version": "3.0.0",
3+
"version": "3.1.0",
44
"description": "A documentation and guide site for Spark Design System",
55
"homepage": "https://github.com/sparkdesignsystem/spark-design-system",
66
"license": "MIT",

‎src/components/ComponentPreview.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const ComponentPreview = ({
1313
maxHeight,
1414
maxWidth,
1515
allowScrolling,
16+
titleAttr,
1617
}) => {
1718
const iframeURL = `https://html.sparkdesignsystem.com/iframe.html?id=${componentType}-${componentName}`;
1819

@@ -26,7 +27,7 @@ const ComponentPreview = ({
2627
maxWidth,
2728
}}
2829
scrolling={allowScrolling}
29-
title="Component Preview"
30+
title={titleAttr}
3031
className="docs-c-ComponentPreview sprk-o-Box"
3132
src={iframeURL}
3233
loading="lazy"
@@ -56,11 +57,13 @@ ComponentPreview.propTypes = {
5657
maxWidth: PropTypes.string,
5758
minHeight: PropTypes.string,
5859
allowScrolling: PropTypes.bool,
60+
titleAttr: PropTypes.string,
5961
};
6062

6163
ComponentPreview.defaultProps = {
6264
componentType: 'components',
6365
allowScrolling: false,
66+
titleAttr: 'Component Preview',
6467
};
6568

6669
export default ComponentPreview;

‎src/components/Header.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,16 @@ const Header = ({ setContext }) => {
7979
element: Link,
8080
}));
8181

82-
const usingSparkPages = usingSparkComponents.concat(
82+
const usingSparkGuides = useUsingSparkData().guides.map((page) => ({
83+
text: page.node.frontmatter.title,
84+
to: `/using-spark/guides/${page.node.parent.name}`,
85+
element: Link,
86+
}));
87+
88+
const usingSparkPages = usingSparkFoundations.concat(
89+
usingSparkGuides,
90+
usingSparkComponents,
8391
usingSparkExamples,
84-
usingSparkFoundations,
8592
);
8693

8794
const principlePages = usePrincipleSparkData().map((page) => ({

‎src/components/InstallingSparkDocsMenu.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ const InstallingSparkDocsMenu = () => {
77
const pages = useInstallingSparkData();
88

99
return (
10-
<>
11-
<h3 className="docs-menu__heading">Installing Spark</h3>
10+
<div className="docs-menu__collection">
1211
<nav aria-label="Installing Spark">
12+
<h3 className="docs-menu__heading">Installing Spark</h3>
1313
<ul className="docs-menu__collection">
1414
{pages.map((page) => (
1515
<li
@@ -27,7 +27,7 @@ const InstallingSparkDocsMenu = () => {
2727
))}
2828
</ul>
2929
</nav>
30-
</>
30+
</div>
3131
);
3232
};
3333

‎src/components/PrinciplesDocsMenu.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import { usePrincipleSparkData } from '../hooks/use-principle-spark';
66
const PrinciplesSparkDocsMenu = () => {
77
const pages = usePrincipleSparkData();
88
return (
9-
<>
10-
<h3 className="docs-menu__heading">Principles</h3>
9+
<div className="docs-menu__collection">
1110
<nav aria-label="Principles">
11+
<h3 className="docs-menu__heading">Principles</h3>
1212
<ul className="docs-menu__collection">
13-
{pages.map(page => (
13+
{pages.map((page) => (
1414
<li
1515
key={page.node.parent.name}
1616
className="docs-menu__collection-item sprk-u-pbs"
@@ -20,13 +20,13 @@ const PrinciplesSparkDocsMenu = () => {
2020
variant="simple"
2121
to={`/principles/${page.node.parent.name}`}
2222
>
23-
{ page.node.frontmatter.title || page.node.parent.name }
23+
{page.node.frontmatter.title || page.node.parent.name}
2424
</SprkLink>
2525
</li>
2626
))}
2727
</ul>
2828
</nav>
29-
</>
29+
</div>
3030
);
3131
};
3232

‎src/components/UsingSparkDocsMenu.js‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -24,41 +24,39 @@ const UsingSparkDocsMenu = () => {
2424
const generatedFoundationPages = firstColorPages.concat(allOtherPages);
2525

2626
return (
27-
<>
28-
<h3 className="docs-menu__heading">Using Spark</h3>
29-
<div className="docs-menu__collection">
30-
<nav aria-label="Using Spark">
31-
{foundationPages.length > 0 && (
32-
<ContextSubMenu
33-
directory="foundations"
34-
heading="Foundations"
35-
collection={generatedFoundationPages}
36-
/>
37-
)}
38-
{guidePages.length > 0 && (
39-
<ContextSubMenu
40-
directory="guides"
41-
heading="Guides"
42-
collection={guidePages}
43-
/>
44-
)}
45-
{componentPages.length > 0 && (
46-
<ContextSubMenu
47-
directory="components"
48-
heading="Components"
49-
collection={componentPages}
50-
/>
51-
)}
52-
{examplePages.length > 0 && (
53-
<ContextSubMenu
54-
directory="examples"
55-
heading="Examples"
56-
collection={examplePages}
57-
/>
58-
)}
59-
</nav>
60-
</div>
61-
</>
27+
<div className="docs-menu__collection">
28+
<nav aria-label="Using Spark">
29+
<h3 className="docs-menu__heading">Using Spark</h3>
30+
{foundationPages.length > 0 && (
31+
<ContextSubMenu
32+
directory="foundations"
33+
heading="Foundations"
34+
collection={generatedFoundationPages}
35+
/>
36+
)}
37+
{guidePages.length > 0 && (
38+
<ContextSubMenu
39+
directory="guides"
40+
heading="Guides"
41+
collection={guidePages}
42+
/>
43+
)}
44+
{componentPages.length > 0 && (
45+
<ContextSubMenu
46+
directory="components"
47+
heading="Components"
48+
collection={componentPages}
49+
/>
50+
)}
51+
{examplePages.length > 0 && (
52+
<ContextSubMenu
53+
directory="examples"
54+
heading="Examples"
55+
collection={examplePages}
56+
/>
57+
)}
58+
</nav>
59+
</div>
6260
);
6361
};
6462

‎src/components/layouts/Layout.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const Layout = ({ children, initialContext, hasSideBar, location }) => {
7676
Skip to Main Content
7777
</SprkLink>
7878
</div>
79-
<div className="sprk-u-BackgroundColor--black sprk-u-AbsoluteCenter sprk-u-pam">
79+
<aside className="sprk-u-BackgroundColor--black sprk-u-AbsoluteCenter sprk-u-pam">
8080
<p className="sprk-u-Color--white">
8181
Designs launching
8282
<span className="sprk-u-FontWeight--bold sprk-u-mas">before</span>
@@ -90,7 +90,7 @@ const Layout = ({ children, initialContext, hasSideBar, location }) => {
9090
. Questions? Please contact your Product Owner or Experience
9191
Director.
9292
</p>
93-
</div>
93+
</aside>
9494
<Header
9595
context={context}
9696
setContext={setContext}

‎src/components/markdown-render/inlineCode.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import Highlight, { defaultProps } from 'prism-react-renderer';
3-
import customTheme from 'prism-react-renderer/themes/github';
43

54
const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
65
className = className ? className : '';
@@ -10,7 +9,7 @@ const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
109
{...defaultProps}
1110
code={children}
1211
language={language}
13-
theme={theme || customTheme}
12+
theme={undefined}
1413
>
1514
{({ className, style, tokens, getLineProps, getTokenProps }) => (
1615
<pre

‎src/pages/index.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
SprkStack,
44
SprkStackItem,
55
SprkCard,
6-
SprkButton,
6+
SprkLink,
77
} from '@sparkdesignsystem/spark-react';
88
import Layout from '../components/layouts/Layout';
99
import componentsMedia from '../images/components.svg';
@@ -27,7 +27,7 @@ const teaserDesigners = {
2727
media: {
2828
href: '/principles/design-principles',
2929
mediaLinkElement: 'a',
30-
imgAlt: 'An illustration of someone hands drawing on a tablet.',
30+
imgAlt: 'Go to Designer Basics',
3131
imgSrc: designersMedia,
3232
mediaVariant: 'img',
3333
},
@@ -52,7 +52,7 @@ const teaserDevelopers = {
5252
media: {
5353
href: '/installing-spark',
5454
mediaLinkElement: 'a',
55-
imgAlt: 'An illustration of a computer with code displayed.',
55+
imgAlt: 'Go to Developer Basics',
5656
imgSrc: developersMedia,
5757
mediaVariant: 'img',
5858
},
@@ -78,7 +78,7 @@ const teaserComponents = {
7878
media: {
7979
href: '/using-spark/components/button',
8080
mediaLinkElement: 'a',
81-
imgAlt: 'An illustration of a graph paper and a magnifying glass.',
81+
imgAlt: 'Go to Components',
8282
imgSrc: componentsMedia,
8383
mediaVariant: 'img',
8484
},
@@ -102,7 +102,7 @@ const teaserFoundations = {
102102
media: {
103103
href: '/using-spark/foundations/color',
104104
mediaLinkElement: 'a',
105-
imgAlt: 'Decorative illustrations of type and color.',
105+
imgAlt: 'Go to Foundations',
106106
imgSrc: foundationsMedia,
107107
mediaVariant: 'img',
108108
},
@@ -125,7 +125,7 @@ const teaserUtils = {
125125
media: {
126126
href: '/using-spark/foundations/css-utilities',
127127
mediaLinkElement: 'a',
128-
imgAlt: 'Decorative illustrations of pages.',
128+
imgAlt: 'Go to Utilities',
129129
imgSrc: utilitiesMedia,
130130
mediaVariant: 'img',
131131
},
@@ -147,7 +147,7 @@ const teaserNews = {
147147
media: {
148148
href: 'https://github.com/sparkdesignsystem/spark-design-system/releases',
149149
mediaLinkElement: 'a',
150-
imgAlt: 'Decorative illustrations of mail and notifications.',
150+
imgAlt: 'Go to News',
151151
imgSrc: newsMedia,
152152
mediaVariant: 'img',
153153
},
@@ -226,12 +226,13 @@ const IndexPage = () => (
226226
</SprkStackItem>
227227

228228
<SprkStackItem>
229-
<SprkButton
229+
<SprkLink
230230
href="https://github.com/sparkdesignsystem/spark-design-system/blob/master/CONTRIBUTING.md"
231-
variant="secondary"
231+
additionalClasses="sprk-c-Button sprk-c-Button--secondary"
232+
variant="plain"
232233
>
233234
Learn More
234-
</SprkButton>
235+
</SprkLink>
235236
</SprkStackItem>
236237
</SprkStack>
237238
</SprkStackItem>

‎src/pages/installing-spark/angular.mdx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ to the one in the [Angular CLI Overview](https://angular.io/cli)
3030
- <a href="https://angular.io/guide/router" target="_blank">Angular Routing</a> is installed
3131
(not required by Angular CLI, but it is required for Spark)
3232

33-
### Schematics
33+
## Schematics
3434
Spark Angular now supports schematics. If you'd like to install Spark in this way,
3535
run the following commands from your application's root directory.
3636
``` bash
@@ -41,7 +41,15 @@ run the following commands from your application's root directory.
4141

4242
## Installing Spark Packages
4343

44-
<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>
44+
<iframe
45+
width="560"
46+
height="315"
47+
src="https://www.youtube.com/embed/c5zBjNYrxGA"
48+
frameborder="0"
49+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
50+
allowfullscreen
51+
title="Youtube Player: Installing Spark in an Angular Project"
52+
></iframe>
4553

4654
1. Start by going to your project
4755
directory and installing `spark-angular`

0 commit comments

Comments
 (0)