MD Settings: compose a <paper-radio-button> instead of wrapping one in <controlled-radio-button>

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

Index: chrome/browser/resources/settings/controls/controlled_radio_button.js
diff --git a/chrome/browser/resources/settings/controls/controlled_radio_button.js b/chrome/browser/resources/settings/controls/controlled_radio_button.js
index 13a021fa93deee4d72395a8993902a75b179fab4..14312aba53cff1dc671aa25cd786cf2711cee28e 100644
--- a/chrome/browser/resources/settings/controls/controlled_radio_button.js
+++ b/chrome/browser/resources/settings/controls/controlled_radio_button.js
@@ -5,10 +5,23 @@
 Polymer({
   is: 'controlled-radio-button',
 
-  behaviors: [PrefControlBehavior],
+  behaviors: [
+    PrefControlBehavior,
+    Polymer.IronA11yKeysBehavior,
+  ],
 
   properties: {
-    label: String,
+    checked: {
+      type: Boolean,
+      reflectToAttribute: true,
+      observer: 'checkedChanged_',
+      notify: true,
+    },
+
+    label: {
+      type: String,
+      value: '',

[hcarmona, 2017/04/13 01:18:37]

Nit: add a comment that this is needed to avoid a refactor removing the default
value.

[Dan Beam, 2017/04/13 01:22:58]

Done.

+    },
 
     name: {
       type: String,
@@ -21,10 +34,33 @@ Polymer({
       computed: 'computeControlled_(pref.*)',
       reflectToAttribute: true,
     },
+
+    pressed_: Boolean,

[dpapad, 2017/04/13 00:35:09]

@private

[Dan Beam, 2017/04/13 00:59:01]

Done.

+  },
+
+  hostAttributes: {
+    role: 'radio',
+    tabindex: 0,
   },
 
   listeners: {
-    'focus': 'onFocus_',
+    'blur': 'updatePressed_',
+    'down': 'updatePressed_',
+    'focus': 'updatePressed_',
+    'tap': 'onTap_',
+    'up': 'updatePressed_',
+  },
+
+  keyBindings: {
+    // This is mainly for screenreaders, which can perform actions on things
+    // that aren't focused (only focused things get synthetic click/tap events).
+    'enter:keyup': 'click',
+    'space:keyup': 'click',
+  },
+
+  /** @private */
+  checkedChanged_: function() {
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');

[dpapad, 2017/04/13 00:35:09]

Nit (optional): The following should be equivalent
 
this.setAttribute('aria-checked', String(this.checked || false));

[Dan Beam, 2017/04/13 00:59:01]

so is !!this.checked, i just figured this is less weird

   },
 
   /**
@@ -56,8 +92,17 @@ Polymer({
     e.stopPropagation();
   },
 
-  /** Focuses the internal radio button when the row is selected. */
-  onFocus_: function() {
-    this.$.radioButton.focus();
+  /** @private */
+  onTap_: function() {
+    if (!this.controlled_)
+      this.checked = true;
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  updatePressed_: function(e) {
+    this.pressed_ = ['down', 'focus'].indexOf(e.type) >= 0;

[dpapad, 2017/04/13 00:35:09]

Nit (optional): Maybe use includes() instead of indexOf()?

[Dan Beam, 2017/04/13 01:22:58]

Done.

   },
 });