Allow customizing tabindex for <cr-icon-button>

This is a port of the CL that was made for <cr-button>:
https://crrev.com/c/2069144.

Same as in that CL, the goal is to allow to customize the
"tabindex" attribute in a robust way, now for the
<cr-icon-button> Polymer element. (See that other CL for
more context.)

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

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

@@ -79,10 +79,23 @@ suite('cr-icon-button', function() {
   });
 
   test('when tabindex is -1, it stays -1', async () => {
-    document.body.innerHTML = '<cr-icon-button tabindex="-1"></cr-icon-button>';
+    document.body.innerHTML =
+        '<cr-icon-button custom-tab-index="-1"></cr-icon-button>';
     await test_util.flushTasks();
     button = document.body.querySelector('cr-icon-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-icon-button></cr-icon-button>';
+    button = document.body.querySelector('cr-icon-button');
+    assertEquals('0', button.getAttribute('tabindex'));
+    button.customTabIndex = 1;
+    assertEquals('1', button.getAttribute('tabindex'));
   });
 
   test('ripple is a circle with background icon or single iron-icon', () => {

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js

@@ -60,6 +60,14 @@ Polymer({
       observer: 'disabledChanged_',
     },
 
+    /**
+     * Use this property in order to configure the "tabindex" attribute.
+     */
+    customTabIndex: {
+      type: Number,
+      observer: 'applyTabIndex_',
+    },
+
     ironIcon: {
       type: String,
       observer: 'onIronIconChanged_',
@@ -120,7 +128,19 @@ Polymer({
       this.blur();
     }
     this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-    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);
   },
 
   /**