avatar profile modal : Button : Button is missing both a role and a name.

Issue Summary

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

Element: "Drag controls"

Location: Inside the "Please select which part of the uploaded image you wish to use as the avatar." model. this model open when we click on the "choose file" button.

Steps to Reproduce

1. Step 1

Actual Results

Actual results

Expected Results

Expected Results

Fix Information
RULE :

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

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

nW3C 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: 723205