Dashboard with Gadget : Button is missing both a role and a name.

Issue Summary

The button is missing both a role and an accessible name/label.

Element Name:
Rearrange(drag/drop) control button
Location of the element: present in each gadget dialog beside the name of the dialog.

Steps to Reproduce

1. Step 1

Actual Results

Actual results

Expected Results

Expected Results

Fix Information
HOW TO FIX:
Fix the NAME issue by using any of the following techniques:
1. Use the innertext of the <button> or role="button" element
<button>Apply now!</button>
<button class="apply-btn"><span class="sr-text">Apply now!</span></button>
2. Use a non-empty aria-label attribute on the <button> or role="button" element.
<button class="apply-btn" aria-label="Apply now!"></button>
<span role="button" class="apply-btn" aria-label="Apply Now!"></span>
Fix the ROLE issue by using any ONE of the following techniques:
1. Use a native HTML <button> element.
<button>Apply now!</button>
2. Add role="button" to the custom button container.
<span role="button" class="apply-btn" aria-label="Apply Now!"></span>
REFERENCE:
Deque University: https://dequeuniversity.com/class/custom-widgets2/concepts/name
W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-label
W3C HTML5 Recommendation: https://www.w3.org/TR/html5/sec-forms.html#the-button-element
Deque University: https://dequeuniversity.com/class/custom-widgets2/examples/button
BACKGROUND:
Every user interface control must have a role and name to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) using ARIA as well as expected keyboard interactions.

Screenshot

Screen Recording

screen recording

Workaround

workaround

Bug Ref: 725429