• 
      

    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)