• 
      

    Modernize the look and implementation for update bubbles.

    Review Request #13917 — Created May 31, 2024 and submitted — Latest diff uploaded

    Information

    Review Board
    release-7.x

    Reviewers

    The review request update bubbles recently got some dark mode style
    fixes, and a center-alignment, but still looked pretty archaic.

    This change updates the look to be closer in style to the new loading
    activity indicator pill at the top of the page. The bubble now shows as
    a rounded pill at the bottom, offset from the bottom slightly.

    The two actions (Update Page and Ignore) have been changed to icons (a
    refresh icon and a close icon), giving more focus to the message but
    with easy-to-scan actions.

    When the bubble appears, it slightly fades in and raises up just a touch
    (using CSS animations instead of jQuery animations). When it's closed,
    it reverses that.

    The whole bubble is also now built as a standard CSS Component, and with
    proper accessibility baked in. Screen readers should announce its
    presence when it appears, and users should be able to navigate to it.

    Tested in dark and light modes, desktop and mobile views.

    Tested focus indications when tabbing.

    Tested that the bubble was read by a screen reader when it appeared.


    Commits

    Files