New issue
Advanced search Search tips

Issue 660353 link

Starred by 1 user

Issue metadata

Status: Verified
Owner:
Closed: Nov 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Chrome
Pri: 3
Type: Bug



Sign in to add a comment

Low contrast between toolbar and tab focus cursor on it

Project Member Reported by yamaguchi@chromium.org, Oct 28 2016

Issue description

Steps To Reproduce:
(1) Open Files app.
(2) Hit [Tab] key serveral times until one of the toolbar button is focused. (For example, "switch to thumbnails view")

Actual Result:
The button icon which has the keyboard focus is highlighted with a different background color. However, currently it's almost the same color as the background of the toolbar. It'd be very hard to see depending on the device.
See the screenshot. "Thumbnail view" icon is being highlighted. The tooltip label saying "Thumbnail view" has high enough contrast to the background, but the highlight of the icon above it is very difficult to see.


How frequently does this problem reproduce? (Always, sometimes, hard to
reproduce?)
Always

What is the impact to the user, and is there a workaround? If so, what is
it?
Will affect all people who uses keyboard to select these buttons.
Possible workarounds are:
- Look the low contrast color carefully
- Wait for seconds after hitting tab key, so that the tooltip to show each button label appears.
 
files_app_tab_focus.png
73.8 KB View Download
Description: Show this description
Description: Show this description
Thanks for bringing that up. This is something I've been wanting to change for a while. 
We should switch both the Files.app and the Gallery.app focuse state and ripples to #fff 0.2a. See attached.
SPEC - Active state.png
102 KB View Download
Cc: -fukino@chromium.org sgabr...@chromium.org
Owner: fukino@chromium.org

Comment 5 by fukino@chromium.org, Oct 31 2016

Hi Sebastien,
IIUC, toggle buttons in active state should have 20% #fff background.
Should we use the same color for the focused button's background?
Yes.
Cc: fukino@chromium.org
Owner: yamaguchi@chromium.org
Status: Assigned (was: Unconfirmed)
Got it. Thanks!

yamaguchi@, could you update the button as instructed in Files app and Gellery app?
Status: Started (was: Assigned)
All right. To summarize, we will change the color of all of these:
- A button being focused by [TAB] key
- The ripple effect when the button is triggered (both screen tap and [Enter] key after focusing)
- The button while the dropdown menu is displayed after the ripple effect (this happens for sort button, search button, and config button like seen in the attached image)
and these all will be #FFF with alpha=20%.
files_app_header_button_expanded.png
31.7 KB View Download
Project Member

Comment 10 by bugdroid1@chromium.org, Nov 8 2016

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

commit 02a288c7de72990084861509042542fa3acfb71b
Author: yamaguchi <yamaguchi@chromium.org>
Date: Tue Nov 08 05:47:23 2016

Change color of ripple effects and tab focus of toolbar buttons in Files
and Gallery apps to have high contrast to the backgrounds.

BUG= 660353 
TEST=Open files app and hit tab key several times to see tab focus is highlighted white. Also hit the sort and search buttons to see these are highlighted in the same way while the dropdown or text input is displayed there respectively. Open an image file in Gallery app to do the same with "edit" button.
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2477693004
Cr-Commit-Position: refs/heads/master@{#430528}

[modify] https://crrev.com/02a288c7de72990084861509042542fa3acfb71b/ui/file_manager/audio_player/elements/control_panel.css
[modify] https://crrev.com/02a288c7de72990084861509042542fa3acfb71b/ui/file_manager/file_manager/foreground/css/file_manager.css
[modify] https://crrev.com/02a288c7de72990084861509042542fa3acfb71b/ui/file_manager/file_manager/foreground/elements/files_ripple.html
[modify] https://crrev.com/02a288c7de72990084861509042542fa3acfb71b/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html
[modify] https://crrev.com/02a288c7de72990084861509042542fa3acfb71b/ui/file_manager/gallery/css/gallery.css
[modify] https://crrev.com/02a288c7de72990084861509042542fa3acfb71b/ui/file_manager/video_player/video_player.html

Status: Fixed (was: Started)
Status: Verified (was: Fixed)
Verified on ChromeOS 9000.0.0, 56.0.2923.0

Sign in to add a comment