mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
chore: add skip navigation link for a11y demo (#6423)
This commit is contained in:
committed by
Jeremy Elbourn
parent
8f9f3c8fca
commit
ed735a174a
@@ -1,9 +1,12 @@
|
||||
<h1>Accessibility Demo</h1>
|
||||
|
||||
<nav>
|
||||
<a (click)="skipNavigation()" href="javascript:void(0)">Skip navigation</a>
|
||||
<a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]">
|
||||
{{navItem.name}}
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
<div #maincontent tabindex="0">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
import {Component, ElementRef, ViewChild, ViewEncapsulation} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@@ -15,6 +15,8 @@ export class AccessibilityHome {}
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class AccessibilityDemo {
|
||||
@ViewChild('maincontent') mainContent: ElementRef;
|
||||
|
||||
navItems = [
|
||||
{name: 'Home', route: '.'},
|
||||
{name: 'Autocomplete', route: 'autocomplete'},
|
||||
@@ -37,4 +39,9 @@ export class AccessibilityDemo {
|
||||
{name: 'Select', route: 'select'},
|
||||
{name: 'Toolbar', route: 'toolbar'},
|
||||
];
|
||||
|
||||
skipNavigation() {
|
||||
this.mainContent.nativeElement.scrollIntoView();
|
||||
this.mainContent.nativeElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user