Fix CSS availability and accessibility for modalboxes.

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

Information

Djblets
release-2.0.x

Reviewers

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 ID
Fix common styling and ARIA roles for modalboxes.
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.
6b8865f7e77fc5b9f8cbeb74eb9df5d29dc13227
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-2.0.x (713dfa1)