New issue
Advanced search Search tips

Issue 900774 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 11
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 3
Type: Bug
Team-Accessibility



Sign in to add a comment

Contrast is bad for FocusRings on blue MdTextButtons

Project Member Reported by pbos@chromium.org, Oct 31

Issue description

Focus rings are blue, MdTextButton::CreateSecondaryUiBlueButton() is blue. These don't mix too well.

bettes@ given that these are normally on white, what color can we use for the focus ring around "Leave" in the below example?

Normally I'd expect white on blue but that would visibly shrink the icon rather than make the focus ring be clearly visible.
 
bad-contrast.png
7.3 KB View Download
Another option is to not use focus rings for the blue button but rather make it a lighter blue when it has focus. That might be more in line with Material elsewhere (I saw that Sheets make its yellow button whiter). Would that make sense?
What's most important: 

Have a single, universal focus ring style that is usable across all types of components AND recognizable across Windows and Mac UI conventions. 

That rules out any special exceptions for the BlueButton, and I would advocate this bug a WontFix, but here's some options as I see it. LMK if there's something I'm missing.

Options for us to consider: 

1. Keep as-is. It's the best cross-platform solution we have and keeps the contrast between buttonText and buttonColor intact. 

2. Update our focus rings to colored fills. This will likely not work immediately for dropdowns and inputs, so if we want to stay true to the goal above, we'd need to do further investigation to see what that would look like. 

3. We could fork focus rings, and do fills for textButtons, and rings for inputs but I think that's a bad idea (for the reasons above)

4. We could lighten or thicken the current ring...which may improve something but likely not everything. 


---
Attaching MacOS equivalent for reference


Screen Shot 2018-11-01 at 3.27.30 PM.png
53.3 KB View Download
Google Material guidance attached for reference
Screen Shot 2018-11-01 at 4.17.58 PM.png
17.3 KB View Download
Your MacOS equivalent looks like native Cocoa and not views.

Using the focus ring as is doesn't work as our focus ring overlaps the bluebutton which gives blue on blue. My example the bluebutton is focused but it's really impossible to tell.

Material guidance makes sense to me. We don't fade the bluebutton when it's focused. That's likely the bug. Does this mean that the focused bluebutton shouldn't show a focus ring on top either?
Owner: dfried@chromium.org
Status: Started (was: Assigned)
This is a sample of what the button looks like when we lighten it by one Google Material step (e.g. 500->400) when it is selected.
sample.png
23.1 KB View Download
Project Member

Comment 8 by bugdroid1@chromium.org, Dec 11

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4fab1094a96e7684397a30217d0fdd843bb9f5e4

commit 4fab1094a96e7684397a30217d0fdd843bb9f5e4
Author: Dana Fried <dfried@chromium.org>
Date: Tue Dec 11 00:16:54 2018

Prominent buttons receive a lighter background on focus.

This corresponds with material design standards.
It does not affect GTK themes on Linux, which are already using a hack
to get an appropriate color for prominent buttons.

Bug:  900774 
Change-Id: I84efa8681fd69aba4e6f34df9adeb05a2a7532c5
Reviewed-on: https://chromium-review.googlesource.com/c/1369033
Reviewed-by: Michael Wasserman <msw@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Commit-Queue: Dana Fried <dfried@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615343}
[modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/chrome/browser/ui/libgtkui/native_theme_gtk.cc
[modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/gfx/color_palette.h
[modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/native_theme/common_theme.cc
[modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/native_theme/native_theme.h
[modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/native_theme/native_theme_dark_aura.cc
[modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/views/controls/button/md_text_button.cc
[modify] https://crrev.com/4fab1094a96e7684397a30217d0fdd843bb9f5e4/ui/views/controls/button/md_text_button.h

Status: Fixed (was: Started)

Sign in to add a comment