Make accessibility work without toolbar

Author: tinayuangao

src/demo-app/a11y/a11y-module.ts

@@ -0,0 +1,33 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
+import {DemoMaterialModule} from '../demo-material-module';
+import {AccessibilityHome, AccessibilityDemo} from './a11y';
+import {ButtonAccessibilityDemo} from './button/button-a11y';
+import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(ACCESSIBILITY_DEMO_ROUTES)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AccessibilityRoutingModule {}
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AccessibilityRoutingModule,
+    DemoMaterialModule,
+  ],
+  declarations: [
+    AccessibilityDemo,
+    AccessibilityHome,
+    ButtonAccessibilityDemo,
+    CheckboxAccessibilityDemo,
+  ]
+})
+export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.html

@@ -0,0 +1,13 @@
+<h1>Accessibility Demo</h1>
+
+<nav>
+  <ul>
+    <li *ngFor="let navItem of navItems">
+      <a [routerLink]="[navItem.route]">
+        {{navItem.name}}
+      </a>
+    </li>
+  </ul>
+</nav>
+
+<router-outlet></router-outlet>

src/demo-app/a11y/a11y.scss

@@ -0,0 +1,18 @@
+body {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+
+  // Helps fonts on OSX looks more consistent with other systems
+  // Isn't currently in button styles due to performance concerns
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  ul, li {
+    list-style: none;
+  }
+}

src/demo-app/a11y/a11y.ts

@@ -0,0 +1,24 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-home',
+  template: `<p>Welcome to the accessibility demos for Angular Material!</p>
+             <p>Open the sidenav to select a demo.</p>`,
+})
+export class AccessibilityHome {}
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-demo',
+  templateUrl: 'a11y.html',
+  styleUrls: ['a11y.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AccessibilityDemo {
+  navItems = [
+    {name: 'Home', route: '.'},
+    {name: 'Button', route: 'button'},
+    {name: 'Checkbox', route: 'checkbox'},
+  ];
+}

src/demo-app/a11y/button/button-a11y.html

@@ -0,0 +1,30 @@
+<div class="demo-button">
+  <section>
+    <h2></h2>
+    <button md-button>Check</button>
+    <button md-raised-button>raised</button>
+    <button md-fab aria-label="Activate floating action style button">
+      <md-icon class="md-24">check</md-icon>
+    </button>
+    <button md-mini-fab aria-label="Activate mini floating action style button">
+      <md-icon class="md-24">check</md-icon>
+    </button>
+    <button md-icon-button aria-label="Activate icon style button">
+      <md-icon class="md-24">check</md-icon>
+    </button>
+  </section>
+
+  <section>
+    <a href="http://www.google.com" md-button color="primary">Google search</a>
+    <a href="http://www.google.com" md-raised-button>Google search</a>
+    <a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
+      <md-icon class="md-24">check</md-icon>
+    </a>
+    <a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
+      <md-icon class="md-24">check</md-icon>
+    </a>
+    <a md-icon-button aria-label="Activate icon style link">
+      <md-icon class="md-24">check</md-icon>
+    </a>
+  </section>
+</div>

src/demo-app/accessibility/button/button-accessibility.scss renamed to src/demo-app/a11y/button/button-a11y.scss

@@ -3,9 +3,9 @@ import {Component} from '@angular/core';
 
 @Component({
   moduleId: module.id,
-  selector: 'button-accessibility',
-  templateUrl: 'button-accessibility.html',
-  styleUrls: ['button-accessibility.css'],
+  selector: 'button-a11y',
+  templateUrl: 'button-a11y.html',
+  styleUrls: ['button-a11y.css'],
 })
 export class ButtonAccessibilityDemo {
   // TODO(tinayuangao): Add use cases

src/demo-app/accessibility/button/button-accessibility.ts renamed to src/demo-app/a11y/button/button-a11y.ts

@@ -0,0 +1 @@
+Checkbox Placeholder

src/demo-app/a11y/checkbox/checkbox-a11y.html

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'checkbox-a11y',
+  templateUrl: 'checkbox-a11y.html',
+  styleUrls: ['checkbox-a11y.css'],
+})
+export class CheckboxAccessibilityDemo {
+  // TODO(tinayuangao): Add use cases
+}

src/demo-app/a11y/checkbox/checkbox-a11y.scss

@@ -0,0 +1,10 @@
+import {Routes} from '@angular/router';
+import {ButtonAccessibilityDemo} from './button/button-a11y';
+import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
+import {AccessibilityHome} from './a11y';
+
+export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
+  {path: '', component: AccessibilityHome},
+  {path: 'button', component: ButtonAccessibilityDemo},
+  {path: 'checkbox', component: CheckboxAccessibilityDemo},
+];