Handle tabindex attribute correctly

iron-control-state.d.ts

@@ -23,7 +23,12 @@ declare namespace Polymer {
      * If true, the user cannot interact with this element.
      */
     disabled: boolean|null|undefined;
-    _oldTabIndex: number|null|undefined;
+
+    /**
+     * Value of the `tabindex` attribute before `disabled` was activated.
+     * `null` means the attribute was not present.
+     */
+    _oldTabIndex: string|null|undefined;
     _boundFocusBlurHandler: Function|null|undefined;
     ready(): void;
     _focusBlurHandler(event: any): void;

iron-control-state.html

@@ -42,8 +42,13 @@
         reflectToAttribute: true
       },
 
+      /**
+       * Value of the `tabindex` attribute before `disabled` was activated.
+       * `null` means the attribute was not present.
+       * @type {?string|undefined}
+       */
       _oldTabIndex: {
-        type: Number
+        type: String
       },
 
       _boundFocusBlurHandler: {
@@ -103,12 +108,20 @@
       this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
       this.style.pointerEvents = disabled ? 'none' : '';
       if (disabled) {
-        this._oldTabIndex = this.tabIndex;
+        // Read the `tabindex` attribute instead of the `tabIndex` property.
+        // The property returns `-1` if there is no `tabindex` attribute.
+        // This distinction is important when restoring the value because
+        // leaving `-1` hides shadow root children from the tab order.
+        this._oldTabIndex = this.getAttribute('tabindex');
         this._setFocused(false);
         this.tabIndex = -1;
         this.blur();
       } else if (this._oldTabIndex !== undefined) {
-        this.tabIndex = this._oldTabIndex;
+        if (this._oldTabIndex === null) {
+          this.removeAttribute('tabindex');
+        } else {
+          this.setAttribute('tabindex', this._oldTabIndex);
+        }
       }
     },
 

test/disabled-state.html

@@ -30,6 +30,18 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="InitiallyWithoutTabIndex">
+    <template>
+      <test-control></test-control>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="InitiallyWithTabIndex">
+    <template>
+      <test-control tabindex="0"></test-control>
+    </template>
+  </test-fixture>
+
   <script>
     suite('disabled-state', function() {
       var disableTarget;
@@ -75,6 +87,42 @@
           expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
         });
       });
+
+      suite('`tabindex` attribute handling', function() {
+        suite('without `tabindex`', function() {
+          setup(function() {
+            disableTarget = fixture('InitiallyWithoutTabIndex');
+          });
+
+          test('adds `tabindex = -1` when disabled', function() {
+            disableTarget.disabled = true;
+            expect(disableTarget.getAttribute('tabindex')).to.be.eql('-1');
+          });
+
+          test('removed `tabindex` when re-enabled', function() {
+            disableTarget.disabled = true;
+            disableTarget.disabled = false;
+            expect(disableTarget.getAttribute('tabindex')).to.be.eql(null);
+          });
+        });
+
+        suite('with `tabindex`', function() {
+          setup(function() {
+            disableTarget = fixture('InitiallyWithTabIndex');
+          });
+
+          test('adds `tabindex = -1` when disabled', function() {
+            disableTarget.disabled = true;
+            expect(disableTarget.getAttribute('tabindex')).to.be.eql('-1');
+          });
+
+          test('restores `tabindex = 0` when re-enabled', function() {
+            disableTarget.disabled = true;
+            disableTarget.disabled = false;
+            expect(disableTarget.getAttribute('tabindex')).to.be.eql('0');
+          });
+        });
+      });
     });
   </script>