fix(text-field): Restore icon tabindex according to its initial value (#2600)

BREAKING CHANGE: Adds getAttr adapter API to text field icon

Author: kfranqueiro

packages/mdc-textfield/icon/README.md

@@ -105,6 +105,7 @@ This allows the parent `MDCTextField` component to access the public methods on
 
 Method Signature | Description
 --- | ---
+`getAttr(attr: string) => string` | Gets the value of an attribute on the icon element
 `setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the icon element
 `removeAttr(attr: string) => void` | Removes an attribute from the icon element
 `registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event

packages/mdc-textfield/icon/adapter.js

@@ -28,6 +28,13 @@
  * @record
  */
 class MDCTextFieldIconAdapter {
+  /**
+   * Gets the value of an attribute on the icon element.
+   * @param {string} attr
+   * @return {string}
+   */
+  getAttr(attr) {}
+
   /**
    * Sets an attribute on the icon element.
    * @param {string} attr

packages/mdc-textfield/icon/foundation.js

@@ -37,6 +37,7 @@ class MDCTextFieldIconFoundation extends MDCFoundation {
    */
   static get defaultAdapter() {
     return /** @type {!MDCTextFieldIconAdapter} */ ({
+      getAttr: () => {},
       setAttr: () => {},
       removeAttr: () => {},
       registerInteractionHandler: () => {},
@@ -51,11 +52,16 @@ class MDCTextFieldIconFoundation extends MDCFoundation {
   constructor(adapter) {
     super(Object.assign(MDCTextFieldIconFoundation.defaultAdapter, adapter));
 
+    /** @private {string?} */
+    this.savedTabIndex_ = null;
+
     /** @private {function(!Event): undefined} */
     this.interactionHandler_ = (evt) => this.handleInteraction(evt);
   }
 
   init() {
+    this.savedTabIndex_ = this.adapter_.getAttr('tabindex');
+
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.registerInteractionHandler(evtType, this.interactionHandler_);
     });
@@ -72,11 +78,15 @@ class MDCTextFieldIconFoundation extends MDCFoundation {
    * @param {boolean} disabled
    */
   setDisabled(disabled) {
+    if (!this.savedTabIndex_) {
+      return;
+    }
+
     if (disabled) {
       this.adapter_.setAttr('tabindex', '-1');
       this.adapter_.removeAttr('role');
     } else {
-      this.adapter_.setAttr('tabindex', '0');
+      this.adapter_.setAttr('tabindex', this.savedTabIndex_);
       this.adapter_.setAttr('role', strings.ICON_ROLE);
     }
   }

packages/mdc-textfield/icon/index.js

@@ -45,6 +45,7 @@ class MDCTextFieldIcon extends MDCComponent {
    */
   getDefaultFoundation() {
     return new MDCTextFieldIconFoundation(/** @type {!MDCTextFieldIconAdapter} */ (Object.assign({
+      getAttr: (attr) => this.root_.getAttribute(attr),
       setAttr: (attr, value) => this.root_.setAttribute(attr, value),
       removeAttr: (attr) => this.root_.removeAttribute(attr),
       registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),

test/unit/mdc-textfield/mdc-text-field-icon-foundation.test.js

@@ -30,7 +30,7 @@ test('exports strings', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCTextFieldIconFoundation, [
-    'setAttr', 'removeAttr', 'registerInteractionHandler', 'deregisterInteractionHandler',
+    'getAttr', 'setAttr', 'removeAttr', 'registerInteractionHandler', 'deregisterInteractionHandler',
     'notifyIconAction',
   ]);
 });
@@ -53,28 +53,45 @@ test('#destroy removes event listeners', () => {
   td.verify(mockAdapter.deregisterInteractionHandler('keydown', td.matchers.isA(Function)));
 });
 
-test('#setDisabled sets icon tabindex to -1 when set to true', () => {
+test('#setDisabled sets icon tabindex to -1 and removes role when set to true if icon initially had a tabindex', () => {
   const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getAttr('tabindex')).thenReturn('1');
+  foundation.init();
+
   foundation.setDisabled(true);
   td.verify(mockAdapter.setAttr('tabindex', '-1'));
+  td.verify(mockAdapter.removeAttr('role'));
 });
 
-test('#setDisabled removes icon role when set to true', () => {
+test('#setDisabled does not change icon tabindex or role when set to true if icon initially had no tabindex', () => {
   const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getAttr('tabindex')).thenReturn(null);
+  foundation.init();
+
   foundation.setDisabled(true);
-  td.verify(mockAdapter.removeAttr('role'));
+  td.verify(mockAdapter.setAttr('tabindex', td.matchers.isA(String)), {times: 0});
+  td.verify(mockAdapter.removeAttr('role'), {times: 0});
 });
 
-test('#setDisabled sets icon tabindex to 0 when set to false', () => {
+test('#setDisabled restores icon tabindex and role when set to false if icon initially had a tabindex', () => {
   const {foundation, mockAdapter} = setupTest();
+  const expectedTabIndex = '1';
+  td.when(mockAdapter.getAttr('tabindex')).thenReturn(expectedTabIndex);
+  foundation.init();
+
   foundation.setDisabled(false);
-  td.verify(mockAdapter.setAttr('tabindex', '0'));
+  td.verify(mockAdapter.setAttr('tabindex', expectedTabIndex));
+  td.verify(mockAdapter.setAttr('role', strings.ICON_ROLE));
 });
 
-test(`#setDisabled sets icon role to ${strings.ICON_ROLE} when set to false`, () => {
+test('#setDisabled does not change icon tabindex or role when set to false if icon initially had no tabindex', () => {
   const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getAttr('tabindex')).thenReturn(null);
+  foundation.init();
+
   foundation.setDisabled(false);
-  td.verify(mockAdapter.setAttr('role', strings.ICON_ROLE));
+  td.verify(mockAdapter.setAttr('tabindex', td.matchers.isA(String)), {times: 0});
+  td.verify(mockAdapter.setAttr('role', td.matchers.isA(String)), {times: 0});
 });
 
 test('on click notifies custom icon event', () => {

test/unit/mdc-textfield/mdc-text-field-icon.test.js

@@ -37,6 +37,14 @@ function setupTest() {
   return {root, component};
 }
 
+test('#adapter.getAttr returns the value of a given attribute on the element', () => {
+  const {root, component} = setupTest();
+  const expectedAttr = 'tabindex';
+  const expectedValue = '0';
+  root.setAttribute(expectedAttr, expectedValue);
+  assert.equal(component.getDefaultFoundation().adapter_.getAttr(expectedAttr), expectedValue);
+});
+
 test('#adapter.setAttr adds a given attribute to the element', () => {
   const {root, component} = setupTest();
   component.getDefaultFoundation().adapter_.setAttr('aria-label', 'foo');