Feature: Modal Login Dialog

Goal: Create an accessible modal dialog

User Story

As a registered member of the site, I want to enter my credentials and be logged in so that I can begin using my special member features,

Scenario 1: I am on the homepage and want to launch the login dialog

1. Given that I am on the homepage
   1. I see a login button
2. When I gain focus on the login button
   1. I see a visible state change
3. When I activate the login button
   1. I see a modal dialog appear
   2. And I see that there is a Close button
   3. And I see that the Close button has focus
   4. And I see that the Dialog has a heading of "Login"
   5. And I hear that I am on a dialog
   6. And I hear that the dialog is labelled Login

Scenario 2: The dialog is open and is truly modal

1. Given that the modal dialog is open
   1. I see that there is a clear visual difference on the dialog vs. the rest of the page.
2. When I strike the Tab key or the Shift+Tab keystroke
   1. I only get focus on items in the dialog
3. When I use AT features to show page shortcut
   1. I only see a list of things inside the dialog

Scenario 3: The dialog is open but I don't want to use it

1. Given that the modal dialog is open
2. When I strike the escape key
   1. I see that the dialog has closed
   2. And focus is back at the Login Button

Scenario 4: The dialog is open and I want to log in

1. Given that the modal dialog is open
2. When I strike the tab key
   1. I see that the username gets focus
   2. And I can type in my username
3. When I strike the tab key a second time
   1. I see that the password field gets focus
   2. And I can type in my password
4. When I strike the tab key a third time
   1. I see that the Login Button gets focus
5. When I strike the enter key
   1. I see that the dialog has closed
   2. And I am take to My Profile page