Opened 6 years ago

Closed 5 years ago

#7862 closed bug (fixed)

Dialog: modal accessibility

Reported by: ezufelt Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.16
Keywords: a11y Cc:
Blocked by: Blocking:

Description (last modified by Jörn Zaefferer)

Firefox 8.0 JAWS 13 Dialog demos 1.9pre

Modal dialogs open with application mode on.

Basic Modal

  1. After tabbing once to close button I can use up / down arrows to access all other form controls in the DOM, cannot tab to other interactive controls. This is different from animated dialog, and other modals, where DOM contents outside of dialog are not available.

Message, Confirmation, Form

  1. Can only access dialog contents that are interactive elements, cannot access message text as it is not focusable.
  1. It is possible to get out of the modal 'sandbox'. Accessing address bar (alt + d), tabbing to page, then disabling and renabling Virtual PC cursor (JAWS key + z (twice)) and then a buffer refresh (JAWS key + Escape) allowed access to entire DOM contents. This appears true for all modals. This also causes problems with other keyboard operations. When not in modal dialog segment of the DOM it is impossible to go back a page (alt+left arrow or backspace) or even to close the browser (alt+f4).
  1. (Related to 2) From outside of the dialog pressing tab does not return to first focusable element in dialog.

Change History (6)

comment:1 Changed 6 years ago by Scott González

Keywords: a11y added
Status: newopen

comment:2 Changed 5 years ago by larowlan

Part of the issue here is that it's possible to tab out of modal dialogs, this is fixed in: https://github.com/larowlan/jquery-ui/commit/bb2c897f128e42dc8ad485719ee260d86e56befe

Last edited 5 years ago by larowlan (previous) (diff)

comment:3 Changed 5 years ago by Scott González

Milestone: 1.9.01.10.0

comment:4 Changed 5 years ago by Jörn Zaefferer

Description: modified (diff)

comment:5 Changed 5 years ago by Jörn Zaefferer

I've tested the issues described here against JAWS 14 and Firefox 16, based on the accessibility updates in the dialog branch: https://github.com/jquery/jquery-ui/pull/794

Basic Modal is now consistent with other demos: DOM content outside the dialog isn't available, both through tabbing and cursor up/down keys.

Modal Form:

  1. Can access both text inputs and other elements through cursor up/down keys, all content within the dialog is available. Only inputs are tab focusable. This is consistent with regular non-dialog markup.
  1. I followed the steps described and don't see the issue described. Focus moves correctly back to the dialog as it should.
  1. Can't get outside the dialog anymore. Though even if that would somehow happen again, we now have proper code in place to focus the first input, which applies when moving focus outside the page.

Some of these might have been fixed by updates in JAWS or Firefox, since I tested with newer versions then those available a year ago. Though especially the focus handling is something we improved inside the dialog itself.

Note: See TracTickets for help on using tickets.