Fix CSS availability and accessibility for modalboxes.

Review Request #11012 — Created May 7, 2020 and submitted

chipx86
Djblets
release-2.0.x
djblets

Our modalboxes have been around basically forever, but we've always sort
of had a half-baked implementation in Djblets. It didn't have any
centralized styling, and oddly, the extensions stylesheet actually
defined the only copy of any styles for modalboxes.

It also just hasn't aged well, with some old styles that weren't
optimal, and absolutely no clear accessibility support.

This change introduces a new stylesheet for modalboxes, and a new
djblets-ui Pipeline bundle that replaces djblets-widgets and
incorporates the modalbox styleesheet. (djblets-widgets was introduced
in 2.0 dev and has yet to ship.)

It also fixes up our accessibility issues. The modalbox and its
components now have appropriate ARIA attributes, and focus is capped to
the modal box. Some ordering issues with element construction have also
been added to make sure we're preparing elements before adding them to
the DOM.

What this doesn't do is move to our new CSS component standard. That
will probably not happen for Djblets 2.0.

Tested with some modalboxes (including the Review Dialog) in Review Board,
removing Review Board's own styling first (and adding the new bundle).
Verified things looked right.

Manually checked the ARIA attributes on the elements.

Tested keyboard focus to make sure I couldn't focus anything else in
the document.

Summary
Fix common styling and ARIA roles for modalboxes.
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-2.0.x (713dfa1)
Loading...