Modernize the look and implementation for update bubbles.
Review Request #13917 — Created May 31, 2024 and submitted
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 |
---|---|
a374d8c006dd8761ebd731c4208fc1f4119a6396 |