• 
      

    Improve styling and accessibility of the diff collapse button.

    Review Request #13230 — Created Aug. 23, 2023 and submitted — Latest diff uploaded

    Information

    Review Board
    release-6.x

    Reviewers

    This gives the diff collapse button a fresher look, helping it to fit in
    with the new diff viewer styles. It's now the same shade of blue as the
    diff headers, has a slightly rounded look, and says "Collapse" rather
    than just showing an icon.

    This button has been converted to a CSS component, and the HTML in the
    templates de-duplicated, helping to keep this all manageable. It's also
    been given ARIA attributes and a role to help screen readers (although
    there are still usability challenges with the DOM placement of this
    button). Further improvement for specifying line numbers and the
    filename for screen readers would be helpful as well, but is a larger
    task.

    The z-index of the button has been fixed so it won't float above the
    Unified Banner.

    Some of the old CSS around this button have been cleaned up.

    The button icon is handled by mixing in a .rb-icon-... definition.
    This required partially reverting a recent change to make all
    definitions private in LessCSS. The reason for that issue before was
    that two mixins were named .icon(), and thus were combining into one
    rule. Since both have been renamed, this is no longer a problem. To
    further help avoid issues, .rb-icon() has been renamed to
    .make-rb-icon().

    Unit tests pass.

    Tested the collapse button in the diff viewer in various kinds of
    expanded content, and in diff fragments for changed, added, and
    deleted files. Verified positioning and behavior in each.

    Verified that there was no issues between datagrid and Review Board
    icons.

    Commits

    Files