• 
      

    Fix styling of file attachment navigation and backgrounds.

    Review Request #13911 — Created May 30, 2024 and submitted — Latest diff uploaded

    Information

    Review Board
    release-7.x

    Reviewers

    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 the review-request CSS class to rb-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.


    Commits

    Files