Modal dialogs are not accessible

[Jono M]

The dialog boxes that appear when editing a block on a page are not accessible to screen reader/keyboard users for various reasons
- They are inserted below all other elements and focus is not set to them
- Even if the user finds the dialog in the tabbing order they can freely tab in and out of it (even though the rest of the page is greyed out), which is confusing
- The close button's alt text is 'X'

My preferred solution is to set focus to the close button and add aria-hidden to the page content to lock focus to the dialog.

Affects latest master

(WCAG Level A)

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/2943

[Steven (stevens-q)]

=== Bug #1270987 Modal dialogues are not accessible to screen readers ===

== How to test ==
1. create or edit any profile page
2. insert any type of block content
3. confirm that the edit and delete icons in the top right hand corner of the block are displayed

== Test Results ==
3. confirmed that the edit and delete icons in the top right hand corner of the block are displayed ✔

Catalyst QA Approved ✔

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/2943
Committed: http://gitorious.org/mahara/mahara/commit/3c18889818345e0dd3da5d1028eba3aecb244a94
Submitter: Son Nguyen (<email address hidden>)
Branch: master

commit 3c18889818345e0dd3da5d1028eba3aecb244a94
Author: Jono Mingard <email address hidden>
Date: Tue Jan 21 14:02:06 2014 +1300

Made block configuration dialog keyboard-accessible (Bug #1270987)

Add descriptive alt text to 'Configure' and 'Delete' buttons in page editor,
add descriptive alt text to configuration dialog close button, set focus
to close button when the dialog is opened and add aria-hidden to the
main content of the page so that screen reader users cannot tab out of the
dialog.

Change-Id: I526ddbe08fc8f50171fd1b4b68ee5c7cbcd3e228
Signed-off-by: Jono Mingard <email address hidden>