• 
      

    Modernize the look and implementation for update bubbles.

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

    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.

    Summary ID
    Modernize the look and implementation for update bubbles.
    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.
    a374d8c006dd8761ebd731c4208fc1f4119a6396

    david
    1. Ship It!
    2. 
        
    maubin
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-7.x (4934b0d)