Issue Summary

On the “Dashboard ” page, non-modal dialog becomes available when the user mouse hovers over "Admin Admin" is inaccessible.

Steps to Reproduce

1. Open "Dashboard | All popular " page
2. Navigate to the mentioned tooltip content using keyboard.
3. Turn on the screen reader and observe that tooltip content is not accessible.

Screenshot 

Actual Results

On the "Dashboard | All popular " page, the non-modal dialog that becomes available when the user mouse hovers over “Admin Admin” is not accessible. These non-modal dialogs are coded inappropriately which makes functionality inaccessible for keyboard-only and screen reader users. Moreover, the dialog is only available on mouse hover.

Expected Results

The mentioned dialog should be accessible for keyboard-only and screen reader users.

Make the dialog accessible by performing the following steps:

• Replace the avatar element with the native <button> element in the source code so that it receives keyboard focus. (Currently the avatar and username element is coded in one <a> tag so when users tab the keyboard focus receives both the elements)
• Make sure to code the button element which triggers the popup outside the <a> element,since incorrect nesting is done
• Add role="dialog" and "aria-labelledby" attribute to the <div> element containing the modal dialog heading/title for text “User name”.
• Specify the "id" attribute with a unique value to the element containing the heading text i.e “User name” and reference it via the "aria-labelledby" attribute.

For information on creating accessible non-modal dialog refer Non Modal Dialogs

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest