Updated the README with instructions for preparing for the Reactathon…

… workshop

.nvmrc

@@ -0,0 +1 @@
+8.10.0

README.md

@@ -1,2 +1,118 @@
-# reactathon-a11y-workshop-2
-Reactathon Mar 2019 Accessibility Workshop with React
+# React A11y Workshop 
+Instructor: Erin Doyle  
+
+Thank you for signing up for the workshop on Building Accessible Web Apps with React! 
+Please read through this entire document and follow the steps to get set up. Please complete each step *before* the workshop starts to ensure that you are ready to go from the start!  
+
+## Contents
+1. [Set up the Dev Environment](#1.-dev-env-setup)
+2. [Clone and Run the Test Application](#2.-clone-and-run-the-test-application)
+3. [Pre-Class Resources](#3.-pre-class-resources)
+
+
+## 1. Dev Env Setup
+
+Please follow the steps to get your machine set up **_before Saturday March 30th_** to ensure that you're ready to code from the start.
+
+_A laptop is required to attend this workshop.  It's suggested that you also bring a pair of headphones for listening to 
+the screen reader that we'll be using frequently for testing._  
+
+### Step 1: Install core tools
+Please ensure that your machine has the following core tools installed:
+
+* [Git](https://git-scm.com/downloads)
+* [Node.js](https://nodejs.org/en/) v8.0 or higher
+    * NVM is the easiest way to manage Node. [Its setup instructions
+    here](https://github.com/creationix/nvm#installation). Then run `nvm install
+node && nvm alias default node`, which installs the latest version of Node.js
+and sets up your terminal so you can run it by typing `node`. With nvm you can
+install multiple versions of Node.js and easily switch between them.
+    * New to [npm](https://docs.npmjs.com/)?
+* An editor of your choice that you are comfortable using
+
+### Step 2: Install testing tools
+When you've verified that your machine has the above requirements, install the following tools: 
+
+* aXe browser plugin:
+    * Chrome: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd
+    * Firefox: https://addons.mozilla.org/en-us/firefox/addon/axe-devtools/
+* tota11y browser plugin:
+    * Chrome: https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en
+    * Firefox: https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/
+* High Contrast Mode:
+    * Mac - High Contrast browser plugin:
+        * Chrome: https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph
+    * Windows - High Contrast Mode:
+        * See here for how to enable: https://support.microsoft.com/en-us/help/13862/windows-use-high-contrast-mode
+* Screen Reader:
+    * Mac - VoiceOver:
+        * See here for how to use and familiarize yourself with: https://help.apple.com/voiceover/info/guide/10.11/
+    * Windows - NVDA:
+        * Download: https://www.nvaccess.org/download/
+        * See here for how to use and familiarize yourself with: https://www.nvaccess.org/files/nvda/documentation/userGuide.html?
+
+### Step 3: Install optional tools (optionally... ;) ) 
+If you are using a Mac and would like to also be able to test Windows-only based tools such as the NVDA screen reader,
+High Contrast Mode, and IE or Edge browsers then you can do so by setting up a Windows Virtual Machine on your Mac.
+See here for step by step instructions: [How to Set Up a Windows VM](docs/VM_SETUP.md)
+
+Other optional tools:
+
+* NoCoffee browser plugin:
+    * Chrome: https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
+* WCAG Luminosity Contrast Ratio Analyzer browser plugin:
+    * Chrome: https://chrome.google.com/webstore/detail/wcag-luminosity-contrast/lllpnmpooomecmbmijbmbikaacgfdagi/related?hl=en
+
+### Step 4: Configure
+Note that different browsers may have different keyboard control options available. Most modern browsers support pressing Tab 
+to move forward or Shift + Tab to move backwards through the focusable elements, but some browsers have their own idiosyncracies:
+
+Safari doesn't allow you to tab through links by default; to enable this, you need to: 
+1. open Safari's Preferences
+2. go to Advanced
+3. check the Press Tab to highlight each item on a webpage checkbox
+
+Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to: 
+1. go to Preferences > Advanced > General
+2. then uncheck "Always use the cursor keys to navigate within pages"
+3. Next, you have to open your Mac's System Preferences app
+4. then go to Keyboard > Shortcuts
+5. then select the All Controls radio button
+
+
+## 2. Clone and run the test application
+1. Clone this project
+2. Install dependencies by entering `npm install`
+3. Run by entering: `npm run start`
+4. Open `http://localhost:3000` in a browser
+
+_**NOTE:** the HEAD revision of the master branch contains the fully completed workshop source.  We will be checking out
+various revision tags to step through the evolution of improving this code with the first being completely inaccessible and 
+ending with a version that has all accessibility findings resolved._
+
+
+## 3. Pre-class Resources
+
+Please review the following materials to help you better prepare for the workshop:
+
+### Accessibility
+Here are some short videos that may be helpful to watch that we probably won't have time to watch during the workshop and will help us hit the ground running:
+* [Perspective Videos](https://www.w3.org/WAI/perspective-videos)
+* [Screen Reader Basics: VoiceOver](https://youtu.be/5R-6WvAihms)
+* [Screen Reader Basics: NVDA](https://youtu.be/Jao3s_CwdRU)
+
+
+### Git basics
+For the workshop you'll need to be able to check out specific tag revisions using git.  Please familiarize yourself with how to do this.
+* [Git Basics Tagging](https://git-scm.com/book/en/v2/Git-Basics-Tagging) See section "Checking out Tags".
+
+### ES6
+If you're not familiar with ES6, you'll want to start here. Read one or both.  
+* [ES6 Interactive Guide](http://stack.formidable.com/es6-interactive-guide/#/)
+* [ES6 Guide](https://mrzepinski.gitbooks.io/es6-guide/content/). Only sections 1-5 recommended.
+
+### React Foundations
+If you're not comfortable with React, you should read through the following resources:  
+* [Thinking in react](https://facebook.github.io/react/docs/thinking-in-react.html)
+* [9 things every react beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know)
+* [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

docs/VM_SETUP.md

@@ -0,0 +1,97 @@
+# Setting up a Windows VM
+There are times when we really need to be able to run something in Windows.  Whether testing something in IE or testing 
+something with the NVDA screen reader, etc, these kinds of things can only be done on a Windows machine.  Setting up a 
+Windows VM is a great solution to these needs!
+
+## VirtualBox
+This article will focus on using VirtualBox.
+
+### References
+* https://www.virtualbox.org/manual/ch01.html
+
+### Installing
+1. Download and install VirtualBox
+2. Download a Windows 10 ISO
+3. Unzip the downloaded Windows ISO (you may need to use something like The Unarchiver)
+4. Open VirtualBox and click on the “New” button to build a new virtual machine
+5. Name the new virtual machine “Windows 10 VM” (or something equally obvious), select “Microsoft Windows” as the type and choose “Windows 10” as the version, then choose Continue
+6. Select to create a new virtual hard drive, then choose Continue again
+7. Back at the primary VirtualBox screen, choose “Start” to boot the new Windows 10 volume 
+8. Since there is no drive or OS installed yet, you will be asked to choose a virtual optical disk, click on the Folder icon and choose the Windows 10 ISO you downloaded earlier, then click “Start”
+9. In a moment or two you’ll be in the Windows 10 installer, select your language and click “Next”
+10. Go through the standard Windows 10 installation experience
+11. You can now use the VM as you normally would a Windows machine.  You can install whatever additional tools or applications you need to perform testing such as NVDA, etc.
+
+
+### Recommended Settings
+#### RAM
+1024 – 2048MB is what Microsoft recommends as the minimum for Windows 10 but 4GB is the lowest allowed in the VirtualBox settings
+
+#### Video Memory
+18 MB is the minimum recommended
+
+#### Audio
+You may need to change the default settings to get audio to work in the VM.  The following values may possibly vary based on the host machine model:
+
+1. Check the "Enable Audio" box
+2. Make sure "Host Audio Driver" is set to "CoreAudio"
+3. Set "Audio Controller" to "Intel HD Audio"
+
+
+### Logging In
+The default password is: Passw0rd!
+
+
+
+### Accessing services running locally on the host machine
+The default Network settings should already support this (using an "Attached to" value of "NAT").  All that needs to be 
+determined is what IP address to use in the VM ("guest") to reach the desired service on the host machine and this will 
+be the Default Gateway address on the guest machine.  To find the Default Gateway address:
+
+
+
+1. In the command prompt enter the command: ipconfig
+2. the output should look something like this: 
+```bash
+Windows IP Configuration
+
+Ethernet adapter Local Area Connection:
+
+        Connection-specific DNS Suffix  . : cashstar.lan
+		Link-local IPv6 Address . . . . . : fe80::ed93:d881:9c62:49a%3
+        IPv4 Address. . . . . . . . . . . : 10.0.2.15
+        Subnet Mask . . . . . . . . . . . : 255.255.255.0
+        Default Gateway . . . . . . . . . : 10.0.2.2
+```
+
+In this example, the guest can reach the host machine on `10.0.2.2`.
+
+So now if, for example the host machine is running a web server on port 6006, you should be able to connect to that web 
+server on the host by openning a browser in the VM and entering a URL of: `10.0.2.2:6006`.
+
+#### Hosts File
+You can make this even easier by modifying the hosts file in the Window's VM to map a domain name to your host machine's IP Address:
+
+1. Open the Start Menu
+2. Type Notepad in the search field
+3. In the search results, right-click Notepad and select Run as administrator
+4. From Notepad, open the following file: `c:\Windows\System32\Drivers\etc\hosts`
+5. Add a new line to the end of the file
+6. Add an entry on that new line with the following format, replacing the fake values with the actual ones you wish to 
+use, then save your file: 
+```bash
+10.0.2.2		the_domain_name_you_wish_to_use			# any comments go here
+```
+
+
+### VM State
+When you close the VM you are presented 3 options.  This section of the manual, Saving the State of the Machine, explains them well. 
+
+What is important to know about the state of the VM is that you cannot update the settings when the VM is in the Saved state.  In order to transition the VM to a state that allows its settings to be modified either:
+
+1. highlight the VM in virtualbox, and press "discard"
+2. restart the VM, and the next time you close the VM, use the "shut down" option.
+
+
+### Snapshots
+Once you've got your VM installed and configured properly it would be wise to save a snapshot.  The Windows ISO will expire after 90 days so you'll want a nice place to start over from.  See here for the section in the manual on Snapshots.