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(docs-infra): assign different aria labels to main aio navs (#45209)

Browse Source 
assign different aria labels to the primary nav and the one used for
guides and docs, so that impaired users can more easily distinguish the
two

PR Close #45209
This commit is contained in:
dario-piotrowicz
2022-03-16 21:47:16 +00:00
committed by Dylan Hunn
parent 734bd8d953
commit 0fc4571b85
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aio/src/app/app.component.html
+2 -2
View File
@@ -50,8 +50,8 @@
<mat-sidenav-container class="sidenav-container" [class.no-animations]="disableAnimations" [class.has-floating-toc]="hasFloatingToc"> <mat-sidenav-container class="sidenav-container" [class.no-animations]="disableAnimations" [class.has-floating-toc]="hasFloatingToc">
<mat-sidenav [ngClass]="{'collapsed': !dockSideNav}" #sidenav class="sidenav" [mode]="mode" [opened]="isOpened" (openedChange)="updateHostClasses()"> <mat-sidenav [ngClass]="{'collapsed': !dockSideNav}" #sidenav class="sidenav" [mode]="mode" [opened]="isOpened" (openedChange)="updateHostClasses()">
<aio-nav-menu *ngIf="!showTopMenu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="dockSideNav"></aio-nav-menu> <aio-nav-menu *ngIf="!showTopMenu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="dockSideNav" navLabel="primary"></aio-nav-menu>
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="dockSideNav"></aio-nav-menu> <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="dockSideNav" navLabel="guides and docs"></aio-nav-menu>
<div class="doc-version"> <div class="doc-version">
<aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select> <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
aio/src/app/layout/nav-menu/nav-menu.component.ts
+8 -2
View File
@@ -4,12 +4,18 @@ import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service';
@Component({ @Component({
selector: 'aio-nav-menu', selector: 'aio-nav-menu',
template: ` template: `
<aio-nav-item *ngFor="let node of filteredNodes" [node]="node" [selectedNodes]="currentNode?.nodes" [isWide]="isWide"> <nav [attr.aria-label]="navLabel || null">
</aio-nav-item>` <aio-nav-item *ngFor="let node of filteredNodes"
[node]="node"
[selectedNodes]="currentNode?.nodes"
[isWide]="isWide">
</aio-nav-item>
</nav>`
}) })
export class NavMenuComponent { export class NavMenuComponent {
@Input() currentNode: CurrentNode | undefined; @Input() currentNode: CurrentNode | undefined;
@Input() isWide = false; @Input() isWide = false;
@Input() nodes: NavigationNode[]; @Input() nodes: NavigationNode[];
@Input() navLabel: string;
get filteredNodes() { return this.nodes ? this.nodes.filter(n => !n.hidden) : []; } get filteredNodes() { return this.nodes ? this.nodes.filter(n => !n.hidden) : []; }
} }