[TB] Atoms - Input Background - WCAG 4.1.2: Ensures every ARIA input field has an accessible name (.css-av774z-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input)

[kburk1997]

Problem/Concern

Issue

Ensures every ARIA input field has an accessible name (aria-input-field-name)

Target application

A11y ThemeBuilder

Element path

.css-av774z-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input

Snippet

<div tabindex="0" role="combobox" aria-controls=":r2j:" aria-expanded="false" aria-haspopup="listbox" class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-av774z-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-in...

How to fix

Fix any of the following:
  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

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

Add aria-labelledby="id of text" (preferred, as it will programmatically associate input with text) or aria-label="Overlay Color" to fix the issue

[kburk1997]

This stems from the ColorSelect component - should be easy fix similar to #953

[kburk1997]

PR merged - closing