Merge pull request marcysutton#3 from kristakoch/master

Adds prereqs to README, fixes two links, and modifies slide 63
AlbyIanna · Aug 13, 2019 · 66e504c · 66e504c
2 parents 1b58b75 + 870cf62
commit 66e504c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -50,3 +50,7 @@ npm start
 4. To look at the answers from the exercises, check out the [`/examples`](https://github.com/marcysutton/js-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/js-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```
diff --git a/src/pages/enhanced-tablist.jsx b/src/pages/enhanced-tablist.jsx
@@ -17,7 +17,7 @@ const ProgressiveEnhancementPage = () => {
         </h2>
         <p>The goal of an enhanced widget is to output plain HTML markup at build time, with ARIA role enhancements when JavaScript loads.</p>
         <p>To test this kind of demo: run <code>gatsby build && gatsby serve</code> and turn off JavaScript in your browser</p>
-        <p><strong>[<a href="https://github.com/marcysutton/js-a11y-workshop/blob/master/src/components/better/enhancing-list.js">starter component source</a>]</strong></p>
+        <p><strong>[<a href="https://github.com/marcysutton/js-a11y-workshop/blob/master/src/components/better/tab-list.js">starter component source</a>]</strong></p>
         <EnhancingList items={[
             {id:0, label:'tab 1'},
             {id:1, label:'tab 2'}

diff --git a/src/slides/index.mdx b/src/slides/index.mdx
@@ -1130,11 +1130,12 @@ http://localhost:8000/layout
 
 <Slide>
 
-# Exercise
+# Practice Problem
 ## Use semantic markup
 
-- Gatsby page shell: [pages/semantics.jsx](https://github.com/marcysutton/js-a11y-workshop/tree/master/pages/semantics.jsx)
-- vanilla.js shell on [Codepen]()
+Add markup to a blank page and test it using Accessibility Insights.
+
+- Gatsby page shell: [pages/semantics.jsx](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/pages/semantics.jsx)
 
 </Slide>
 

diff --git a/src/templates/slide.jsx b/src/templates/slide.jsx
@@ -72,7 +72,7 @@ export default ({ header = 'true', children }) => (
     <SEO title="Workshop Slides" keywords={['workshop', 'javascript', 'accessibility', 'react']} />
     { header === 'true' ? <Header className="header">
       <P>
-        <a href="/js-a11y-workshop">
+        <a href="/">
           <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 125">
             <title>back arrow</title>
             <path d="M42.7 32.7l-.2-15.8c0-1-.6-1.8-1.5-2.2-.9-.4-1.9-.3-2.7.4L2 45.8c-.6.5-.9 1.2-.9 1.9s.3 1.4.9 1.9l37.2 30c.5.4 1 .6 1.6.6 1.4 0 2.5-1.1 2.5-2.5v-.3L43.1 62h1.4c18.2 0 38.3 2.7 49.8 22.4.5.8 1.3 1.2 2.2 1.2.2 0 .4 0 .7-.1 1.1-.3 1.8-1.3 1.8-2.4-.1-8.2-3.4-20.6-12.2-31.2-7.3-8.5-20.6-18.6-44.1-19.2zm1.7 24.2h-3.9c-.7 0-1.3.3-1.8.8s-.7 1.1-.7 1.8l.2 12.9L7.5 47.6l30.1-25.4.2 12.9c0 1.4 1.1 2.5 2.5 2.5h.2c34.6 0 47.9 20.9 51.9 35.7-13-14.2-31.2-16.4-48-16.4z" />