Initial commit

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+package-lock.json
+.next
+public
+dist
+.parcel-cache
+.DS_Store
+**/.DS_Store
+.cache

CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [email protected]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

LICENSE.md

@@ -0,0 +1,4 @@
+This material is available for private, non-commercial use under the
+[GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). If you
+would like to use this material to conduct your own workshop, please contact me
+at [email protected].

README.md

@@ -0,0 +1,133 @@
+<div>
+  <h1 align="center">✨ Testing Accessibility with Marcy Sutton ✨</h1>
+
+  <a href="https://testingaccessibility.com">
+    <img
+      alt="Testing Accessibility: Interactions & Mechanics by Marcy Sutton"
+      src="./ta-promo-image-interactions.png"
+    />
+  </a>
+
+  <h2 align="center">
+    Building accessible web applications with HTML, CSS, JavaScript, and React
+  </h2>
+  <p>
+    Ensuring your frontend code is accessible requires consistent development effort and testing of inclusive markup and scripted interactions. In this workshop we’ll build an
+    accessible web application using widely supported and proven tools and
+    techniques. We’ll focus on the tricky parts you’ll run into building interactive UI components.
+  </p>
+</div>
+
+<hr />
+
+<!-- prettier-ignore-start -->
+[![GPL 3.0 License][license-badge]][license]
+[![Code of Conduct][coc-badge]][coc]
+<!-- prettier-ignore-end -->
+
+## Prerequisites
+
+- This workshop is intended for intermediate to advanced web developers. Beginners are still
+welcome to follow along.
+- Experience with HTML, CSS, and JavaScript will be necessary. Experience with React will be helpful.
+
+## Options for working with this material
+
+- Browser-based setup with GitPod
+  - Note: GitPod may have accessibility issues
+- Download a zip file for local setup
+- Clone this Git repo for local setup (see instructions below)
+
+## System Requirements for Local Setup
+
+- [git][git] v2.13 or greater
+- [NodeJS][node] `12 || 14 || 15 || 16`
+- [yarn][yarn] v1
+
+All of these must be available in your `PATH`. To verify things are set up
+properly, you can run this:
+
+```shell
+git --version
+node --version
+yarn --version
+```
+
+If you have trouble with any of these, learn more about the PATH environment
+variable and how to fix it here for [windows][win-path] or
+[mac/linux][mac-path].
+
+## Setup
+
+> If you want to commit and push your work as you go, you’ll want to
+> [fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
+> first and then clone your fork rather than this repo directly.
+> Be sure to fetch the latest code on the day of the workshop by [syncing your fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork).
+
+After you’ve made sure to have the pre-requisites installed, you
+should be able to run a few commands to get set up:
+
+```
+git clone https://github.com/testing-accessibility/workshop-interactions-mechanics.git
+cd workshop-interactions-mechanics
+yarn
+```
+
+There may be periodic changes to this repo. To update your local build, run:
+
+```
+git pull
+```
+
+Note: if you have local changes, you'll need to commit them to a branch. Here's
+some extra help on using Git: [https://www.freecodecamp.org/news/git-pull-explained/]
+
+If you get any errors when building the site, please read through them and see if
+you can find out what the problem is. If you can’t work it out on your own then
+please [file an issue][issue] and provide _all_ the output from the commands you ran
+(even if it’s a lot).
+
+## Running the project locally
+
+This repo contains various workshop files and a React web application. To get the app up and running (and really see if it worked) with [Parcel](https://parceljs.org), run this command from the project’s root folder:
+
+```shell
+yarn start
+```
+
+This should start the site for your browser at the address indicated in your Terminal:
+`http://localhost:1234`
+
+## Working through the exercises
+
+This is my favorite topic in accessibility: user interactions and mechanics! We’ll dig into common patterns for keyboard interactions and how screen readers overlap. We’ll use JavaScript and advanced techniques to craft accessible experiences for a variety of user inputs.
+
+This workshop will touch on numerous components including skip links, the date picker, form validation, and an image slideshow. The local URL is: `http://localhost:1234/`
+
+- [exercise1-the-keyboard](https://github.com/testing-accessibility/workshop-interactions-mechanics/tree/main/exercise1-the-keyboard)
+- [exercise2-focus-management-js](https://github.com/testing-accessibility/workshop-interactions-mechanics/tree/main/exercise2-focus-management-js)
+- [exercise3-screen-reader-overlap](https://github.com/testing-accessibility/workshop-interactions-mechanics/tree/main/exercise3-screen-reader-overlap)
+- [exercise4-announcements-with-AT](https://github.com/testing-accessibility/workshop-interactions-mechanics/tree/main/exercise4-announcements-with-AT)
+- [exercise5-advanced-scripting-ARIA](https://github.com/testing-accessibility/workshop-interactions-mechanics/tree/main/exercise5-advanced-scripting-ARIA)
+
+This structure will allow you to iterate on working files with separate directories for the example sections.
+
+The purpose of an exercise is **not** for you to work through all the material.
+It’s intended to get your brain thinking about the right questions to ask as
+we go through the material together.
+
+Contributions of any kind are welcome!
+
+<!-- prettier-ignore-start -->
+<!-->
+[yarn]: https://classic.yarnpkg.com/lang/en/
+[node]: https://nodejs.org
+[git]: https://git-scm.com/
+[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
+[license]: https://github.com/marcysutton/testing-accessibility-demos/blob/main/LICENSE
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/marcysutton/testing-accessibility-demos/blob/main/CODE_OF_CONDUCT.md
+[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/
+[mac-path]: http://stackoverflow.com/a/24322978/971592
+[issue]: https://github.com/marcysutton/testing-accessibility-demos/issues/new-->
+<!-- prettier-ignore-end -->