[TB] Typography Font Settings - WCAG 4.1.2: Ensures every ARIA input field has an accessible name (#primaryFontSelect)

[kburk1997]

Problem/Concern

When I run Accessibility Insights for Web on the Typography Font Settings page, I get this issue for each select element:

Issue

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

Target application

A11y ThemeBuilder

Element path

#primaryFontSelect

Snippet

<div tabindex="0" role="combobox" aria-controls=":r4:" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="primaryFontSelect" id="primaryFontSelect" class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1xd5...

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 125.0.0.0
This accessibility issue was found using Accessibility Insights for Web 2.42.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

Ensure all select fields are properly labeled.
Reference: Material UI React - Select - Accessibility

[kburk1997]

I am now covered under my company's CCLA, so I can take this on if needed - this seems like a very small fix.

[aaronreed708]

I am now covered under my company's CCLA, so I can take this on if needed - this seems like a very small fix.

If you can fix it, that would be great! In this case, the label and the field are separated by text. What is the best way to do this with Aria attributes? I'm guessing if we label it incorrectly that a screen reader might read stuff out of order?

[kburk1997]

Probably using either Material UI's labelId property or aria-labelledby - as is, a screen reader will read the field as unlabeled, which causes confusion.

[kburk1997]

I was able to fix this issue locally by adding id="primaryFontLabel" to the <div className="subtitle"> element, then adding labelId="primaryFontLabel" to the primary select.

This ensures that the text label is properly associated with the select field.

[kburk1997]

Just made a commit on my fork - can you please assign me this issue so I can mark it as in progress and raise a PR?

[kburk1997]

PR merged - closing