[Accessibility][ConfigPanelText] Controls do not have an accessible name

[mnischay]

Target Count: 2

Standard: 4.1.2 Name, Role, Value (A)

Affected Groups: Motor Impaired, Screen Reader Users

Severity: Medium

Priority: 3

 

Notes and Advice

Interactive control "Color" do not have an accessible name. The purpose of these controls will not be clear to users of assistive technologies.

Recommendation

The accessible name is the text that identifies and describes the control to assistive technology users. It is programmatically exposed by the browser to assistive technology products (such as screen readers or speech recognition tools).

Provide an accessible name for the control using native HTML elements/attributes or ARIA attributes.

For native labelable controls use a programmatically associated element that specifies the accessible name:

<label for="test">Color
<input type="color" value="var(--color-text-body-default-mmvcvg, #716)" __id="test"_>
Resources
What is an accessible name?
The label element
The difference between aria-label and aria-labelledby

AC

The above violations is fixed