Unify code base for modals/ lightboxes

Description

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)

  1. Focus must be managed explicitly:

    1. 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.

    2. When the modal is closed, focus should shift appropriately

      1. i. If action by the user triggers a new process, focus should shift to first new actionable item

      2. 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.

    3. While the dialog is open, only the controls within the dialog are able to receive focus.

  2. Keyboard users must be able to control the dialog:

    1. 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.

    2. Bind key press event to entire document so that when the escape key is pressed, the dialog is closed.

    3. Modal controls, including the control to close the dialog, must be keyboard accessible.

Validation Procedures (use keyboard only)

  1. Navigate to the control which invokes the dialog

  2. Activate the control by pressing the enter key

  3. Verify that the dialog opens

  4. Verify that focus is shifted to either the first focusable item, or to the dialog as a whole

  5. Activate the tab key multiple times

  6. Verify that the only items that get focus are those focusable items that exist in the dialog.

  7. 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

Code Samples

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
Edx Admin [Administrator]
August 6, 2014, 2:59 PM

commented on 2013-10-18T13:29:58.775-0400:

let us know about any context around this ticket that needs to be captured here.

Edx Admin [Administrator]
August 6, 2014, 2:59 PM

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.

Edx Admin [Administrator]
August 6, 2014, 2:59 PM

commented on 2013-10-02T13:21:25.133-0400:

Very useful link:
http://accessibility.oit.ncsu.edu/blog/2013/09/13/the-incredible-accessible-modal-dialog/

Edx Admin [Administrator]
August 6, 2014, 2:59 PM

created original issue PR-253 on 2013-09-25T14:37:26.103-0400

Assignee

Unassigned

Reporter

KarlG

Labels

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Epic Link

Priority

Unset