Issue Summary

In the "Insert more content" link, interactive elements i.e (tooltips) which is present in the dropdown are inaccessible for keyboard-only and screen reader users.

Steps to Reproduce

1. Launch the URL
2. Edit the page.
3. With a screen reader running, navigate to the "Insert more  content" link in the header section and activate it.
4. Visually the link is expanded but the screen reader does not announce the tooltip for the menu items, which is present just beside every menu item.

Screen Recording

Screen Recording 2022-06-08 at 8.06.01 PM.mov

Actual Results

In the "Insert more content" link, the tooltips are used to convey crucial information for the menu item. The tooltips are coded inappropriately which makes tooltip functionality inaccessible for keyboard-only and screen reader users as the elements do not receive keyboard focus on traversal thereby missing the crucial information.

Expected Results

Story points(tooltips) should be accessible for keyboard-only and screen reader users.

Make the tooltips accessible by performing the following steps:

• Provide the "aria-expanded" attribute to the button and toggle its state programmatically to "true" when it receives focus and toggle it back to "false" once the button loses focus.

• Place the tooltip content in a <div> element and provide a unique "ID" attribute to it. Additionally add role="tooltip" to the <div> element.

• Control the visibility of this <div> element using CSS depending on whether the button is in the focussed state or not. Ensure that this <div> element does not get dismissed when hovered with mouse. However, the tooltip content can be dismissed on activating "Esc" key or when it loses focus.

• Lastly, provide "aria-labelledby" attribute to the <button> and pass the ID of the <div> element as its value. This will read out the content of the tooltip to the screen readers when the button is focused.

Workaround

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