Create a Pull Request : Tooltip content inaccessible for keyboard only user

Issue Summary

In the Create pull request page the tooltip available on the attach file button is inaccessible for the keyboard-only users.

Steps to Reproduce

1. Launch the URL
2. In the Create pull request page, create a new pull request and navigate to the main content area.
3. Navigate on attach file button with a mouse hover and try to navigate to it with the keyboard.

Screenshot

Screen recording

Screen Recording 2022-05-02 at 2.56.24 PM.mov

Actual Results

In the Create pull request page the tooltip which is available on mouse hover to attach files, is not accessible by keyboard-only users. The element uses device-dependent event handlers and is therefore not accessible by keyboard alone. This made it difficult for users with mobility and visual impairments to access the tooltip content. 

Expected Results

The following changes could be implemented to make the tooltip accessible:

• Provide appropriate textual description via aria-label attribute for the element.
• Display the information available in the tooltip as plain text and use CSS for formatting.
• Specify the ARIA role "tooltip" for the information displayed on hover. Specify a unique id attribute for the tooltip and reference it via the aria-describedby attribute of the element.
• Modify the script to make the tooltip information available on hover as well as on focus. In addition along with mouse-specific event handlers, use keyboard specific event handlers, such as "onfocus", "onblur", etc. to make the functionality accessible for keyboard-only users.

Workaround

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

Bug Ref: 741809