1893224 - Tile and `...` button do not differentiate the hover state on the about:newtab

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Two tiles with hover state - Expedia's "..." button has hover state forced in Inspector while the BestBuy tile itself is hovered - both look the same.png

The hover indication is shared across the ... buttons and their tiles on the about:newtab page. It applies both to the tiles and story cards.

Being able to easily discern what exactly is hovered with a pointer is crucial for multiple groups of mouse users, especially those with limited vision or with a glare on their screens, with cognitive difficulties, ADHD, anxiety, as well as users with limited mobility who would risk activating wrong control otherwise or feel lost on the page. It's even more important when the controls are placed so closely to each other as the tile and its ... button (thus, the severity is access-s3)

It is recommended that the hover, as any other state of active UI, would not rely on a use of color alone and to ensure the indication provides at least 3:1 in color contrast between both the page background and the non-hovered control appearance. I this case, when the tile is focused, it is expected that the focused state would be apparent both within the set of tiles and next to the ... button, and vice versa.

Note: the bare minimum indication of hover to be provided is a change in pointer and/or addition of the tooltip. That's being said, this does not guarantee and does not provide a delightful experience, because users with low vision or neurodivergent users may have customized pointer and/or the tooltip may appear outside of the view of the magnification software. Also, tooltips have a slight delay that may make it harder for a user with cognitive difficulties to connect the hover and tooltip actions together, or it may distract a user with ADHD. Thus, providing a clear hover indication is highly recommended.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:amy, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Maxx Crawford [:maxx]]

Attachment: image.png

Triage note: UX laid out all the different interaction states for reference for the top sites shortcut:

https://www.figma.com/design/IBWq1tsiJqG4fyXWUKligD/HNT-Library?node-id=1-2334&t=WTEWmW7cg3SmvSex-4