initial commit of new repo

.gitignore

@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,56 @@
+# Building Accessible Sites with Gatsby
+
+Learn the necessary techniques and tools for building inclusive web applications with Gatsby and React.js from Gatsby's Head of Learning Marcy Sutton.
+
+Presenting at [Smashing Conf NYC](https://smashingconf.com/ny-2019/)
+
+Some key takeaways:
+
+- Understand how to incorporate accessibility into your web development workflow.
+- Debug your sites and applications for accessibility using the latest tools.
+- Apply accessibility to React web applications with Gatsby, while learning how accessibility applies to other stacks.
+- Learn the benefits of manual and automated testing to grow web accessibility superpowers!
+- Integrate focus management into your web applications, gracefully handling keyboard and screen reader interactions.
+- Practice announcing view changes with your code and keeping screen reader users up to date.
+- Achieve wins with semantic markup, unobtrusive animation, and progressive enhancement.
+
+App URL: https://marcysutton.github.io/gatsby-a11y-workshop
+
+Workshop slides: https://marcysutton.github.io/gatsby-a11y-workshop/slides/
+
+---
+
+This project was started with [gatsby-starter-mdx-basic](https://github.com/christopherbiscardi/gatsby-starter-mdx-basic) and [@mdx-deck/theme](https://github.com/jxnblk/mdx-deck/tree/master/packages/gatsby-theme).
+
+_Note: This repo requires [Node 12 and npm](https://nodejs.org) to be installed._
+
+1. Create a new Gatsby site and slide deck using this starter
+
+```sh
+git clone https://github.com/marcysutton/gatsby-a11y-workshop
+```
+
+2. Go into the directory, install dependencies, and start the development server
+
+```sh
+cd gatsby-a11y-workshop
+npm install
+npm start
+```
+
+    View in a browser: http://localhost:8000
+
+3. Edit files:
+
+    - Site pages: [`src/pages/*`](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/src/pages)
+    - Site components: [`src/components/*`](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/src/components)
+    - Templates: [`src/templates/*`](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/src/templates)
+    - Slide content: [`src/slides/index.mdx`](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/src/slides/index.mdx)
+
+4. To look at the answers from the exercises, check out the [`/examples`](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/examples) directory in the `master` branch
+
+You can also check out the `solutions` branch to see everything in action: https://github.com/marcysutton/gatsby-a11y-workshop/tree/solutions
+
+### Prerequisites
+1. Have a text editor installed, i.e. VSCode
+2. Have the Gatsby CLI (gatsby-cli) installed globally by running ```npm install -g gatsby-cli```

cypress.json

@@ -0,0 +1 @@
+{}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/index.js

@@ -0,0 +1 @@
+/// <reference types="Cypress" />

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,12 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+import "cypress-axe"
+import "@testing-library/cypress/add-commands"

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

examples/client-side-routing/components/header.js

@@ -0,0 +1,28 @@
+import { Link } from 'gatsby'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Header = ({ siteTitle }) => (
+  <header className="globalHeader">
+    <ul className="skip-link">
+      <li><a href="#skip-main">Skip to main</a></li>
+    </ul>
+    <h1>
+      <Link
+        to="/"
+      >
+        {siteTitle}
+      </Link>
+    </h1>
+  </header>
+)
+
+Header.propTypes = {
+  siteTitle: PropTypes.string,
+}
+
+Header.defaultProps = {
+  siteTitle: '',
+}
+
+export default Header

examples/client-side-routing/components/route-target-heading.js

@@ -0,0 +1,37 @@
+import React from "react"
+import { css } from "@emotion/core"
+
+const styles = css`
+    .routeSkipHeading {
+        position: relative;
+    }
+    .routeSkipLink {
+        display: inline-block;
+        margin-left: -0.75em;
+        opacity: 0;
+        position: absolute;
+        text-decoration: none;
+    }
+    .routeSkipLink:before {
+        content: '⇽';
+        display: block;
+    }
+    .routeSkipLink:focus,
+    .routeSkipLink:hover {
+        opacity: 1;
+    }
+`
+const RouteHeading = ({level = 1, targetID, children}) => {
+    const Heading = `h${level}`;
+    return (
+        <Heading css={styles} className="routeSkipHeading">
+            <a href={`#${targetID}`}
+               id="skip-main"
+               className="routeSkipLink"
+               aria-label={`skip to ${targetID}`}>
+            </a>
+            {children}
+        </Heading>
+    )
+}
+export default RouteHeading

examples/client-side-routing/gatsby-browser.js

@@ -0,0 +1,8 @@
+exports.onRouteUpdate = ({ location, prevLocation }) => {
+    if (prevLocation !== null) {
+        const skipLink = document.querySelector('.routeSkipLink')
+        if (skipLink) {
+            skipLink.focus()
+        }
+    }
+}

examples/client-side-routing/pages/page.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+
+import Layout from '../components/site-chrome/layout'
+import SEO from '../components/site-chrome/seo'
+
+import RouteTargetHeading from "./route-target-heading.js"
+
+const HeadingDemoPage = () => {
+  return (
+    <Layout>
+      <SEO title="Heading demo" keywords={['javascript', 'accessibility', 'react']} />
+      <div>
+        <RouteTargetHeading
+          level={2}
+          targetID="navigation"
+          >
+          Heading Demo
+        </RouteTargetHeading>
+      </div>
+    </Layout>
+  )
+}
+
+export default HeadingDemoPage
+
+

examples/dropdown/dropdown.js

@@ -0,0 +1,70 @@
+import React, { useState, useRef, useEffect } from "react"
+import uuid from "uuid"
+
+import "./dropdown.scss"
+
+const Dropdown = ({ activatorText = 'Dropdown', items = [] }) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const activatorRef = useRef(null)
+    const dropdownListRef = useRef(null)
+
+    const wrapKeyHandler = (event) => {
+        if (event.key === 'Escape' && isOpen) {
+            // escape key
+            setIsOpen(false)
+            activatorRef.current.focus()
+        }
+    }
+    const clickHandler = () => {
+        setIsOpen(!isOpen)
+    }
+    const clickOutsideHandler = (event) => {
+        if (dropdownListRef.current.contains(event.target) || activatorRef.current.contains(event.target)) {
+            return
+        }
+        setIsOpen()
+    }
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('mouseup', clickOutsideHandler)
+
+            dropdownListRef.current.querySelector('a').focus()
+        } else {
+            document.removeEventListener('mouseup', clickOutsideHandler)
+        }
+
+        return () => {
+            document.removeEventListener('mouseup', clickOutsideHandler)
+        }
+    }, [isOpen])
+    return (
+        <div
+            className="dropdown-wrap"
+            onKeyUp={wrapKeyHandler}
+        >
+            <button
+                aria-haspopup="true"
+                aria-controls="dropdown1"
+                onClick={clickHandler}
+                className="dropdown-activator"
+                ref={activatorRef}
+            >
+                {activatorText}
+            </button>
+            <ul
+                id="dropdown1"
+                ref={dropdownListRef}
+                tabIndex="-1"
+                className={`dropdown-itemList ${isOpen ? 'active' : ''}`}
+                role="list">
+                { items.map((item, index) => {
+                    return <li key={index} role="listitem">
+                        <a href={item.url}>{item.text}</a>
+                    </li>
+                })}
+                { items.length === 0 ? <li>No items</li> : null }
+            </ul>
+        </div>
+    )
+}
+export default Dropdown