fix(stepper): support going to first/last steps via home/end keys (#9632)

Adds support for the user to skip to the first/last step in the stepper using the home and end keys. [Based on the a11y guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel).
This commit is contained in:
Kristiyan Kostadinov
2018-02-01 20:24:31 +01:00
committed by tinayuangao
parent 7fe651b88a
commit 834aecce64
2 changed files with 40 additions and 2 deletions
+20 -1
View File
@@ -27,7 +27,16 @@ import {
OnChanges,
OnDestroy
} from '@angular/core';
import {LEFT_ARROW, RIGHT_ARROW, DOWN_ARROW, UP_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
import {
LEFT_ARROW,
RIGHT_ARROW,
DOWN_ARROW,
UP_ARROW,
ENTER,
SPACE,
HOME,
END,
} from '@angular/cdk/keycodes';
import {CdkStepLabel} from './step-label';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {AbstractControl} from '@angular/forms';
@@ -307,6 +316,16 @@ export class CdkStepper implements OnDestroy {
this.selectedIndex = this._focusIndex;
event.preventDefault();
}
if (keyCode === HOME) {
this._focusStep(0);
event.preventDefault();
}
if (keyCode === END) {
this._focusStep(this._steps.length - 1);
event.preventDefault();
}
}
private _focusNextStep() {
+20 -1
View File
@@ -1,5 +1,14 @@
import {Directionality} from '@angular/cdk/bidi';
import {ENTER, LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, SPACE} from '@angular/cdk/keycodes';
import {
ENTER,
LEFT_ARROW,
RIGHT_ARROW,
UP_ARROW,
DOWN_ARROW,
SPACE,
HOME,
END,
} from '@angular/cdk/keycodes';
import {dispatchKeyboardEvent} from '@angular/cdk/testing';
import {Component, DebugElement} from '@angular/core';
import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
@@ -725,6 +734,16 @@ function assertCorrectKeyboardInteraction(fixture: ComponentFixture<any>,
expect(stepperComponent.selectedIndex)
.toBe(0,
'Expected index of selected step to change to index of focused step after SPACE event.');
const endEvent = dispatchKeyboardEvent(stepHeaderEl, 'keydown', END);
expect(stepperComponent._focusIndex)
.toBe(stepHeaders.length - 1, 'Expected last step to be focused when pressing END.');
expect(endEvent.defaultPrevented).toBe(true, 'Expected default END action to be prevented.');
const homeEvent = dispatchKeyboardEvent(stepHeaderEl, 'keydown', HOME);
expect(stepperComponent._focusIndex)
.toBe(0, 'Expected first step to be focused when pressing HOME.');
expect(homeEvent.defaultPrevented).toBe(true, 'Expected default HOME action to be prevented.');
}
/** Asserts that step selection change using stepper buttons does not focus step header. */