-
Notifications
You must be signed in to change notification settings - Fork 70
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TB] Typography Font Settings - WCAG 4.1.2: Ensures every ARIA input field has an accessible name (#primaryFontSelect) #924
Comments
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? |
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. |
I was able to fix this issue locally by adding This ensures that the text label is properly associated with the select field. |
…field has an accessible name (#primaryFontSelect) Fixes finos#924
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? |
…field has an accessible name (#primaryFontSelect) Fixes finos#924
finos:#924 Ensure Typography Font Settings selects are properly labeled
PR merged - closing |
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
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
The text was updated successfully, but these errors were encountered: