Blog post on accessibility statement & new footer links (#13346)

* add blog post about accessibility

* add accessibility statement to footer

Closes #13221
Closes #12619

* clean up imports

* adjust spacing, style of footer links

* adjust date of blog post

* incorporate PR feedback

docs/blog/2019-04-13-gatsby-commitment-to-accessibility/index.md

@@ -0,0 +1,39 @@
+---
+title: Our Commitment to Accessibility in Gatsby
+date: 2019-04-18
+author: Marcy Sutton
+excerpt: "To demonstrate our commitment to accessibility, we’ve published an Accessibility Statement on Gatsbyjs.org with product information and resources as well as contact information. We encourage everyone integrating and building with Gatsby to join us in this initiative to make the web more accessible to all!"
+tags:
+  - accessibility
+  - javascript
+  - CMS
+  - hosting
+---
+
+As a popular and growing framework for building websites and web applications, Gatsby is in a position to make an impact for accessibility and people with disabilities. The Gatsby team is passionate about helping you create websites that work for everyone, with helpful defaults that bake in web accessibility as well as performance optimizations.
+
+Making a lasting, positive impact with inclusive design and accessible web technology requires an ongoing commitment from all of us. In spite of the sad reality that research projects like the [WebAIM One Million](https://webaim.org/projects/million/) have shown–that despite the community’s efforts, we haven’t made much progress in the top million websites at all–there is very much an opportunity to make an impact in the web development space. Sites built with heavy JavaScript also tend to be less accessible. As Gatsby sites are built with Node and React.js, we recognize the importance of accessible defaults as well as best practices in documentation and examples.
+
+In addition to Gatsby itself, each CMS vendor, hosting platform, design system, and consulting partner we work with is in a unique position to affect users and collaborators alike. Not including accessibility in third-party platforms can present barriers to customers, colleagues and users with disabilities, making an inaccessible product a less competitive one; especially in government, education and employment settings but also in the broader marketplace. Therefore, we encourage everyone who integrates with Gatsby to join us in this initiative to make the web more accessible to all.
+
+To demonstrate our commitment, we’ve published an [Accessibility Statement on Gatsbyjs.org](/accessibility-statement/) with product information and resources on how we’re thinking and acting for accessibility. The statement also provides contact information and how to report issues should you encounter them. The Gatsby team has done quite a bit of work on accessibility already, including integrating @reach/router for dynamic focus management, server-side rendering by default, semantic markup and sensible CSS styling in core starters, and soon, strongly encouraging development and use of accessible Gatsby themes. We also regularly provide feedback to each other in the product and OSS development process to continuously improve.
+
+It’s a work in progress for us and the larger ecosystem; however, Gatsby’s commitment to transparency and active improvement are our core values. If you’re new to web accessibility, we’ve included some resources for you to get started. If you or your company hasn’t tackled this subject much before, now’s a perfect time to start!
+
+For any questions, you are welcome to contact Gatsby Head of Learning [Marcy Sutton](mailto:marcy@gatsbyjs.com).
+
+Gatsby Accessibility Statement: https://www.gatsbyjs.org/accessibility-statement/
+
+## Accessibility Resources
+
+- [Accessibility Statements Show a Commitment to All Site Users](https://www.lflegal.com/2013/02/access-info-pages/)
+- [Web Content Accessibility Guidelines (WCAG 2.0)](https://www.w3.org/TR/WCAG20/)
+- [A11y Project](http://a11yproject.com/)
+- [Udacity Web Accessibility Course](https://www.udacity.com/course/web-accessibility--ud891)
+- [Web Accessibility Initiative at the W3C](https://www.w3.org/WAI/)
+- [Deque University](https://dequeuniversity.com)
+- [WebAIM](https://webaim.org)
+- [Egghead.io: Start Building Accessible Web Applications Today](https://egghead.io/courses/start-building-accessible-web-applications-today)
+- [A11y Style Guide](https://a11y-style-guide.com/style-guide/section-resources.html)
+- [Book: Structured Negotiation, a winning alternative to lawsuits](https://www.lflegal.com/book/)
+- [Accessibility Wins](https://a11ywins.tumblr.com)

docs/blog/author.yaml

@@ -266,3 +266,7 @@
   bio: Loves learning how our customers benefit from our service. Wine Snob. Dog Owner. Music lover.
   avatar: avatars/jim-ettig.jpg
   twitter: "@unclejge"
+- id: Marcy Sutton
+  bio: Head of Learning at Gatsby, cyclist, animal lover, pie baker.
+  avatar: avatars/marcy-sutton.jpg
+  twitter: "@marcysutton"

www/src/components/navigation.js

@@ -164,13 +164,6 @@ const Navigation = ({ pathname }) => {
               <TwitterIcon style={{ verticalAlign: `text-top` }} />
             </SocialNavItem>
           </div>
-          <SocialNavItem
-            href="https://www.gatsbyjs.com"
-            title="gatsbyjs.com"
-            overrideCSS={{ paddingRight: 0, fontSize: fontSizes[2] }}
-          >
-            .com
-          </SocialNavItem>
         </div>
       </div>
     </header>

www/src/components/package-readme.js

@@ -6,6 +6,7 @@ import { Link } from "gatsby"
 import { space } from "../utils/presets"
 import Container from "../components/container"
 import MarkdownPageFooter from "../components/markdown-page-footer"
+import FooterLinks from "../components/shared/footer-links"
 import GithubIcon from "react-icons/lib/go/mark-github"
 import GatsbyIcon from "../monogram.svg"
 import { linkStyles } from "../utils/styles"
@@ -85,6 +86,7 @@ const PackageReadMe = props => {
         dangerouslySetInnerHTML={{ __html: html }}
       />
       <MarkdownPageFooter page={page} packagePage />
+      <FooterLinks />
     </Container>
   )
 }

www/src/components/shared/footer-links.js

@@ -0,0 +1,41 @@
+import React from "react"
+import { Link } from "gatsby"
+import styled from "@emotion/styled"
+import { colors, space } from "../../utils/presets"
+
+const FooterList = styled.ul`
+  border-top: 1px solid ${colors.ui.light};
+  padding-top: ${space[9]};
+  margin: ${space[9]} 0
+    ${props => (props.bottomMargin ? props.bottomMargin : `0`)};
+  list-style: none;
+  text-align: center;
+  width: 100%;
+
+  li {
+    display: inline-block;
+
+    &:first-of-type:after {
+      color: ${colors.gatsby};
+      content: "•";
+      padding-left: 1em;
+      margin-right: 1em;
+    }
+    a {
+      color: ${colors.gray.calm};
+    }
+  }
+`
+
+const FooterLinks = props => (
+  <FooterList bottomMargin={props.bottomMargin}>
+    <li>
+      <Link to="/accessibility-statement">Accessibility Statement</Link>
+    </li>
+    <li>
+      <a href="https://www.gatsbyjs.com">Gatsbyjs.com</a>
+    </li>
+  </FooterList>
+)
+
+export default FooterLinks

www/src/pages/404.js

@@ -2,6 +2,7 @@ import React from "react"
 import Container from "../components/container"
 import Layout from "../components/layout"
 import { Link } from "gatsby"
+import FooterLinks from "../components/shared/footer-links"
 
 class FourOhFour extends React.Component {
   render() {
@@ -15,6 +16,7 @@ class FourOhFour extends React.Component {
           <Link to="/">
             <p>Go Back</p>
           </Link>
+          <FooterLinks />
         </Container>
       </Layout>
     )

www/src/pages/contributing/index.js

@@ -7,6 +7,7 @@ import { itemListContributing } from "../../utils/sidebar/item-list"
 import Container from "../../components/container"
 import EmailCaptureForm from "../../components/email-capture-form"
 import DocSearchContent from "../../components/docsearch-content"
+import FooterLinks from "../../components/shared/footer-links"
 
 class IndexRoute extends React.Component {
   render() {
@@ -63,6 +64,8 @@ class IndexRoute extends React.Component {
               </li>
             </ul>
             <EmailCaptureForm signupMessage="Want to keep up with the latest tips &amp; tricks? Subscribe to our newsletter!" />
+
+            <FooterLinks />
           </Container>
         </DocSearchContent>
       </Layout>

www/src/pages/contributing/stub-list.js

@@ -9,6 +9,7 @@ import {
 } from "../../utils/sidebar/item-list"
 import Container from "../../components/container"
 import DocsearchContent from "../../components/docsearch-content"
+import FooterLinks from "../../components/shared/footer-links"
 
 const findStubs = pages =>
   pages.filter(
@@ -54,6 +55,7 @@ class StubListRoute extends React.Component {
                 </li>
               ))}
             </ul>
+            <FooterLinks />
           </Container>
         </DocsearchContent>
       </Layout>

www/src/pages/docs/index.js

@@ -7,6 +7,7 @@ import { itemListDocs } from "../../utils/sidebar/item-list"
 import Container from "../../components/container"
 import EmailCaptureForm from "../../components/email-capture-form"
 import DocSearchContent from "../../components/docsearch-content"
+import FooterLinks from "../../components/shared/footer-links"
 
 class IndexRoute extends React.Component {
   render() {
@@ -101,6 +102,8 @@ class IndexRoute extends React.Component {
               get started contributing to Gatsby.
             </p>
             <EmailCaptureForm signupMessage="Want to keep up with the latest tips &amp; tricks? Subscribe to our newsletter!" />
+
+            <FooterLinks />
           </Container>
         </DocSearchContent>
       </Layout>

www/src/pages/ecosystem.js

@@ -3,6 +3,7 @@ import { graphql } from "gatsby"
 
 import Layout from "../components/layout/layout-with-heading"
 import EcosystemBoard from "../components/ecosystem/ecosystem-board"
+import FooterLinks from "../components/shared/footer-links"
 
 import { EcosystemIcon } from "../assets/mobile-nav-icons"
 import { PluginsIcon, StartersIcon } from "../assets/ecosystem-icons"
@@ -56,6 +57,7 @@ class EcosystemPage extends Component {
           starters={starters}
           plugins={plugins}
         />
+        <FooterLinks />
       </Layout>
     )
   }

www/src/pages/features.js

@@ -7,6 +7,7 @@ import EvaluationTable from "../components/evaluation-table"
 import EvaluationCell from "../components/evaluation-cell"
 import { itemListFeatures } from "../utils/sidebar/item-list"
 import Container from "../components/container"
+import FooterLinks from "../components/shared/footer-links"
 import {
   colors,
   space,
@@ -240,6 +241,7 @@ class FeaturesPage extends Component {
             />
             <FeaturesFooter />
           </main>
+          <FooterLinks />
         </Container>
       </Layout>
     )

www/src/pages/index.js

@@ -14,6 +14,8 @@ import HomepageFeatures from "../components/homepage/homepage-features"
 import HomepageEcosystem from "../components/homepage/homepage-ecosystem"
 import HomepageBlog from "../components/homepage/homepage-blog"
 import HomepageNewsletter from "../components/homepage/homepage-newsletter"
+import HomepageSection from "../components/homepage/homepage-section"
+import FooterLinks from "../components/shared/footer-links"
 import {
   setupScrollersObserver,
   unobserveScrollers,
@@ -142,6 +144,15 @@ class IndexRoute extends React.Component {
           <HomepageBlog posts={posts} />
 
           <HomepageNewsletter />
+
+          <HomepageSection
+            css={{
+              paddingTop: `0 !important`,
+              paddingBottom: `0 !important`,
+            }}
+          >
+            <FooterLinks bottomMargin={space[9]} />
+          </HomepageSection>
         </main>
       </Layout>
     )

www/src/pages/newsletter.js

@@ -5,6 +5,7 @@ import { colors, space } from "../utils/presets"
 import Layout from "../components/layout"
 import Container from "../components/container"
 import EmailCaptureForm from "../components/email-capture-form"
+import FooterLinks from "../components/shared/footer-links"
 
 class NewsLetter extends Component {
   render() {
@@ -40,6 +41,7 @@ class NewsLetter extends Component {
               borderTop: `2px solid ${colors.lilac}`,
             }}
           />
+          <FooterLinks />
         </Container>
       </Layout>
     )