Skip to content
This repository was archived by the owner on Jan 4, 2026. It is now read-only.

Commit 27837ab

Browse files
riavalonriavalon
committed
chore(accessibility): Add aria attributes to aid screen reader flow
1 parent d2c1bc6 commit 27837ab

15 files changed

Lines changed: 145 additions & 39 deletions

File tree

‎src/app/material-docs-app.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {Component, ViewEncapsulation} from '@angular/core';
22
import {Router, NavigationStart} from '@angular/router';
3+
import {Title} from '@angular/platform-browser';
34

45

56
@Component({
@@ -14,10 +15,34 @@ import {Router, NavigationStart} from '@angular/router';
1415
export class MaterialDocsApp {
1516
isDarkTheme = false;
1617
showShadow = false;
18+
baseTitle = 'Angular Material';
1719

18-
constructor(router: Router) {
20+
constructor(router: Router, private _titleService: Title) {
1921
router.events.subscribe((data: NavigationStart) => {
2022
this.showShadow = data.url.startsWith('/components');
23+
this._setTitle(window.location.pathname);
2124
});
2225
}
26+
27+
private _setTitle(pathname) {
28+
const title = this._getTitle(pathname);
29+
title ?
30+
this._titleService.setTitle(`${this.baseTitle} - ${this._capitalizeTitle(title)}`) :
31+
this._titleService.setTitle(this.baseTitle);
32+
}
33+
34+
private _getTitle(pathname) {
35+
return pathname.split('/').filter(Boolean).pop();
36+
}
37+
38+
private _trimFilename(filename) {
39+
const isFilenameRegex = new RegExp(/.+\./g);
40+
return ~filename.search(isFilenameRegex) ?
41+
filename.match(isFilenameRegex)[0].replace('.', '') :
42+
filename;
43+
}
44+
45+
private _capitalizeTitle(title) {
46+
return title[0].toUpperCase() + this._trimFilename(title.slice(1));
47+
}
2348
}

‎src/app/pages/component-category-list/component-category-list.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<div class="docs-component-category-list">
2-
<md-card
3-
*ngFor="let category of docItems.getItemsInCategories()"
4-
class="docs-component-category-list-card"
5-
[routerLink]="['/components/category/', category.id]">
6-
<md-card-title>{{category.name}}</md-card-title>
7-
<p class="docs-component-category-list-card-summary">{{category.summary}}</p>
8-
<div class="docs-component-category-list-card-image"
9-
[style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
10-
</div>
11-
</md-card>
2+
<a
3+
*ngFor="let category of docItems.getItemsInCategories()"
4+
[routerLink]="['/components/category/', category.id]">
5+
<md-card class="docs-component-category-list-card">
6+
<md-card-title>{{category.name}}</md-card-title>
7+
<p class="docs-component-category-list-card-summary">{{category.summary}}</p>
8+
<div class="docs-component-category-list-card-image"
9+
[style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
10+
</div>
11+
</md-card>
12+
</a>
1213
</div>

‎src/app/pages/component-category-list/component-category-list.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
22
import {MaterialModule} from '@angular/material';
33
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
4+
import {RouterTestingModule} from '@angular/router/testing';
45

56
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
67
import {ComponentPageTitle} from '../page-title/page-title';
@@ -12,12 +13,12 @@ describe('ComponentCategoryList', () => {
1213

1314
beforeEach(async(() => {
1415
TestBed.configureTestingModule({
15-
imports: [MaterialModule],
16+
imports: [MaterialModule, RouterTestingModule],
1617
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1718
declarations: [ComponentCategoryList],
1819
providers: [
1920
DocumentationItems,
20-
ComponentPageTitle
21+
ComponentPageTitle,
2122
]
2223
});
2324

‎src/app/pages/component-page-header/component-page-header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
<md-icon>menu</md-icon>
44
</button>
55

6-
<h1>{{getTitle()}} </h1>
6+
<h1 [attr.aria-alert]="getTitle()">{{getTitle()}} </h1>
77
</div>

‎src/app/pages/component-sidenav/component-sidenav.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<md-sidenav-container class="docs-component-viewer-sidenav-container">
2-
<md-sidenav #sidenav class="docs-component-viewer-sidenav"
2+
<md-sidenav aria-label="Component navigation" role="navigation" #sidenav class="docs-component-viewer-sidenav"
33
[opened]="!isScreenSmall()"
44
[mode]="isScreenSmall() ? 'over' : 'side'">
5-
<nav *ngFor="let category of docItems.getItemsInCategories()">
6-
<h3>{{category.name}}</h3>
5+
<nav [attr.aria-labelledby]="category.id + '-id'" *ngFor="let category of docItems.getItemsInCategories()">
6+
<h3 tabindex="0" id="{{category.id}}-id">{{category.name}}</h3>
77
<ul>
88
<li *ngFor="let component of category.items">
99
<a [routerLink]="['/components/component/', component.id]"
@@ -15,7 +15,7 @@ <h3>{{category.name}}</h3>
1515
</nav>
1616
</md-sidenav>
1717

18-
<div class="docs-component-sidenav-content">
18+
<div role="main" class="docs-component-sidenav-content">
1919
<component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
2020
<router-outlet></router-outlet>
2121
<app-footer></app-footer>

‎src/app/pages/component-viewer/component-viewer.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<!-- TODO(jelbourn): turn this into nav tabs -->
22
<md-tab-group class="docs-component-viewer-tabbed-content"
33
(selectedIndexChange)="overviewViewer.releadLiveExamples()">
4-
<md-tab label="OVERVIEW">
5-
<doc-viewer #overviewViewer
4+
<md-tab id="overviewViewerTab" aria-controls="overviewViewer" role="tab" label="OVERVIEW">
5+
<doc-viewer aria-labelledby="overviewViewerTab" id="overviewViewer" role="tabpanel" #overviewViewer
66
documentUrl="/assets/documents/overview/{{componentDocItem.id}}.html"
77
class="docs-component-view-text-content">
88
</doc-viewer>
99
</md-tab>
1010

11-
<md-tab label="API REFERENCE">
12-
<doc-viewer documentUrl="/assets/documents/api/{{componentDocItem.id}}.html"
11+
<md-tab id="apiViewerTab" aria-controls="apiViewer" role="tab" label="API REFERENCE">
12+
<doc-viewer aria-labelledby="apiViewerTab" id="apiViewer" role="tabpanel" documentUrl="/assets/documents/api/{{componentDocItem.id}}.html"
1313
class="docs-component-view-text-content"></doc-viewer>
1414
</md-tab>
1515

16-
<md-tab label="EXAMPLES">
16+
<md-tab id="exampleViewerTab" aria-controls="exampleViewer" role="tab" label="EXAMPLES">
1717

18-
<example-viewer *ngFor="let example of componentDocItem.examples" [example]="example">
19-
</example-viewer>
18+
<div id="exmapleViewer" aria-labelledby="exampleViewerTab" role="tabpanel">
19+
<example-viewer *ngFor="let example of componentDocItem.examples" [example]="example">
20+
</example-viewer>
21+
</div>
2022

2123
</md-tab>
2224
</md-tab-group>

‎src/app/pages/guide-list/guide-list.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
<div class="docs-primary-header">
2-
<h1>Guides</h1>
3-
</div>
4-
5-
<md-nav-list class="docs-guide-list">
6-
<a md-list-item *ngFor="let guide of guideItems.getAllItems()"
1+
<div class="docs-guides-container" role="main">
2+
<div class="docs-primary-header">
3+
<h1 [attr.aria-alert]="'Guides'">Guides</h1>
4+
</div>
5+
<md-nav-list class="docs-guide-list">
6+
<a md-list-item
77
class="docs-guide-item"
8+
*ngFor="let guide of guideItems.getAllItems()"
89
[routerLink]="['/guide/', guide.id]">
9-
{{guide.name}}
10-
</a>
11-
</md-nav-list>
10+
{{guide.name}}
11+
</a>
12+
</md-nav-list>
13+
</div>
1214

1315
<app-footer></app-footer>

‎src/app/pages/guide-list/guide-list.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
:host {
1+
:host, .docs-guides-container {
22
display: flex;
33
flex-direction: column;
44
flex-grow: 1;

‎src/app/pages/guide-viewer/guide-viewer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="docs-primary-header">
2-
<h1>{{guide.name}}</h1>
2+
<h1 [attr.aria-alert]="guide.name">{{guide.name}}</h1>
33
</div>
44

55
<doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>

‎src/app/pages/homepage/homepage.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h2> Material Design components for Angular apps</h2>
1010
</div>
1111
</header>
1212

13-
<div class="docs-homepage-promo">
13+
<div role="main" class="docs-homepage-promo">
1414
<div class="docs-homepage-row">
1515
<div class="docs-homepage-promo-img">
1616
<img src="../assets/img/homepage/sprintzerotoapp.svg" alt="Sprint from Zero to App" />

0 commit comments

Comments
 (0)