Update the review request box for modern, CSS-driven layout.
Review Request #13293 — Created Sept. 29, 2023 and submitted
The review request box historically was built with floats and
JavaScript-based layout. While this generally worked, we had an issue
with the Testing Done box in 6.0 where its height could get capped to
the lower bounds of the Details pane.A JavaScript workaround wasn't the solution. Moving to modern CSS-based
layout methods was the way forward.The box is now built using our standard CSS Component style, and uses
CSS Grid and Flexbox to manage the layout. This is faster, future-proof,
and allows us to eliminate a lot of JavaScript.The old CSS was a bit of a mess, without a clear structure. We now have
a specific container for the field panes, and a container for each pane.
These are set up as grid areas, ensuring we can lay them out exactly as
we want.There are no differences in layout, with the exception that the details
pane now has a bit more breathing room, which is easier to spare on
modern displays, and more necessary with the recent fixes to the display
of inline editors.The review request boxes have also been updated to have ARIA labels.
These are fairly generic right now, but should help with navigation
nonetheless.
Tested the review request page, diff viewer, review UIs for images,
text files, and PDFs, making sure there were no regressions. These were
checked on desktop and mobile.
- Change Summary:
-
- Removed the incomplete
role
description. - Added an
aria-label
description instead, and added this to the main review request box.
- Removed the incomplete
- Commits:
-
Summary ID 9608d2f1d6ba948a3d2194509e831374f929896d 1e129fa0d4aabd54dc23c9c72e416ffd93912ed9 - Diff:
-
Revision 2 (+912 -794)
Checks run (2 succeeded)
- Change Summary:
-
Changed capitalization in ARIA labels to "Review Request".
- Commits:
-
Summary ID 1e129fa0d4aabd54dc23c9c72e416ffd93912ed9 95cfbcf607ab14a468c6eb799f843a08e94dfd8a - Diff:
-
Revision 3 (+912 -794)