[TB] Atoms - State Settings - WCAG 4.1.2: Ensures every form element has a label (#\:r1r\:)

[kburk1997]

Problem/Concern

Issue

Ensures every form element has a label (label)

Target application

A11y ThemeBuilder

Element path

#:r1r:

Snippet

<input aria-invalid="false" id=":r1r:" type="text" class="MuiInputBase-input MuiOutlinedInput-input css-24rejj-MuiInputBase-input-MuiOutlinedInput-input" value="#0066EF">

How to fix

Fix any of the following:
  Form element does not have an implicit (wrapped) <label>
  Form element does not have an explicit <label>
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element has no placeholder attribute
  Element's default semantics were not overridden with role="none" or role="presentation"

Environment

Microsoft Edge version 126.0.0.0 This accessibility issue was found using Accessibility Insights for Web 2.43.0 (axe-core 4.8.4), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Screenshot

Proposed Solution

Use aria-labelledby="<id of text>" for each of the color inputs to ensure that they are properly associated with the text.