search

cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.33k stars 152 forks source link

[Bug]: Button component in disabled mode is showing accessibility issue #2656

Closed awskaran closed 2 days ago

awskaran commented 2 weeks ago

Browser

Chrome

Package version

v3.0.720

React version

v18.3.1

Description

We have a button that is set as primary variant and is disabled. We are using the free chrome browser plugin from silktide for accessibility testing and it throws up an accessibility issue shown in below screenshots around Text contrast on a disabled button.

image image image

Is this something that can be fixed in CloudScape or the recommendation is we do something custom ?

Source code

`<Button key="form-actions-sb1-save-button-key" data-testid="save-button" disabled variant="primary"

Save `

Reproduction

No response

Code of Conduct

avinashbot commented 1 week ago

The recommendation is neither: disabled/inactive controls are not required to meet minimum text contrast requirements, so this isn't strictly an accessibility issue and you can treat it as a false positive.

Generally, if disabled controls communicate any meaningful information, a much better alternative to disabling them is to leave the controls (like the "Save" button) active but use validation to communicate why the preferences could not be saved.