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

Use darker form field borders #17218

Merged
merged 2 commits into from
Sep 3, 2019
Merged

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr commented Aug 27, 2019

Closes #17199.

This PR changes our default form field border color from $dark-gray-150 to $dark-gray-200. It's very minor, but ensures more accessible contrast ratios when these borders appear against gray backgrounds in the rest of WP-Admin. More details in this trac comment.


Before

current

After

proposed

@kjellr kjellr added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility labels Aug 27, 2019
@kjellr kjellr self-assigned this Aug 27, 2019
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure.

Have you checked it applies to anything resembling an input field? Searchboxes, dropdowns, checkbox borders?

@kjellr
Copy link
Contributor Author

kjellr commented Aug 27, 2019

Yep, it seems to be properly applied to select fields, as well as number fields:

Screen Shot 2019-08-27 at 1 33 00 PM

It's applied to the search field too, via 67a9d6e.

Checkboxes and toggle controls actually use $dark-gray-300 already, so those should already pass. I could make them lighter to match, but that seems like a bad move. 😄

I'll hold off on merging until I get a ✅ from the a11y team.

Copy link
Contributor

@enriquesanchez enriquesanchez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like a good improvement! It's great that you're also applying this treatment to other input elements 👍

@kjellr
Copy link
Contributor Author

kjellr commented Sep 3, 2019

Thanks, folks!

@kjellr kjellr merged commit 85eaee3 into master Sep 3, 2019
@kjellr kjellr deleted the update/darker-form-field-borders branch September 3, 2019 12:30
@kjellr kjellr added this to the Gutenberg 6.5 milestone Sep 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Try darkening all field borders
3 participants