initial Gatsby Days update

README.md

@@ -2,7 +2,9 @@
 
 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/)
+Presented at:
+- [Gatsby Days LA](https://www.gatsbyjs.com/gdla-a11y-workshop/)
+- [Smashing Conf NYC](https://smashingconf.com/ny-2019/)
 
 Some key takeaways:
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-a11y-workshop",
   "description": "Building Accessible Sites with Gatsby",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Marcy Sutton <[email protected]>",
   "dependencies": {
     "@babel/plugin-proposal-export-default-from": "^7.2.0",

src/pages/index.jsx

@@ -14,7 +14,7 @@ const IndexPage = () => (
 
       <h3 id="Testing-Tools">Testing Tools</h3>
       <ul>
-        <li><a href="https://deque.com/axe/">aXe by Deque</a></li>
+        <li><a href="https://deque.com/axe/">axe by Deque</a></li>
         <li><a href="https://www.npmjs.com/package/cypress-axe">Cypress-axe</a></li>
         <li><a href="https://github.com/evcohen/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a></li>
         <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></li>

src/slides/index.mdx

@@ -72,19 +72,11 @@ https://www.gatsbyjs.org/docs/glossary
 
 ---
 
-<div>
-    <a href="https://gatsbyjs.org/docs/cheat-sheet/" target="_blank">
-        <img src="../cheat-sheet_page_1.png" alt="Gatsby Cheat Sheet page 1" style="max-height: 100vh" />
-    </a>
-</div>
+<Slide>
 
----
+<img style="height: 90vh; margin-top: -1em;" src="../how-gatsby-works.png" alt="How Gatsby Works" />
 
-<div>
-    <a href="https://gatsbyjs.org/docs/cheat-sheet/" target="_blank">
-        <img src="../cheat-sheet_page_2.png" alt="Gatsby Cheat Sheet page 2" style="max-height: 100vh" />
-    </a>
-</div>
+</Slide>
 
 ---
 
@@ -94,6 +86,7 @@ https://www.gatsbyjs.org/docs/glossary
 
 <div style="font-size: 2.2rem;">
 
+- Basic concepts of Gatsby
 - Accessibility debugging
 - Accessibility in Gatsby sites
     - Focus management
@@ -103,7 +96,6 @@ https://www.gatsbyjs.org/docs/glossary
     - Unobtrusive motion
     - Progressive enhancement
 - Automated testing & linting
-- Q & A
 
 </div>
 
@@ -113,6 +105,37 @@ https://www.gatsbyjs.org/docs/glossary
 
 <Slide>
 
+# Gatsby<br />Building Blocks
+
+- [Gatsby API Files](https://www.gatsbyjs.org/docs/api-files/)
+- [GraphQL Data Layer](https://www.gatsbyjs.org/docs/graphql-concepts/)
+- [Creating Pages](https://www.gatsbyjs.org/docs/creating-and-modifying-pages/)
+- [Plugins, Themes & Starters](https://www.gatsbyjs.org/docs/plugins-themes-and-starters/)
+- [Linking Between Pages](https://www.gatsbyjs.org/docs/linking-between-pages/)
+- [Deployment & Hosting](https://www.gatsbyjs.org/docs/deploying-and-hosting/)
+
+</Slide>
+
+---
+
+<div>
+    <a href="https://gatsbyjs.org/docs/cheat-sheet/" target="_blank">
+        <img src="../cheat-sheet_page_1.png" alt="Gatsby Cheat Sheet page 1" style="max-height: 100vh" />
+    </a>
+</div>
+
+---
+
+<div>
+    <a href="https://gatsbyjs.org/docs/cheat-sheet/" target="_blank">
+        <img src="../cheat-sheet_page_2.png" alt="Gatsby Cheat Sheet page 2" style="max-height: 100vh" />
+    </a>
+</div>
+
+---
+
+<Slide>
+
 <div style="margin-top: -4em">
 
 # An app for today
@@ -147,6 +170,8 @@ https://www.gatsbyjs.org/docs/glossary
 
 # Install time
 
+Node.js 12+ recommended
+
 </div>
 
 https://github.com/marcysutton/gatsby-a11y-workshop
@@ -176,9 +201,13 @@ Online: https://marcysutton.github.io/gatsby-a11y-workshop
 
 ---
 
+![GraphiQL explorer for this app](../graphiql.png)
+
+---
+
 <Slide>
 
-# Get some tools
+# Get some<br />accessibility tools
 
 ⚒
 
@@ -220,16 +249,6 @@ Online: https://marcysutton.github.io/gatsby-a11y-workshop
 
 <Slide>
 
-# Responsive design<br />is good for accessibility
-
-<img alt="zoomed-in view of a desktop prototype" src="../magnification-a11y.png" style="margin-top: 1em; max-height: 500px;" />
-
-</Slide>
-
----
-
-<Slide>
-
 # #A11y debugging
 
 - Render in a web browser
@@ -362,6 +381,16 @@ Uses platform Accessibility APIs to communicate page<br /> structure & content t
 
 <Slide>
 
+# What are platform<br />Accessibility APIs?
+
+https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/
+
+</Slide>
+
+---
+
+<Slide>
+
 # Visualize with browser DevTools
 
 Semantic markup and CSS styles impact the accessibility tree
@@ -1014,7 +1043,7 @@ Notify assistive tech users without moving focus
 - Asynchronous save / update / etc.
 - Combobox usage / list filtering
 - Chat widgets
-- Title changes*
+- Title changes
 
 </Slide>
 
@@ -1136,8 +1165,7 @@ Navigation where JavaScript controls browser history<br />and dynamically maps U
 
 - Automatic client-routing
 - Focus management
-- Can be overridden in `gatsby-browser.js`
-- Note: improvements currently underway
+- [Recent improvements in Gatsby core](https://github.com/gatsbyjs/gatsby/pull/19290)
 
 </Slide>
 
@@ -1148,8 +1176,9 @@ Navigation where JavaScript controls browser history<br />and dynamically maps U
 # A11y routing research
 
 - A small UI control in each view target, like a skip link
-- Label with nearby content and its action,<br />e.g. "Portfolio, skip to navigation"
+- Label with its action, e.g. "skip to navigation"
 - When a user clicks a nav link, move focus to this control
+- Use a Live Region to announce page change*
 
 ![focus diagram](../focus-diagram.png)
 
@@ -1159,6 +1188,16 @@ Navigation where JavaScript controls browser history<br />and dynamically maps U
 
 <Slide>
 
+# Responsive design<br />is good for accessibility
+
+<img alt="zoomed-in view of a desktop prototype" src="../magnification-a11y.png" style="margin-top: 1em; max-height: 500px;" />
+
+</Slide>
+
+---
+
+<Slide>
+
 # Client-side routing demo
 
 http://localhost:8000
@@ -1234,6 +1273,34 @@ Semantic HTML communicates what's on a page to users of assistive technology, re
 
 <Slide>
 
+# Native HTML vs. ARIA
+
+Implicit and explicit semantics: built-in vs. bolt-on
+
+<CodeBlock side="left">
+
+```html
+<header aria-label="Global">
+<footer aria-label="Global">
+```
+
+</CodeBlock>
+
+<CodeBlock side="right">
+
+```html
+<div role="banner" aria-label="Global">
+<div role="contentinfo" aria-label="Global">
+```
+
+</CodeBlock>
+
+</Slide>
+
+---
+
+<Slide>
+
 # Tools for testing semantics
 
 - [Accessibility Insights: Headings](https://accessibilityinsights.io)
@@ -1413,7 +1480,7 @@ gatsby build
 
 # Gatsby progressive<br />enhancement demo
 
-http://localhost:8000/enhanced/tablist
+http://localhost:8000/enhanced-tablist
 
 </Slide>
 
@@ -1425,7 +1492,7 @@ http://localhost:8000/enhanced/tablist
 
 Play with progressive enhancement
 
-- [components/tab-list.js](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/src/components/better/tab-list.js)
+- [tab-list.js](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/src/components/better/tab-list.js)
 
 </Slide>
 
@@ -1436,7 +1503,7 @@ Play with progressive enhancement
 # Exercise answer
 ## Progressive enhancement
 
-- [examples/tablist.js](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/examples/progressive-enhancement)
+- [Working tab-list.js example](https://github.com/marcysutton/gatsby-a11y-workshop/blob/master/examples/progressive-enhancement)
 
 </Slide>