Low contrast between toolbar and tab focus cursor on it |
|||||||
Issue descriptionSteps 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.
,
Oct 28 2016
,
Oct 28 2016
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.
,
Oct 28 2016
,
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?
,
Oct 31 2016
Yes.
,
Nov 1 2016
Got it. Thanks! yamaguchi@, could you update the button as instructed in Files app and Gellery app?
,
Nov 2 2016
,
Nov 2 2016
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%.
,
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
,
Nov 8 2016
,
Nov 22 2016
Verified on ChromeOS 9000.0.0, 56.0.2923.0 |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by yamaguchi@chromium.org
, Oct 28 2016