[WebUI] Modify action-link's .no-outline on input only.

[WebUI] Modify action-link's .no-outline on input only.

This CL updates .no-outline logic for action-link sets to improve how it
emulates <a> :focus styling:
- On mousedown, add .no-outline (to remove focus ring).
- On keyup with Tab, remove .no-outline (to reenable focus ring).
- Leave .no-outline as-is for focus and blur events, so when blur source
  is external to webpage (e.g., Alt-Tab, or Tab exiting content) we
  preserve same outline as before.
- Make .no-outline affect styling only on :focus.

This approach is attractive for its simplicity. Known caveats:
- Tab-focus followed by click-focus removes focus ring (unlike <a>).
- Click-focus, Tab-away and Shift-Tab back: Focus ring appears is
  delayed since it's applied on keyup event.

BUG=701268, 698270
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

[huangs, 2017-03-21 22:09:50]

Description was changed from

==========
[WebUI] Modify action-link's .no-outline on input only.

This CL updates .no-outline logic for action-link sets to improve how it
emulates <a> :focus styling:
- On mousedown, add .no-outline (to remove focus ring).
- On keyup with Tab, remove .no-outline (to reenable focus ring).
- Leave .no-outline as-is for focus and blur events, so when blur source
  is external to webpage (e.g., Alt-Tab, or Tab exiting content) we
  preserve same outline as before.
- Make .no-outline affect styling only on :focus.

This approach is attractive for its simplicity. Known caveats:
- Tab-focus followed by click-focus removes focus ring (unlike <a>).
- Click-focus, Tab-away and Shift-Tab back: Focus ring appears is
  delayed since it's applied on keyup event.

BUG=701268
==========

to

==========
[WebUI] Modify action-link's .no-outline on input only.

This CL updates .no-outline logic for action-link sets to improve how it
emulates <a> :focus styling:
- On mousedown, add .no-outline (to remove focus ring).
- On keyup with Tab, remove .no-outline (to reenable focus ring).
- Leave .no-outline as-is for focus and blur events, so when blur source
  is external to webpage (e.g., Alt-Tab, or Tab exiting content) we
  preserve same outline as before.
- Make .no-outline affect styling only on :focus.

This approach is attractive for its simplicity. Known caveats:
- Tab-focus followed by click-focus removes focus ring (unlike <a>).
- Click-focus, Tab-away and Shift-Tab back: Focus ring appears is
  delayed since it's applied on keyup event.

BUG=701268
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[huangs, 2017-03-21 22:11:06]

Description was changed from

==========
[WebUI] Modify action-link's .no-outline on input only.

This CL updates .no-outline logic for action-link sets to improve how it
emulates <a> :focus styling:
- On mousedown, add .no-outline (to remove focus ring).
- On keyup with Tab, remove .no-outline (to reenable focus ring).
- Leave .no-outline as-is for focus and blur events, so when blur source
  is external to webpage (e.g., Alt-Tab, or Tab exiting content) we
  preserve same outline as before.
- Make .no-outline affect styling only on :focus.

This approach is attractive for its simplicity. Known caveats:
- Tab-focus followed by click-focus removes focus ring (unlike <a>).
- Click-focus, Tab-away and Shift-Tab back: Focus ring appears is
  delayed since it's applied on keyup event.

BUG=701268
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
[WebUI] Modify action-link's .no-outline on input only.

This CL updates .no-outline logic for action-link sets to improve how it
emulates <a> :focus styling:
- On mousedown, add .no-outline (to remove focus ring).
- On keyup with Tab, remove .no-outline (to reenable focus ring).
- Leave .no-outline as-is for focus and blur events, so when blur source
  is external to webpage (e.g., Alt-Tab, or Tab exiting content) we
  preserve same outline as before.
- Make .no-outline affect styling only on :focus.

This approach is attractive for its simplicity. Known caveats:
- Tab-focus followed by click-focus removes focus ring (unlike <a>).
- Click-focus, Tab-away and Shift-Tab back: Focus ring appears is
  delayed since it's applied on keyup event.

BUG=701268,698270
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[huangs, 2017-03-21 22:11:06]

huangs@chromium.org changed reviewers:
+ dbeam@chromium.org

[huangs, 2017-03-21 22:11:53]

PTAL. I listed 2 caveats of this approach, which I think are minor. Please judge
whether it's worth adding more complexity to fix those caveats. Thanks!

[Dan Beam, 2017-03-22 03:28:53]

https://codereview.chromium.org/2768673002/diff/1/ui/webui/resources/js/actio...
File ui/webui/resources/js/action_link.js (right):

https://codereview.chromium.org/2768673002/diff/1/ui/webui/resources/js/actio...
ui/webui/resources/js/action_link.js:59: if (e.key === 'Tab')
this isn't the only way focus can get to an element.  enter and screenreaders
with configurable shortcuts also can set focus