Skip to content
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

Disabled inputs look the same as enabled inputs in dark themes #4356

Closed
iansan5653 opened this issue Mar 5, 2024 · 0 comments · Fixed by #4352
Closed

Disabled inputs look the same as enabled inputs in dark themes #4356

iansan5653 opened this issue Mar 5, 2024 · 0 comments · Fixed by #4352

Comments

@iansan5653
Copy link
Contributor

In light themes, disabled inputs are clearly distinguishable from regular inputs. This is really useful for determining which inputs to fill, and it helps users understand why an input cannot be focused.

Regular vs disabled TextInput in light theme, showing that the disabled input looks faded out and has a gray background

In dark themes there is no such distinction. Disabled inputs look exactly the same as regular inputs:

In dark theme, both the regular and disabled inputs look exactly the same

The same is true in high contrast dark themes:

The inputs also look the same in dark high contrast theme

While I don't know if there's a specific WCAG standard governing disabled input styling, I believe this is still an accessibility concern. A mouse user is able to hover over the input and see that it can't be clicked, but they will still be confused as to why, since the input doesn't look disabled. A keyboard user will be worse off, as they will see the input and expect it to be focusable, yet when navigating the page they will be unable to activate it. A voice control user will also be unable to activate the input and won't be able to see why. This is confusing for all users, but it's especially confusing for users who are using less common input modalities.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants