Accessibility Update - Githubissues

kpeatt commented 10 years ago

Status: Opened for visibility Reviewers: @jeffkamo @scalvert @tedtate

Changes

Pinny generates a unique id for the header and specifies that id in an aria-labelledby attribute on each Pinny
The modal dialog traps keyboard focus inside the modal dialog so the user can’t accidentally interact with the window behind the modal dialog.
The position of focus before the modal window opens is saved and the focus is restored to this location after the modal dialog closes.
Interactivity with the page main content is disabled when Pinny is open.
We add a role="document" attribute to the pinny__wrapper.
After opening pinny, focus is placed on Pinny to start screen readers on that content.
Notes
Fixes #30
Fixes #31
How to Test
1. Enable VoiceOver on your Phone or use ChromeVox for Chrome.
2. Attempt to use Pinny with a screen reader.
3. Try navigating between form elements when Pinny is open.

kpeatt commented 10 years ago

We should probably make the classes use pinny.CLASSES now.

kpeatt commented 10 years ago

We should probably make the classes use pinny.CLASSES now.

I made this so.