skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): allow for tabs to be selected using the space key (#6426)

Browse Source 
* Allows for the user to select a tab using the space key, in addition to enter. This seems to be consistent with the M1 implementation of tabs.
* Prevents the default action for space and enter in order to prevent the page from scrolling by accident.

Fixes #6406.
This commit is contained in:
Kristiyan Kostadinov
2017-08-15 23:48:29 +02:00
committed by Andrew Seguin
parent 1df79e9efa
commit b5f4caf1fa
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/tabs/tab-header.spec.ts
+10 -2
View File
@@ -4,7 +4,7 @@ import {
import {Component, ViewChild, ViewContainerRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {By} from '@angular/platform-browser';
import {ENTER, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
import {PortalModule} from '@angular/cdk/portal';
import {ViewportRuler} from '@angular/cdk/overlay';
import {Direction, Directionality} from '@angular/cdk/bidi';
@@ -120,14 +120,22 @@ describe('MdTabHeader', () => {
// Select the focused index 2
expect(appComponent.selectedIndex).toBe(0);
dispatchKeyboardEvent(tabListContainer, 'keydown', ENTER);
const enterEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', ENTER);
fixture.detectChanges();
expect(appComponent.selectedIndex).toBe(2);
expect(enterEvent.defaultPrevented).toBe(true);
// Move focus right to 0
dispatchKeyboardEvent(tabListContainer, 'keydown', LEFT_ARROW);
fixture.detectChanges();
expect(appComponent.mdTabHeader.focusIndex).toBe(0);
// Select the focused 0 using space.
expect(appComponent.selectedIndex).toBe(2);
const spaceEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', SPACE);
fixture.detectChanges();
expect(appComponent.selectedIndex).toBe(0);
expect(spaceEvent.defaultPrevented).toBe(true);
});
});
src/lib/tabs/tab-header.ts
+3 -1
View File
@@ -25,7 +25,7 @@ import {
ChangeDetectorRef,
} from '@angular/core';
import {Directionality, Direction} from '@angular/cdk/bidi';
import {RIGHT_ARROW, LEFT_ARROW, ENTER} from '@angular/cdk/keycodes';
import {RIGHT_ARROW, LEFT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
import {auditTime, startWith} from '@angular/cdk/rxjs';
import {Subscription} from 'rxjs/Subscription';
import {of as observableOf} from 'rxjs/observable/of';
@@ -172,7 +172,9 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
this._focusPreviousTab();
break;
case ENTER:
case SPACE:
this.selectFocusedIndex.emit(this.focusIndex);
event.preventDefault();
break;
}
}