Unify code base for modals/ lightboxes
The following is a cut & paste from an email I sent to Miki:
Looking at the www site and the LMS, it looks like there are two different code bases for modals. The modals used for "Help" have been fixed. Modals elsewhere have different behaviors. For instance, the "Forgotten password" modal works correctly when it comes to tab order, but the error handling has not been fixed. In the "Help" modal, if you fail validation focus is shifted to the error message. This is perfect. However, this doesn't operate the same in the "Forgotten password" modal. I noted in another ticket yesterday that another dialog allowed keyboard focus to underlying elements. It would be extremely beneficial to establish a single jQuery plugin for your modals to avoid introducing new issues in the future or missing accessibility issues in existing dialogs. I've pasted some guidance on accessible modals below.
This guidance applies for all modals & light boxes (hereafter the word modal is used to describe both)
Focus must be managed explicitly:
When a new modal appears, focus must be shifted to the first actionable item in the modal. Alternately, focus can be shifted to a piece of text that labels the dialog itself, such as a heading at the beginning of the dialog.
When the modal is closed, focus should shift appropriately
i. If action by the user triggers a new process, focus should shift to first new actionable item
ii. If user chooses to abandon a process or no new process is triggered, closing the modal shifts focus to the control that invoked the modal.
While the dialog is open, only the controls within the dialog are able to receive focus.
Keyboard users must be able to control the dialog:
User must be able to close the dialog. Provide an explicit link or button to close the dialog, preferably as the first actionable item in the dialog.
Bind key press event to entire document so that when the escape key is pressed, the dialog is closed.
Modal controls, including the control to close the dialog, must be keyboard accessible.
Validation Procedures (use keyboard only)
Navigate to the control which invokes the dialog
Activate the control by pressing the enter key
Verify that the dialog opens
Verify that focus is shifted to either the first focusable item, or to the dialog as a whole
Activate the tab key multiple times
Verify that the only items that get focus are those focusable items that exist in the dialog.
Verify that all actionable items in the dialog gain focus.
Note: According to W3C DOM specifications, the elements which are able to natively gain focus are A (when given an href attribute), AREA, BUTTON, INPUT, SELECT, and TEXTARA. You should add '*[tabindex="0"] as part of selector as well
Steps to Reproduce
Reason for Variance
User Impact Summary
► commented on 2013-10-18T13:29:58.775-0400:
let us know about any context around this ticket that needs to be captured here.
► commented on 2013-10-15T11:44:00.164-0400:
, thanks for this write up. I'm going to add this to the product request board.