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

Success and Warning buttons need appropriate color contrast with active/focus #609

Open
joshuasosa opened this issue Nov 18, 2022 · 0 comments
Labels
bug Something isn't working enhancement New feature or request

Comments

@joshuasosa
Copy link

joshuasosa commented Nov 18, 2022

Problem/Motivation

Text on backgrounds should have sufficient color contrast to meet WCAG AA for normal text.

Describe the bug

In the currently published Bootstrap version (2.0?), the buttons for Success and Warning types get the wrong text color when their state is 'active' or 'focus', such as when clicking on them.

https://digital.arizona.edu/arizona-bootstrap/docs/2.0/components/buttons/

To Reproduce

Click on the Success or Warning buttons to see the color change as the button is clicked. Or use inspector tools to manually set Success or Warning button status to active or focus.

Proposed resolution

Copy over the same styling used in the hover state for these buttons. Or consolidate active/focus specification into the hover statement.

Expected behavior

Success buttons for Success and Warning should retain their respective 'hover' state text color.

Screenshots

Success and Warning are 'active'

image

Colors fail for normal text

https://webaim.org/resources/contrastchecker/
image
image

@joeparsons joeparsons added bug Something isn't working enhancement New feature or request labels Jan 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants