Move tab index and focus to radio button.

chrome/browser/resources/settings/controls/controlled_radio_button.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="/controls/pref_control_behavior.html">
 <link rel="import" href="/prefs/pref_util.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="controlled-radio-button">
   <template>
@@ skipping 11 matching lines @@
       }
 
       cr-policy-pref-indicator {
         -webkit-margin-start: var(--checkbox-spacing);
         /* Enable pointer events for the indicator so :hover works. Disable
          * clicks/taps via onIndicatorTap_ so outer on-tap doesn't trigger. */
         pointer-events: all;
       }
     </style>
 
-    <paper-radio-button name="{{name}}" disabled="[[controlled_]]"
-        checked="{{checked}}">
+    <paper-radio-button id="radioButton" name="{{name}}" checked="{{checked}}"
+        disabled="[[controlled_]]" tabindex$="[[tabindex]]">

[Dan Beam, 2016/10/05 23:39:34]

how does this tabindex$= binding work?

[hcarmona, 2016/10/06 15:36:21]

The $= signifies that you're binding to an attribute.

https://www.polymer-project.org/1.0/docs/devguide/data-binding

It's binding to the tabindex attribute of the host b/c attributes are
also polymer properties.

[hcarmona, 2016/10/06 15:48:12]

Forgot to mention:
The host element gets its tabindex from the paper-radio-group which
takes care of managing the tab index for its children so that only one
is tab-able at a time.

[Dan Beam, 2016/10/11 18:58:12]

yep, get that
ehhhh, this is kinda odd imo, to use hostAttributes in this way, especially
because I don't see where this value ever changes:
https://cs.chromium.org/chromium/src/third_party/polymer/v1_0/components-chro...

if the behavior is specified i guess it's fine.

i think all of this might be less cryptically expressed as simply...
tabindex="0"

[hcarmona, 2016/10/11 20:54:02]

tabindex="0" is what we have now because each paper-radio-button is
already focusable. This change transfers focusability from the host
so that the radio button is only focusable when the row is selected.

The tab index is set on the host by a parent element that has an
IronMenuBehavior. The paper-radio-button is the element that should be
focusable (not the host), so this change transfers focusability from the
host to the radio button.

Another option is to make this tabindex="-1", but then we won't get
the ripple and focusable behavior from the paper-radio-button.

[Dan Beam, 2016/10/11 21:36:06]

ok, this is what changes it.  great.  than this is definitely the best.  lgtm
nah

       <content></content>
     </paper-radio-button>
 
     <template is="dom-if" if="[[showIndicator_(controlled_, name, pref)]]">
       <cr-policy-pref-indicator pref="[[pref]]" on-tap="onIndicatorTap_">
       </cr-policy-pref-indicator>
     </template>
 
   </template>
   <script src="/controls/controlled_radio_button.js"></script>
 </dom-module>