search

finos / a11y-theme-builder

DesignOps toolchain theme builder for accessibility inclusion using Atomic Design.
Apache License 2.0
46 stars 69 forks source link

[TB] Components Sidebar - Switch not properly labeled, causing accessibility issues #956

Open kburk1997 opened 4 months ago

kburk1997 commented 4 months ago

Problem/Concern

The light/dark switch in the Components sidebar is not properly labeled, resulting in accessibility issues:

Issue

Ensures every form element has a label (label)

Target application

A11y ThemeBuilder

Element path

.MuiSwitch-input

Snippet

<input class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3" type="checkbox" aria-label="">

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

Screenshot of Light/Dark mode switch highlighted, as it is missing an accessible name

Proposed Solution

Switch should have aria-labelledby=<id of "Mode" text> or aria-label="Mode". Aria-labelledby preferred, since if the visible text ever changes, the accessible name will match the changed text.