feat WAI-ARIA - Modal dialog

[ymeine]

Mainly brings accessibility to modal dialogs.

Dialog features

Label (title)

Added the label information for the popup associated to the modal dialog. It is bound to the element containing the text of the latter's title.

Accessible icons

Features:

• labels for icons can be specified: they will result in tooltips and aria labels
  • this implied opening a new property for icons allowing the specification of a label (the tooltip one was already existing)
• icons are accessible using tab
• icons react on "return" and "enter" keys, to trigger their action
• the outline is displayed around icons when they are focused

Issues:

• the "initial" outline width for Firefox is too big and does not correspond to the actual native outline we can see on focused elements
• JAWS can't read properly the label of the first inserted icon (first in the DOM)

Glitches:

• the tab order for icons is visually reversed, due to the floating positioning being contrary to the DOM insertion order

Background elements hiding

Features:

• the elements of the body that visually resides behind the opened modal dialog are now ensured as hidden as long as the dialog is opened. These elements are restored to their previous state when the dialog is closed.

Glitches:

• this feature implementation is limited to a sequence of modal dialogs that are closed in the reverse order of their opening.

Focus restoration

Features:

• the element that was focused just before opening the dialog is memorized and the focus is put back on it when closing the dialog

Issues:

• the icon reacts on the key down event: if the element on which the focus is put back opens the dialog upon the counterpart key up event (same key), it makes it impossible to close the dialog without having it opened again immediately afterwards

Glitches:

• a simple reference to the native DOM element is internally saved: if this element instance is not present in the DOM anymore, this won't work (usually the case upon AT refreshes)

Side changes

fix - Action widgets (Button & Link)

Ensure keyup is handled only if keydown happened.

feat - WAI-ARIA - Icon

Features:

• icons accept a new property to specify their labels
• icons are accessible using tab
• icons react on "enter" and "space" keys, to trigger their action
• the outline is displayed around icons when they are focused

Issues:

• the "initial" outline width for Firefox is too big and does not correspond to the actual native outline we can see on focused elements

feat - MultiSelect

The escape key now closes the dropdown.

fix - Fixed the escape behavior for several widgets

That way widgets such as the dialog can be closed with this key.

Now their associated controllers properly stop the behavior of the events as needed.

I had to add an additional property to the controllers' report model so that they can tell to prevent the default behavior of the browsers without making the propagation stop. This is needed to keep a bug fix while enabling the new behavior on escape.

[divdavem]

Even if role and labelId are not supposed to contain quotes, I think it is good, to be sure we don't have injections, to either escape (with the utilities from aria.utils.String) role and labelId or to use setAttribute once the DOM element is available.

[divdavem]

The value should be escaped here too.

[divdavem]

🆗 e597d56 seems fine for me. You can integrate it once the travis build is 🆗