From 9ec35b74ec5109a3fc7d4398c91aa82028819b3b Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Thu, 30 Nov 2017 12:47:39 -0500
Subject: [PATCH] fix(icon-toggle): Don't nuke tabindex if initializing
 disabled to false (#1667)

---
 packages/mdc-icon-toggle/foundation.js        |  1 +
 .../mdc-icon-toggle/mdc-icon-toggle.test.js   | 38 +++++++++++++++----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/mdc-icon-toggle/foundation.js b/packages/mdc-icon-toggle/foundation.js
index e146b4bf9ca..8398e500853 100644
--- a/packages/mdc-icon-toggle/foundation.js
+++ b/packages/mdc-icon-toggle/foundation.js
@@ -89,6 +89,7 @@ class MDCIconToggleFoundation extends MDCFoundation {
 
   init() {
     this.refreshToggleData();
+    this.savedTabIndex_ = this.adapter_.getTabIndex();
     this.adapter_.registerInteractionHandler('click', this.clickHandler_);
     this.adapter_.registerInteractionHandler('keydown', this.keydownHandler_);
     this.adapter_.registerInteractionHandler('keyup', this.keyupHandler_);
diff --git a/test/unit/mdc-icon-toggle/mdc-icon-toggle.test.js b/test/unit/mdc-icon-toggle/mdc-icon-toggle.test.js
index 05dd4ab31f2..688138ca6ad 100644
--- a/test/unit/mdc-icon-toggle/mdc-icon-toggle.test.js
+++ b/test/unit/mdc-icon-toggle/mdc-icon-toggle.test.js
@@ -25,7 +25,7 @@ import {MDCIconToggle, MDCIconToggleFoundation} from '../../../packages/mdc-icon
 import {MDCRipple} from '../../../packages/mdc-ripple';
 import {cssClasses} from '../../../packages/mdc-ripple/constants';
 
-function setupTest({useInnerIconElement = false} = {}) {
+function setupTest({tabIndex = undefined, useInnerIconElement = false} = {}) {
   const root = document.createElement(useInnerIconElement ? 'span' : 'i');
   if (useInnerIconElement) {
     const icon = document.createElement('i');
@@ -33,6 +33,9 @@ function setupTest({useInnerIconElement = false} = {}) {
     root.dataset.iconInnerSelector = `#${icon.id}`;
     root.appendChild(icon);
   }
+  if (tabIndex !== undefined) {
+    root.tabIndex = tabIndex;
+  }
   const component = new MDCIconToggle(root);
   return {root, component};
 }
@@ -74,17 +77,40 @@ test('set/get on', () => {
   assert.equal(root.getAttribute('aria-pressed'), 'false');
 });
 
-test('set/get disabled', () => {
-  const {root, component} = setupTest();
+test('set/get disabled to true', () => {
+  const {root, component} = setupTest({tabIndex: 0});
+
   component.disabled = true;
   assert.isOk(component.disabled);
   assert.equal(root.getAttribute('aria-disabled'), 'true');
   assert.isOk(root.classList.contains(MDCIconToggleFoundation.cssClasses.DISABLED));
+  assert.equal(root.tabIndex, -1);
+});
+
+test('set/get disabled to false', () => {
+  const {root, component} = setupTest({tabIndex: 0});
 
   component.disabled = false;
   assert.isNotOk(component.disabled);
   assert.isNotOk(root.hasAttribute('aria-disabled'));
   assert.isNotOk(root.classList.contains(MDCIconToggleFoundation.cssClasses.DISABLED));
+  assert.equal(root.tabIndex, 0, 'element\'s tabIndex should be the same value it already had');
+});
+
+test('set/get disabled to true, then false', () => {
+  const {root, component} = setupTest({tabIndex: 0});
+
+  component.disabled = true;
+  assert.isOk(component.disabled);
+  assert.equal(root.getAttribute('aria-disabled'), 'true');
+  assert.isOk(root.classList.contains(MDCIconToggleFoundation.cssClasses.DISABLED));
+  assert.equal(root.tabIndex, -1);
+
+  component.disabled = false;
+  assert.isNotOk(component.disabled);
+  assert.isNotOk(root.hasAttribute('aria-disabled'));
+  assert.isNotOk(root.classList.contains(MDCIconToggleFoundation.cssClasses.DISABLED));
+  assert.equal(root.tabIndex, 0, 'element\'s tabIndex should be the same value it originally had');
 });
 
 test('#refreshToggleData proxies to foundation.refreshToggleData()', () => {
@@ -174,14 +200,12 @@ test('#adapter.setText sets the text content of the inner icon element when used
 });
 
 test('#adapter.getTabIndex returns the tabIndex of the element', () => {
-  const {root, component} = setupTest();
-  root.tabIndex = 4;
+  const {component} = setupTest({tabIndex: 4});
   assert.equal(component.getDefaultFoundation().adapter_.getTabIndex(), 4);
 });
 
 test('#adapter.setTabIndex sets the tabIndex of the element', () => {
-  const {root, component} = setupTest();
-  root.tabIndex = 4;
+  const {root, component} = setupTest({tabIndex: 4});
   component.getDefaultFoundation().adapter_.setTabIndex(2);
   assert.equal(root.tabIndex, 2);
 });