Just for a little background: having useful focus at all times is a GAR1 (go/gar-web) requirement.  Being GAR1 compliant is A Good Thing.  Having a persistent focus indicator is very useful for those using keyboard, but less useful for those using touch/mouse :(.

I landed a fairly effective change to address clicking <- (back) from subpages here:

  https://codereview.chromium.org/2832023004/

but it has currently has not been merged to M59 and doesn't address dialogs nor context menus.

We've also evaluated a fix for closing dialogs or "action menus" (look like context menus) but it's more involved.  There's 20+ callsites to update to "focus something without a ripple" and the solution is not technically amazing (a bit of RTTI).  It's planned, but with less urgency/priority than this bug is currently targeting.

It might be possible to fix both issues AND merge them, but I think users could survive with this on stable for 6w (I understand others may disagree).

Note: it's also technically feasible to exclude Mac from the launch via Finch if this bug is an absolute non-starter and we can't fix it / convince TPMs in time.

You are conflating ripples with focus. Focus is indicated by blue focus rings while ripples occur when you activate an MD control (except on the Mac). The fact that this control ripples when I haven't clicked it is a bug, not an accessibility feature.

As I tab around the MD Settings page I see that ripples truly have been conflated with focus :-(. That doesn't make a lot of sense, and is not, for example, how focus works in MD top chrome or secondary UI.

The ripple is the focus state across MD WebUI and is the default for Polymer. Showing ripples for focus (including when closing dialogs) was discussed with Chrome / Chrome OS UI Review, and we agreed it is not launch blocking. As Dan mentioned we are working to fix it, targeting M60.

I think this is one of those dilemmas where webui is in a tight spot.

Webui implements Chrome (native app) UI in terms of web technologies.  Chrome is a native app, but its primary purpose is to consume web stuff; the product is actually named "Chrome" ironically in hopes the native window chrome is de-emphasized.

Webui is also Google-branded content in the middle of tab. Google web properties abide by Material Design (which is the whole point of this launch), and web stuff works and feels a little different than native UI to begin with.

There's competing desires for webui's style!

As this bug is marked OS=Mac, I assume you mainly care about the MD Settings page looking Mac-y on Mac (which indeed has had a blue focus ring for native focus consistently for years).  There hasn't been a lot of ton of work there yet (though I did recently help make a global webui thing more platform-y[1]), but I'd be happy to help somebody change it.  The webui folks just haven't budgeted for it in this quarter's OKRs.  It might be hard to change focus-means-ripple as settings has already been UI-reviewed and the code is branched and downloads and history have this behavior and have been out since Chrome 49.



> Focus is indicated by blue focus rings while ripples occur when you activate an MD control (except on the Mac). The fact that this control ripples when I haven't clicked it is a bug, not an accessibility feature.

Unfortunately, Material Design disagrees with using a blue focus ring for focus in some cases :(.

In this specific case, "Icon toggles" are shown with a ripple in the "focused" state:
https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons

There's also a couple videos with different "focus" behaviors (which differ from "pressed") with ripples going on:
https://material.io/guidelines/components/buttons.html#buttons-flat-buttons

This probably explains why Polymer (MD component suite) and MD versions of [at least] YouTube, Inbox, Play, and Drive[2] use growing or instant ripples to convey focus changes.

In fact, the Material Design site itself (which I assume follows MD) shows focus via expanding a ripple, example:

  https://material.io/color/#!/?view.left=0&view.right=0 --> see: learn more (?)



> As I tab around the MD Settings page I see that ripples truly have been conflated with focus :-(. That doesn't make a lot of sense, and is not, for example, how focus works in MD top chrome or secondary UI.

I agree it'd be nice to have different focus indication.  I've never liked the ripple for focus.  But it's in the MD spec!

I think addressing focus differently in Harmony would be more worthwhile than trying to change for MD.



[1] https://codereview.chromium.org/2800383002/#msg24
[2] https://drive.google.com/open?id=0BzYnWl8THt47NTJRZG5WY0IyV1U

> The ripple is the focus state across MD WebUI and is the default for Polymer. Showing ripples for focus (including when closing dialogs) was discussed with Chrome / Chrome OS UI Review, and we agreed it is not launch blocking. As Dan mentioned we are working to fix it, targeting M60.

I had trouble parsing dbeam@'s comment about a fix. If focus indication will change, as you seem to be saying, that is a good thing.

> Unfortunately, Material Design disagrees with using a blue focus ring for focus in some cases :(.

Wow, I had no idea. In a word - insanity.

> I think addressing focus differently in Harmony would be more worthwhile than trying to change for MD.

The opposite is true. Indicating focus with a ripple doesn't make a lot of sense, is confusing, and looks like a bug.

The plan for M60 is not to change how focus is displayed, but when it is displayed. Right now we sometimes show the focus state when mouse/touch is used to navigate, eg. when a dialog is closed. In M60, we will avoid showing the focus state for mouse/touch navigation, but we will continue showing the existing ripple-based focus state for keyboard navigation.

Switching Settings to Harmony could be an opportunity to revisit the actual visuals of the focus state, eg using a blue focus ring.

this is the potential patch we'd have to merge:
https://codereview.chromium.org/2842303004/

If the patch in #11 fixes the issue of focus being shown while navigating using mouse/touch, I'm in favor of merging it to 59 (if safe to do so). 

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

commit fff67725b349e1b90c1545720e91de6ad9479192
Author: dbeam <dbeam@chromium.org>
Date: Wed May 03 01:57:10 2017

MD Settings: update dialogs to focus without ink when using mouse

R=dpapad@chromium.org
BUG= 716184 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

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

[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/options/compiled_resources.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/about_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/about_page/detailed_build_info.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/about_page/detailed_build_info.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/android_apps_page/android_apps_subpage.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/android_apps_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/certificate_manager_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/device_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/device_page/display.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/device_page/display.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/device_page/storage.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/device_page/storage.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/internet_page/network_proxy.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/internet_page/network_proxy.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/internet_page/network_siminfo.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/internet_page/network_siminfo.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/languages_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/languages_page/languages_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/languages_page/languages_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/passwords_and_forms_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/fingerprint_list.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/fingerprint_list.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/lock_screen.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/lock_screen.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/people_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/people_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/users_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/people_page/users_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/printing_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/printing_page/cups_printers.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/printing_page/cups_printers.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/privacy_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/privacy_page/privacy_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/privacy_page/privacy_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/reset_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/reset_page/reset_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/reset_page/reset_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/search_engines_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/search_engines_page/search_engines_page.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/settings_page/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/settings_page/settings_animated_pages.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/settings_page/settings_animated_pages.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/site_settings/site_data.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/site_settings/site_data.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/site_settings/site_list.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/chrome/browser/resources/settings/site_settings/site_list.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/ui/webui/resources/cr_elements/cr_action_menu/compiled_resources2.gyp
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js
[add] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/ui/webui/resources/html/cr/ui/focus_without_ink.html
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/ui/webui/resources/js/cr/ui/compiled_resources2.gyp
[add] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/ui/webui/resources/js/cr/ui/focus_without_ink.js
[modify] https://crrev.com/fff67725b349e1b90c1545720e91de6ad9479192/ui/webui/resources/webui_resources.grd

> if safe to do so

it's probbbbably not

Tested the issue on Mac-10.12.4 using chrome version 60.0.3095.5 with the steps mentioned in comment#0.

Observed that the  three-dot button has highlighted after clicking outside of the popup menu.Seems the issue has not been fixed.
Please find the attached screen cast and confirm.

Thanks..

Deleted: 716184.mp4 444 KB

	716184.mp4 444 KB View Download

 Issue 711213  has been merged into this issue.