fix(icon-toggle): Don't nuke tabindex if initializing disabled to fal…

…se (#1667)
material-components · Nov 30, 2017 · 9ec35b7 · 9ec35b7
1 parent 7a23183
commit 9ec35b7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git 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
@@ -25,14 +25,17 @@ 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');
     icon.id = 'icon';
     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);
 });