chore(accessibility): Add aria attributes to aid screen reader flow

riavalon · riavalon · commit a3b3acf027a9 · 2017-06-26T15:41:31.000-04:00
diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts
@@ -1,5 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {Router, NavigationStart} from '@angular/router';
+import {Title} from '@angular/platform-browser';
 
 
 @Component({
@@ -10,8 +11,9 @@ import {Router, NavigationStart} from '@angular/router';
 })
 export class MaterialDocsApp {
   showShadow = false;
+  baseTitle = 'Angular Material';
 
-  constructor(router: Router) {
+  constructor(router: Router, private _titleService: Title) {
     let previousRoute = router.routerState.snapshot.url;
 
     router.events.subscribe((data: NavigationStart) => {
@@ -24,8 +26,33 @@ export class MaterialDocsApp {
       }
 
       previousRoute = data.url;
+
+      // set page title
+      this._setTitle(window.location.pathname);
     });
   }
+
+  private _setTitle(pathname) {
+    const title = this._getTitle(pathname);
+    title ?
+      this._titleService.setTitle(`${this.baseTitle} - ${this._capitalizeTitle(title)}`) :
+      this._titleService.setTitle(this.baseTitle);
+  }
+
+  private _getTitle(pathname) {
+    return pathname.split('/').filter(Boolean).pop();
+  }
+
+  private _trimFilename(filename) {
+    const isFilenameRegex = new RegExp(/.+\./g);
+    return ~filename.search(isFilenameRegex) ?
+      filename.match(isFilenameRegex)[0].replace('.', '') :
+      filename;
+  }
+
+  private _capitalizeTitle(title) {
+    return title[0].toUpperCase() + this._trimFilename(title.slice(1));
+  }
 }
 
 function isNavigationWithinComponentView(oldUrl: string, newUrl: string) {
diff --git a/src/app/pages/component-category-list/component-category-list.html b/src/app/pages/component-category-list/component-category-list.html
@@ -1,12 +1,13 @@
 <div class="docs-component-category-list">
-  <md-card
-      *ngFor="let category of docItems.getItemsInCategories()"
-      class="docs-component-category-list-card"
-      [routerLink]="['/categories/', category.id]">
-    <md-card-title>{{category.name}}</md-card-title>
-    <p class="docs-component-category-list-card-summary">{{category.summary}}</p>
-    <docs-svg-viewer class="docs-component-category-list-card-image"
-                     [src]="'../../../assets/img/component-categories/' + category.id + '.svg'">
-    </docs-svg-viewer>
-  </md-card>
+  <a
+    *ngFor="let category of docItems.getItemsInCategories()"
+    [routerLink]="['/components/category/', category.id]">
+    <md-card class="docs-component-category-list-card">
+      <md-card-title>{{category.name}}</md-card-title>
+      <p class="docs-component-category-list-card-summary">{{category.summary}}</p>
+      <docs-svg-viewer class="docs-component-category-list-card-image"
+                       [src]="'../../../assets/img/component-categories/' + category.id + '.svg'">
+      </docs-svg-viewer>
+    </md-card>
+  </a>
 </div>
diff --git a/src/app/pages/component-category-list/component-category-list.spec.ts b/src/app/pages/component-category-list/component-category-list.spec.ts
@@ -1,6 +1,12 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MaterialModule} from '@angular/material';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {RouterTestingModule} from '@angular/router/testing';
+
 import {ComponentCategoryList, ComponentCategoryListModule} from './component-category-list';
 import {DocsAppTestingModule} from '../../testing/testing-module';
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 
 describe('ComponentCategoryList', () => {
@@ -9,6 +15,7 @@ describe('ComponentCategoryList', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [ComponentCategoryListModule, DocsAppTestingModule],
+      providers: [ComponentPageTitle],
     }).compileComponents();
   }));
 
diff --git a/src/app/pages/component-page-header/component-page-header.html b/src/app/pages/component-page-header/component-page-header.html
@@ -3,5 +3,5 @@
     <md-icon>menu</md-icon>
   </button>
 
-  <h1>{{getTitle()}} </h1>
+  <h1 [attr.aria-alert]="getTitle()">{{getTitle()}} </h1>
 </div>
diff --git a/src/app/pages/component-sidenav/component-sidenav.html b/src/app/pages/component-sidenav/component-sidenav.html
@@ -1,9 +1,9 @@
 <md-sidenav-container class="docs-component-viewer-sidenav-container">
-  <md-sidenav #sidenav class="docs-component-viewer-sidenav"
+  <md-sidenav aria-label="Component navigation" role="navigation" #sidenav class="docs-component-viewer-sidenav"
               [opened]="!isScreenSmall()"
               [mode]="isScreenSmall() ? 'over' : 'side'">
-    <nav *ngFor="let category of docItems.getItemsInCategories()">
-      <h3>{{category.name}}</h3>
+    <nav [attr.aria-labelledby]="category.id + '-id'" *ngFor="let category of docItems.getItemsInCategories()">
+      <h3 tabindex="0" id="{{category.id}}-id">{{category.name}}</h3>
       <ul>
         <li *ngFor="let component of category.items">
           <a [routerLink]="['/components/', component.id]"
