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

Lack of disabled attribute on select element causing color contrast issue #5550

Open
mellis481 opened this issue Jan 30, 2023 · 0 comments
Open
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet

Comments

@mellis481
Copy link

mellis481 commented Jan 30, 2023

When isDisabled is set to true, the disabled attribute is correctly added to the <input> element that makes up react select.

https://codesandbox.io/s/codesandboxer-example-forked-dsc99j

image

Unfortunately, the actual select element (or rather the div that represents the select) is not properly identified as disabled and, as a result, tools like Accessibility Insights for Web complain that color contrast requirements are not met. Color contrast requirements do not need to be met for disabled controls, but tools are not seeing the select as disabled because it is not marked up properly.

image

This can be solved by added aria-disabled="true" to the control--is--disabled node.

image

@mellis481 mellis481 added the issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet label Jan 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet
Projects
None yet
Development

No branches or pull requests

1 participant