Create new Dashboard : Inaccessible by keyboard and no conforming alternate

Issue Summary

The elements "+ Add" and "Delete" icon is not accessible by the keyboard alone on the Create new dashboard page.

Steps to Reproduce

1. In the Jira header section, navigate to the Dashboard link and activate it.
2. Select the Manage dashboard and activate it.
3. In the Dashboard, navigate to the Create dashboard button and activate it.
4. In the Create Dashboard section, try navigating with the keyboard and interacting with the "+ Add" and "Delete" icons.

Screenshot

Screen recording

Screen Recording 2022-07-05 at 5.16.14 PM.mov

Actual Results

In the Create dashboard section, the "+ Add" and "Delete" icons for the Viewer and Editor form field has missing keyboard support. This element could be active with a mouse click but no keyboard and screen reader focus is received as it is coded into a span element. This made it difficult for screen reader users and only keyboard users to access the functionality associated with it.

Expected Results

Apply the following changes:

• Code the element containing the "+ Add" and "Delete" into a button element.
• Remove the span element as it does not allow to receive the keyboard and screen reader focus.
• Ensure the "+ Add" and "Delete" elements receive keyboard focus and are activated when the user tries to activate them.

Workaround

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

Bug Ref: 725837