content updates

gatsby-config.js

@@ -54,7 +54,7 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#663399`,
         display: `minimal-ui`,
-        icon: `src/images/blueicon.png`, // This path is relative to the root of the site.
+        icon: `src/images/blueicon.jpg`, // This path is relative to the root of the site.
       },
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality

src/components/layout.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useStaticQuery } from 'gatsby'
+import { useStaticQuery, graphql } from 'gatsby'
 
 // Grommet
 import { Grommet, Grid, Box, ResponsiveContext } from 'grommet'
@@ -9,16 +9,6 @@ import Header from './header'
 import Navigation from './navigation'
 import './layout.scss'
 
-// const Theme = {
-//   global: {
-//     breakpoints: {
-//       small: {
-//         value: '640px',
-//       }
-//     },
-//   },
-// };
-
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {

src/components/layout.scss

@@ -1,7 +1,20 @@
-@import '../css/reset.css';
-
+* {
+  box-sizing: inherit;
+}
+*:before {
+  box-sizing: inherit;
+}
+*:after {
+  box-sizing: inherit;
+}
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
 body {
   font-family: sans-serif;
+  margin: 0;
 }
 
 a, a:link, a:visited {
@@ -31,3 +44,11 @@ header.globalHeader {
     fill: currentColor;
   }
 }
+
+.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
+  position: absolute !important;
+  height: 1px; width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}

src/pages/index.jsx

@@ -9,7 +9,7 @@ const IndexPage = () => (
   <Layout>
     <SEO title="Home" keywords={['javascript', 'accessibility', 'react']} />
     <div style={{ padding: `1em` }}>
-      <Heading level="2" margin="none"> Hi people</Heading>
+      <Heading level="2" margin="none">Hi people</Heading>
     </div>
   </Layout>
 )

src/pages/page-2.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+import Layout from '../components/layout'
+import SEO from '../components/seo'
+
+import { Heading } from "grommet"
+
+const PageTwo = () => (
+  <Layout>
+    <SEO title="Home" keywords={['javascript', 'accessibility', 'react']} />
+    <div style={{ padding: `1em` }}>
+      <Heading level="2" margin="none">Page 2</Heading>
+    </div>
+  </Layout>
+)
+
+export default PageTwo
+
+

src/slides/index.mdx

@@ -1,15 +1,115 @@
-import SlideLayout from "../templates/slide"
+import Slide from "../templates/slide"
+import ImageSlide from "../templates/image-slide"
 
-<SlideLayout>
+<Slide>
 
 # Accessibility in JavaScript Applications
 
-</SlideLayout>
+</Slide>
 
 ---
 
-<SlideLayout>
+<Slide>
 
-## Beep
+## Who is Marcy Sutton?
 
-</SlideLayout>
+<div style="position: relative; margin:0 auto; max-width: 300px;">
+    <img src="/gatsby-icon.png" alt="Gatsby" style="position:absolute; left: -200px; max-height: 130px; top:60px;" />
+    <img src="/marcysutton-sketch.png" alt="Sketch of Marcy" style="max-height: 400px; margin-bottom: 200px;" />
+    <img src="/a11y-octopus.png" alt="A11y Octopus" style="position:absolute; right: -250px; top: 60px; max-height: 180px;" />
+    <img src="/angular-logo.png" alt="Angular" style="position:absolute; top: 300px; left: 50%; margin-left: -50px; max-height: 120px;" />
+</div>
+
+</Slide>
+
+---
+
+## What we'll cover
+
+- Accessibility debugging
+
+
+- Accessibility in JavaScript apps
+    - Focus management
+    - Announcements
+    - Semantic HTML
+    - Unobtrusive motion
+    - Progressive enhancement
+
+
+- Accessibility units
+- Accessible pages
+- Q & A
+
+---
+
+<Slide>
+
+## Inaccessible web applications
+
+</Slide>
+
+---
+
+<ImageSlide
+    heading="Examples of inaccessible web applications: 1"
+    imageSrc="/user-inyerface.jpg"
+    imageAlt="User in-yer-face"
+/>
+
+---
+<ImageSlide
+    heading="Examples of inaccessible web applications: 2"
+    imageSrc="/slack-focus-trap.png"
+    imageAlt="Slack JSON file viewer"
+/>
+
+---
+
+<Slide>
+
+## Better web applications
+
+</Slide>
+
+---
+
+<ImageSlide
+    heading="Examples of better web applications: 1"
+    imageSrc="/blackboard.png"
+    imageAlt="Blackboard Learn application"
+/>
+
+---
+
+<ImageSlide
+    heading="Examples of better web applications: 2"
+    imageSrc="/facebook-a11y-toolbar.jpg"
+    imageAlt="Facebook's accessibility toolbar"
+/>
+
+---
+
+<Slide>
+
+## Install demos & tools
+
+### This demo app/slides
+
+- https://github.com/marcysutton/js-a11y-workshop
+
+### Tools
+
+- [axe browser extensions](https://deque.com/axe)
+- [Accessibility Insights](http://accessibilityinsights.io)
+- [NVDA](https://www.nvaccess.org/download/) (Windows only)
+
+</Slide>
+
+---
+
+<Slide>
+
+## Accessibility debugging
+
+</Slide>

src/slides/theme.js

@@ -0,0 +1,19 @@
+export default {
+  colors: {
+    text: '#000',
+    background: '#fff',
+    link: '#005a9b',
+    heading: '#000',
+    quote: '#000',
+    pre: '#f0f',
+    preBackground: '#333',
+    code: '#f0f',
+    codeBackground: 'transparent',
+  },
+  css: {
+    justifyContent: 'start'
+  },
+  fontSizes: [
+    '0.75em', '1em', '1.5em', '2em', '3em'
+  ],
+}

src/templates/image-slide.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+const ImageSlide = ({ heading, imageSrc, imageAlt }) => (
+    <>
+        <span className="visually-hidden">{heading}</span>
+
+        <img
+            src={imageSrc}
+            alt={imageAlt}
+            style={{
+                height: `100%`,
+                verticalAlign: `bottom`,
+                width: `100%`,
+            }}
+        />
+    </>
+)
+
+export default ImageSlide

src/templates/slide.jsx

@@ -1,9 +1,9 @@
-// example Layout.js
 import React from 'react'
 import { css } from "styled-components"
 import styled from "styled-components"
 
 const headerFooterStyles = css`
+  background-color: #fff;
   font-size: 14px;
   left: 0;
   padding: 0.5em;
@@ -22,6 +22,7 @@ const Footer = styled.footer`
 const P = styled.p`
   display: inline-block;
   font-size: inherit;
+  margin-top: 0;
   margin-right: auto;
 `
 const H1 = styled.h1`