Allow customizing tabindex for <cr-button>

This adds a Polymer property to the <cr-button> element that allows the
host to specify the custom value of the "tabindex" attribute.

Before this CL, the <cr-button> element was handling this attribute
itself: it was forcing it to "-1" when the button is disabled and to "0"
when the button is re-enabled. Also a few already existing examples in
the code base are configuring the "tabindex" directly at the <cr-button>
element, but it's fragile (and buggy in some cases), because this
value gets overwritten as soon as the "disabled" property gets changed.

After this CL, the more robust alternative appears:

  <cr-button custom-tab-index=...>

Bug: 1043194
Test: add element '<cr-button custom-tab-index="-1">' to a Polymer page, verify that it's not tabbable
Change-Id: Id5e79737f2bc9ac049ea1f2372ec160aac36d9c0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2069144
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744278}

chrome/test/data/webui/cr_elements/cr_button_tests.js

@@ -66,9 +66,21 @@ suite('cr-button', function() {
   });
 
   test('when tabindex is -1, it stays -1', async () => {
-    document.body.innerHTML = '<cr-button tabindex="-1"></cr-button>';
+    document.body.innerHTML = '<cr-button custom-tab-index="-1"></cr-button>';
     button = document.body.querySelector('cr-button');
     assertEquals('-1', button.getAttribute('tabindex'));
+    button.disabled = true;
+    assertEquals('-1', button.getAttribute('tabindex'));
+    button.disabled = false;
+    assertEquals('-1', button.getAttribute('tabindex'));
+  });
+
+  test('tabindex update', async () => {
+    document.body.innerHTML = '<cr-button></cr-button>';
+    button = document.body.querySelector('cr-button');
+    assertEquals('0', button.getAttribute('tabindex'));
+    button.customTabIndex = 1;
+    assertEquals('1', button.getAttribute('tabindex'));
   });
 
   test('hidden', () => {

ui/webui/resources/cr_elements/cr_button/cr_button.js

@@ -22,6 +22,14 @@ Polymer({
       observer: 'disabledChanged_',
     },
 
+    /**
+     * Use this property in order to configure the "tabindex" attribute.
+     */
+    customTabIndex: {
+      type: Number,
+      observer: 'applyTabIndex_',
+    },
+
     /**
      * Flag used for formatting ripples on circle shaped cr-buttons.
      * @private
@@ -79,7 +87,7 @@ Polymer({
 
   /**
    * @param {boolean} newValue
-   * @param {boolean} oldValue
+   * @param {boolean|undefined} oldValue
    * @private
    */
   disabledChanged_(newValue, oldValue) {
@@ -90,7 +98,19 @@ Polymer({
       this.blur();
     }
     this.setAttribute('aria-disabled', Boolean(this.disabled));
-    this.setAttribute('tabindex', this.disabled ? -1 : 0);
+    this.applyTabIndex_();
+  },
+
+  /**
+   * Updates the tabindex HTML attribute to the actual value.
+   * @private
+   */
+  applyTabIndex_() {
+    let value = this.customTabIndex;
+    if (value === undefined) {
+      value = this.disabled ? -1 : 0;
+    }
+    this.setAttribute('tabindex', value);
   },
 
   /**