feat(tab): Give focus to tab when activated (#3164)

material-components · Jul 23, 2018 · 0c5e385 · 0c5e385
1 parent 51ae758
commit 0c5e385
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 0 deletions.
diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md
@@ -145,6 +145,7 @@ Method Signature | Description
 `getContentOffsetWidth() => number` | Returns the `offsetWidth` value of the content element.
 `notifyInteracted() => void` | Emits the `MDCTab:interacted` event.
 `notifyActivated() => void` | Emits the `MDCTab:activated` event.
+`focus() => void` | Applies focus to the root element.
 
 ### `MDCTabFoundation`
 

diff --git a/packages/mdc-tab/adapter.js b/packages/mdc-tab/adapter.js
@@ -124,6 +124,11 @@ class MDCTabAdapter {
    * @return {number}
    */
   getContentOffsetWidth() {}
+
+  /**
+   * Applies focus to the root element
+   */
+  focus() {}
 }
 
 export {MDCTabDimensions, MDCTabAdapter};
diff --git a/packages/mdc-tab/foundation.js b/packages/mdc-tab/foundation.js
@@ -62,6 +62,7 @@ class MDCTabFoundation extends MDCFoundation {
       getOffsetWidth: () => {},
       getContentOffsetLeft: () => {},
       getContentOffsetWidth: () => {},
+      focus: () => {},
     });
   }
 
@@ -127,6 +128,7 @@ class MDCTabFoundation extends MDCFoundation {
     this.adapter_.setAttr(strings.ARIA_SELECTED, 'true');
     this.adapter_.setAttr(strings.TABINDEX, '0');
     this.adapter_.activateIndicator(previousIndicatorClientRect);
+    this.adapter_.focus();
     this.adapter_.notifyActivated();
   }
 

diff --git a/packages/mdc-tab/index.js b/packages/mdc-tab/index.js
@@ -95,6 +95,7 @@ class MDCTab extends MDCComponent {
         getOffsetWidth: () => this.root_.offsetWidth,
         getContentOffsetLeft: () => this.content_.offsetLeft,
         getContentOffsetWidth: () => this.content_.offsetWidth,
+        focus: () => this.root_.focus(),
       }));
   }
 

diff --git a/test/unit/mdc-tab/foundation.test.js b/test/unit/mdc-tab/foundation.test.js
@@ -39,6 +39,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'activateIndicator', 'deactivateIndicator', 'computeIndicatorClientRect',
     'getOffsetLeft', 'getOffsetWidth', 'getContentOffsetLeft', 'getContentOffsetWidth',
     'notifyInteracted', 'notifyActivated',
+    'focus',
   ]);
 });
 
@@ -88,6 +89,12 @@ test('#activate activates the indicator', () => {
   td.verify(mockAdapter.activateIndicator({width: 100, left: 200}));
 });
 
+test('#activate focuses the root node', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.activate({width: 100, left: 200});
+  td.verify(mockAdapter.focus());
+});
+
 test(`#activate emits the ${MDCTabFoundation.strings.ACTIVATED_EVENT} event`, () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.activate();

diff --git a/test/unit/mdc-tab/mdc-tab.test.js b/test/unit/mdc-tab/mdc-tab.test.js
@@ -142,6 +142,14 @@ test('#adapter.getContentOffsetLeft() returns the offsetLeft of the content elem
   assert.strictEqual(component.getDefaultFoundation().adapter_.getContentOffsetLeft(), content.offsetLeft);
 });
 
+test('#adapter.focus() gives focus to the root element', () => {
+  const {root, component} = setupTest();
+  document.body.appendChild(root);
+  component.getDefaultFoundation().adapter_.focus();
+  assert.strictEqual(document.activeElement, root);
+  document.body.removeChild(root);
+});
+
 test(`#adapter.notifyInteracted() emits the ${MDCTabFoundation.strings.INTERACTED_EVENT} event`, () => {
   const {component} = setupTest();
   const handler = td.func('interaction handler');