Skip to content

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

Description

@iansan5653

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.

Activity

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions