Fix styling of file attachment navigation and backgrounds.
Review Request #13911 — Created May 30, 2024 and submitted — Latest diff uploaded
The Previous/Next file navigation buttons had a few style issues on dark
mode, some regressions, and bad interactions.They were bunched up against the review UI, which regressed a while back
when we renamed thereview-request
CSS class torb-c-review-request
.
That had intended to ensure enough space between the button and the
review UI, but that had broken. That spacing has been restored.The colors used on the navigation buttons have been updated to work in
both light and dark modes.Thumbnail backgrounds now use a darker color by default, and a matching
text color. This gives us text-based file attachment thumbnails that
look appropriate on dark mode. For consistency with rendering, we use
the "diff equals" theme color. We may want to revisit that down the road
when we build a proper CSS component for thumbnails, instead picking the
theme color for text-based attachments only.And finally, an interaction issue with navigation has been fixed. We
were wrapping the entire attachment in an<a href>
, but since that's
an inherently inline element and we're putting complex block-level
elements inside of it, the browsers are forced to try to compensate in
some form. They seem to do that these days by wrapping most inner
elements with their own<a href>
, creating a mess of styles. The end
result doesn't even make for a fully-clickable attachment.The solution is the same as what we use for file attachment thumbnails
on a review request. We now have an<a href>
overlay that sits on top
of the whole element and consumes all click events, giving us the
ability to navigate but also to respect browser link interactions. The
result is a wider clickable area for navigation. This has also been made
accessible.
Tested previous and next navigation in both light and dark mode, with
different types of file attachments.Tested the main review request thumbnails for image-based, PDF-based,
and text-based file attachments.