@@ -15,7 +15,7 @@ <h3>{{category.name}}</h3>
     </nav>
   </md-sidenav>
 
-  <div class="docs-component-sidenav-content">
+  <div role="main" class="docs-component-sidenav-content">
     <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
     <router-outlet></router-outlet>
     <app-footer></app-footer>
diff --git a/src/app/pages/guide-list/guide-list.html b/src/app/pages/guide-list/guide-list.html
@@ -1,13 +1,15 @@
-<div class="docs-primary-header">
-  <h1>Guides</h1>
-</div>
-
-<md-nav-list class="docs-guide-list">
-  <a md-list-item *ngFor="let guide of guideItems.getAllItems()"
+<div class="docs-guides-container" role="main">
+  <div class="docs-primary-header">
+    <h1 [attr.aria-alert]="'Guides'">Guides</h1>
+  </div>
+  <md-nav-list class="docs-guide-list">
+    <a md-list-item
       class="docs-guide-item"
+      *ngFor="let guide of guideItems.getAllItems()"
       [routerLink]="['/guide/', guide.id]">
-    {{guide.name}}
-  </a>
-</md-nav-list>
+      {{guide.name}}
+    </a>
+  </md-nav-list>
+</div>
 
 <app-footer></app-footer>
diff --git a/src/app/pages/guide-list/guide-list.scss b/src/app/pages/guide-list/guide-list.scss
@@ -1,4 +1,4 @@
-:host {
+:host, .docs-guides-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
diff --git a/src/app/pages/guide-viewer/guide-viewer.html b/src/app/pages/guide-viewer/guide-viewer.html
@@ -1,5 +1,5 @@
 <div class="docs-primary-header">
-  <h1>{{guide.name}}</h1>
+  <h1 [attr.aria-alert]="guide.name">{{guide.name}}</h1>
 </div>
 
 <doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>
diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/homepage/homepage.html
@@ -10,7 +10,7 @@ <h2> Material Design components for Angular</h2>
   </div>
 </header>
 
-<div class="docs-homepage-promo">
+<div role="main" class="docs-homepage-promo">
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
       <docs-svg-viewer
diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html
@@ -3,6 +3,7 @@
     <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
 
     <button md-icon-button type="button" (click)="toggleSourceView()"
+            aria-label="Toggle View Source"
             [mdTooltip]="'View source'">
       <md-icon>
         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
diff --git a/src/app/shared/focus-element/focus-element.spec.ts b/src/app/shared/focus-element/focus-element.spec.ts
@@ -0,0 +1,44 @@
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {ViewChild, Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {MaterialModule} from '@angular/material';
+
+import {FocusElementDirective} from './focus-element';
+
+
+@Component({
+  selector: 'test-component',
+  template: '<h1 focusElement>Whoa!</h1>'
+})
+class TestComponent {
+}
+
+
+describe('FocusElementDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [FocusElementDirective, TestComponent]
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+  }));
+
+  it('should set the tabindex of the host component to 0', () => {
+    fixture.detectChanges();
+    const tabindex = fixture
+      .nativeElement
+      .querySelector('h1')
+      .getAttribute('tabindex');
+    expect(tabindex).toEqual('0');
+  });
+
+  it('should call focus to the host components nativeElement', () => {
+    const el = fixture.nativeElement.querySelector('h1');
+    spyOn(el, 'focus');
+    fixture.detectChanges();
+    expect(el).not.toBeNull();
+    expect(el.focus).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/shared/focus-element/focus-element.ts b/src/app/shared/focus-element/focus-element.ts
@@ -0,0 +1,26 @@
+import {Renderer, Directive, ElementRef} from '@angular/core';
+
+
+@Directive({
+  selector: '[focusElement]'
+})
+
+export class FocusElementDirective {
+
+  constructor(
+    private _element: ElementRef,
+    private _renderer: Renderer
+  ) { }
+
+  ngAfterViewInit() {
+    // Add tabindex 0 so element is focusable by keyboard
+    this
+      ._renderer
+      .setElementAttribute(this._element.nativeElement, 'tabindex', '0');
+
+    // Focus host element after view loads
+    // so screen readers will be alerted
+    // the page has changed.
+    this._element.nativeElement.focus();
+  }
+}
diff --git a/src/app/shared/plunker/plunker-button.html b/src/app/shared/plunker/plunker-button.html
@@ -1,6 +1,7 @@
 <!-- TODO: change the template to be plunker icon -->
 <div [mdTooltip]="isDisabled ? 'Building Plunker example...' : 'Edit in Plunker'">
   <button md-icon-button type="button"
+        aria-label="Edit in Plunker"
         (click)="openPlunker()"
         [disabled]="isDisabled">
     <md-icon>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-:host {`
	`1`	`+:host, .docs-guides-container {`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-direction: column;`
`4`	`4`	`flex-grow: 1;`