Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
aio/src/app/app.component.html
View file

@ -50,8 +50,8 @@
<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()">
<aio-nav-menu *ngIf="!showTopMenu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="dockSideNav"></aio-nav-menu>
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [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" navLabel="guides and docs"></aio-nav-menu>
<div class="doc-version">
<aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>

10
aio/src/app/layout/nav-menu/nav-menu.component.ts
View file

@ -4,12 +4,18 @@ import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service';
@Component({
selector: 'aio-nav-menu',
template: `
<aio-nav-item *ngFor="let node of filteredNodes" [node]="node" [selectedNodes]="currentNode?.nodes" [isWide]="isWide">
</aio-nav-item>`
<nav [attr.aria-label]="navLabel || null">
<aio-nav-item *ngFor="let node of filteredNodes"
[node]="node"
[selectedNodes]="currentNode?.nodes"
[isWide]="isWide">
</aio-nav-item>
</nav>`
})
export class NavMenuComponent {
@Input() currentNode: CurrentNode | undefined;
@Input() isWide = false;
@Input() nodes: NavigationNode[];
@Input() navLabel: string;
get filteredNodes() { return this.nodes ? this.nodes.filter(n => !n.hidden) : []; }
}