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)