mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
tinayuangao
parent
7fe651b88a
commit
834aecce64
@@ -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() {
|
||||
|
||||
@@ -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. */
|
||||
|
||||
Reference in New Issue
Block a user