[low] Hover: Many Pages: Tooltip on hover cannot be dismissed or hovered without moving mouse

[ogumen]

Action Performed:

Prerequisites:

• User has created personal account and is logged into same.
• User has multiple chats in chat history with a lot of text per message. e.g. 500+ characters.
• Set text zoom to 125% (used to better demonstrate the issue).

1. Using Chrome, open https://staging.new.expensify.com/
2. Click on any chat with the amount of text mentioned in the preconditions.
3. Hover over any message that is under a message with enough text to extend to the end of the content area with 3 or more rows and note the context menu of graphical icon buttons [Copy (clipboard), mark as unread (envelope), edit comment (pencil), delete comment (Trash Can)].
4. While the icon button menu is displayed on hovering with the mouse, hover the icon buttons and note the tooltip displaying the visual button labels (mentioned in step 3).
5. Try to dismiss the tooltip by pressing the ESC key.
6. Now try to move the mouse pointer from the button that triggered the tooltip display to the tooltip itself and note the results.

Expected Result:

For any content that is displayed on mouse hover and then hidden the following must be true:

1. The content can be dismissed without moving the mouse pointer unless the content is an error or obscures other content. Pressing ESC should dismiss the tooltip.
2. If mouse pointer hover can trigger the tooltip, then the pointer can be moved over the tooltip without it disappearing;
3. The tooltip remains visible mouse hover removed, the user dismisses it, or its information is no longer valid.

Actual Result:

The tooltip passes only the 3rd requirement, it remains visible until the mouse pointer is moved away from the triggering buttons. The tooltip cannot be dismissed with the ESC key (1) and if the user attempts to move the mouse pointer to the tooltip itself, it disappears (2).

Other occurrences:

• The copy phone number toolltip for any contact details panel.

Workaround:

No workaround

Area issue was found in:

Chat page, Contact details overlay

Failed WCAG checkpoints

1.4.13

User impact:

Users who rely on other assistive technologies or methods of consuming the page content (e.g. increased font size, keyboard users, etc...) may not be able to interact with elements or read the content.

Suggested resolution:

Implement a key listener event for the ESC key and dismiss the tooltip when it is pressed. Make the tooltip itself hoverable with the mouse pointer.
https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html#dfn-mechanism

Platform:

Where is this issue occurring?

• Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

Bug5197783_Screen_Readers-Chat-Tooltip_on_hover_cannot_be_dismissed_or_hovered_without_moving_mouse.mp4

View all open jobs on GitHub