• 
      

    Improve styling and accessibility of the diff collapse button.

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

    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.

    Summary ID
    Improve styling and accessibility of the diff collapse button.
    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. 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()`.
    977bf9c7d5a417967403e2cb17f91d5863fb57d3
    maubin
    1. Can you add a picture of the new button?

      1. Nvm, I see it in your other change.

    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-6.x (ffb0e89)
    david
    1. Ship It!
    2.