MD Settings: Fix subpage navigation focus for bluetooth+internet

ui/webui/resources/cr_elements/network/cr_network_list_item.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 
 <dom-module id="cr-network-list-item">
   <template>
@@ skipping 67 matching lines @@
         </div>
       </div>
       <template is="dom-if" if="[[isPolicySource(networkState.Source)]]">
         <cr-policy-indicator
             indicator-type="[[getIndicatorTypeForSource(networkState.Source)]]">
         </cr-policy-indicator>
       </template>
       <template is="dom-if"
           if="[[isSubpageButtonVisible_(networkState, showButtons)]]">
         <div id="subpageDiv" class="layout horizontal">
+          <!-- By default space will trigger on-tap but enter will not, so
+               handle space and enter here explicitly. -->
+          <iron-a11y-keys keys="space enter" on-keys-pressed="fireShowDetails_">

[dpapad, 2017/04/25 21:25:19]

I don't fully understand the need for this. Where is the focus when "space will
trigger on-tap but enter will not"? I don't recall having encountered this issue
elsewhere in the Settings code, but the phrasing makes it sound that this is a
generic problem.

Is it equivalent to just move the on-tap handler to the div above?

[stevenjb, 2017/04/25 23:32:53]

OK, after way too much time investigating, I discovered that iron-list is eating
'enter'. I don't really understand why that is preventing on-tap, but I think
that 'enter' firing on-tap is a Polymer thing so maybe that is why? I will
document this better.

Also, I think this may be the only place where we have an embedded button in an
iron-list item that doesn't just do the default action for the list entry. (We
have some embedded menus, but I think they have explicit keyboard handling).

[dpapad, 2017/04/26 00:22:38]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=715353 to track
that issue and possibly get some help from scottchen@ who has dealt a lot with
iron-lists.

Also the keyboard behavior of this iron-list seems different than other
iron-lists on our page, which is why I suggest that we don't do anything here to
side-step the problem until we understand why it is happening in the 1st place.
WDYT?

[stevenjb, 2017/04/26 17:53:36]

I don't think there is anything actually different about the keyboard behavior
in this iron-list.

Sorry if I wasn't clear, but this is why enter doesn't work:
https://cs.chromium.org/chromium/src/third_party/polymer/v1_0/components-chro...

I'll comment on the issue you created.

[dpapad, 2017/04/26 18:14:49]

Compare for example the search engines iron-list
(chrome://md-settings/searchEngines) with this one. Repro steps to showcase the
difference

 1) Tab to the 1st item in the iron-list, see http://imgur.com/a/lnqHJ:
    Search engines: The 1st "dots" icon is focused.
    networks: The entire row is focused.
 2) Hit tab one more time, see http://imgur.com/a/Y8XzI:
    Search engines: The focus goes to the 1st item *after* the iron list.
    networks: The focus goes to the button within the row.

Are you not observing the described behavior above?

[stevenjb, 2017/04/26 18:33:49]

Yes, that is what I am seeing.

It sounds like you mean that the focus behavior specifically is different.

Unfortunately most of our iron-list implementations are slightly different in
their behavior.

The focus behavior for networks is as previously discussed with UX:

* Tab focuses the list (which focuses the current -defaults to first- list
item).
** Enter/tap performs the default action for the item (connect or view details
if already connected).

* A second tab focuses the 'details' button
** Enter / tap / space (because its a button) views details.

* A third tab focuses the next element (i.e. not the list).

This is consistent with most of our iron-list implementations, with the
exception that this list has both actionable items and an actionable button.
Other lists have one or the other.

+          </iron-a11y-keys>
           <button class="subpage-arrow" is="paper-icon-button-light"
               on-tap="fireShowDetails_" tabindex$="[[tabindex]]"
               aria-label$="[[ariaLabel]]">
           </button>
         </div>
       </template>
     </div>
   </template>
   <script src="cr_network_list_item.js"></script>
 </dom-module>