Improve styling and accessibility of the diff collapse button.
Review Request #13230 — Created Aug. 23, 2023 and submitted — Latest diff uploaded
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.