Add accessibility page to demo-app (#5748)

* Add accessibility page * fix lint
2026-09-14 13:54:52 +08:00 · 2017-07-27 09:45:55 -07:00
parent 641a38f98c
commit 8edbe47e37
20 changed files with 499 additions and 258 deletions
@@ -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 {}
@@ -0,0 +1,9 @@
+<h1>Accessibility Demo</h1>
+
+<nav>
+  <a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]">
+    {{navItem.name}}
+  </a>
+</nav>
+
+<router-outlet></router-outlet>
@@ -0,0 +1,22 @@
+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;
+  }
+
+  nav a {
+    margin: 2px;
+  }
+}
@@ -0,0 +1,23 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-home',
+  template: `<p>Welcome to the accessibility demos for Angular Material!</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'},
+  ];
+}
@@ -0,0 +1,31 @@
+<div class="demo-button">
+  <section>
+    <h2>Button elements</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>
+    <h2>Anchor elements</h2>
+    <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>
@@ -0,0 +1,18 @@
+
+.demo-button {
+  button, a {
+    margin: 8px;
+    text-transform: uppercase;
+  }
+
+  section {
+    display: flex;
+    align-items: center;
+    margin: 8px;
+  }
+
+  p {
+    padding: 5px 15px;
+  }
+}
+
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'button-a11y',
+  templateUrl: 'button-a11y.html',
+  styleUrls: ['button-a11y.css'],
+})
+export class ButtonAccessibilityDemo {
+  // TODO(tinayuangao): Add use cases
+}
@@ -0,0 +1 @@
+Checkbox Placeholder
@@ -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
+}
@@ -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},
+];
@@ -1,208 +1,35 @@
 import {ApplicationRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {HttpModule} from '@angular/http';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {DemoApp, DemoAppOnPush, Home} from './demo-app/demo-app';
-import {DEMO_APP_ROUTES} from './demo-app/routes';
-import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
-import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo';
-import {RippleDemo} from './ripple/ripple-demo';
-import {IconDemo} from './icon/icon-demo';
-import {GesturesDemo} from './gestures/gestures-demo';
-import {CardDemo} from './card/card-demo';
-import {ChipsDemo} from './chips/chips-demo';
-import {RadioDemo} from './radio/radio-demo';
-import {ButtonToggleDemo} from './button-toggle/button-toggle-demo';
-import {ProgressSpinnerDemo} from './progress-spinner/progress-spinner-demo';
-import {TooltipDemo} from './tooltip/tooltip-demo';
-import {ListDemo} from './list/list-demo';
-import {BaselineDemo} from './baseline/baseline-demo';
-import {GridListDemo} from './grid-list/grid-list-demo';
-import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
-import {OverlayDemo, RotiniPanel, SpagettiPanel} from './overlay/overlay-demo';
-import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
-import {ToolbarDemo} from './toolbar/toolbar-demo';
-import {ButtonDemo} from './button/button-demo';
-import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from './checkbox/checkbox-demo';
-import {SelectDemo} from './select/select-demo';
-import {SliderDemo} from './slider/slider-demo';
-import {SidenavDemo} from './sidenav/sidenav-demo';
-import {SnackBarDemo} from './snack-bar/snack-bar-demo';
-import {PortalDemo, ScienceJoke} from './portal/portal-demo';
-import {MenuDemo} from './menu/menu-demo';
-import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from './tabs/tabs-demo';
-import {PlatformDemo} from './platform/platform-demo';
-import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
-import {InputDemo} from './input/input-demo';
-import {StyleDemo} from './style/style-demo';
-import {TableDemo} from './table/table-demo';
-import {PeopleDatabase} from './table/people-database';
-import {DatepickerDemo} from './datepicker/datepicker-demo';
-import {TypographyDemo} from './typography/typography-demo';
-import {ExpansionDemo} from './expansion/expansion-demo';
-import {
-  FullscreenOverlayContainer,
-  MdAutocompleteModule,
-  MdButtonModule,
-  MdButtonToggleModule,
-  MdCardModule,
-  MdCheckboxModule,
-  MdChipsModule,
-  MdCoreModule,
-  MdTableModule,
-  MdDatepickerModule,
-  MdDialogModule,
-  MdExpansionModule,
-  MdGridListModule,
-  MdIconModule,
-  MdInputModule,
-  MdListModule,
-  MdMenuModule,
-  MdNativeDateModule,
-  MdPaginatorModule,
-  MdProgressBarModule,
-  MdProgressSpinnerModule,
-  MdRadioModule,
-  MdRippleModule,
-  MdSelectModule,
-  MdSidenavModule,
-  MdSliderModule,
-  MdSlideToggleModule,
-  MdSnackBarModule,
-  MdSortModule,
-  MdTabsModule,
-  MdToolbarModule,
-  MdTooltipModule,
-  OverlayContainer,
-  StyleModule
-} from '@angular/material';
-import {CdkTableModule} from '@angular/cdk/table';
-import {TableHeaderDemo} from './table/table-header-demo';
-
-/**
- * NgModule that includes all Material modules that are required to serve the demo-app.
- */
-@NgModule({
-  exports: [
-    MdAutocompleteModule,
-    MdButtonModule,
-    MdButtonToggleModule,
-    MdCardModule,
-    MdCheckboxModule,
-    MdChipsModule,
-    MdTableModule,
-    MdDatepickerModule,
-    MdDialogModule,
-    MdExpansionModule,
-    MdGridListModule,
-    MdIconModule,
-    MdInputModule,
-    MdListModule,
-    MdMenuModule,
-    MdCoreModule,
-    MdPaginatorModule,
-    MdProgressBarModule,
-    MdProgressSpinnerModule,
-    MdRadioModule,
-    MdRippleModule,
-    MdSelectModule,
-    MdSidenavModule,
-    MdSlideToggleModule,
-    MdSliderModule,
-    MdSnackBarModule,
-    MdSortModule,
-    MdTabsModule,
-    MdToolbarModule,
-    MdTooltipModule,
-    MdNativeDateModule,
-    CdkTableModule,
-    StyleModule
-  ]
-})
-export class DemoMaterialModule {}
+import {ALL_ROUTES} from './demo-app/routes';
+import {EntryApp} from './demo-app/demo-app';
+import {DemoModule} from './demo-app/demo-module';
+import {AccessibilityDemoModule} from './a11y/a11y-module';


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
-    FormsModule,
    HttpModule,
-    ReactiveFormsModule,
-    RouterModule.forRoot(DEMO_APP_ROUTES),
-    DemoMaterialModule,
+    DemoModule,
+    AccessibilityDemoModule,
+    RouterModule.forRoot(ALL_ROUTES),
  ],
  declarations: [
-    AutocompleteDemo,
-    BaselineDemo,
-    ButtonDemo,
-    ButtonToggleDemo,
-    CardDemo,
-    ChipsDemo,
-    CheckboxDemo,
-    DatepickerDemo,
-    DemoApp,
-    DemoAppOnPush,
-    DialogDemo,
-    GesturesDemo,
-    GridListDemo,
-    Home,
-    IconDemo,
-    InputDemo,
-    JazzDialog,
-    ContentElementDialog,
-    IFrameDialog,
-    ListDemo,
-    LiveAnnouncerDemo,
-    MdCheckboxDemoNestedChecklist,
-    MenuDemo,
-    SnackBarDemo,
-    OverlayDemo,
-    PortalDemo,
-    ProgressBarDemo,
-    ProgressSpinnerDemo,
-    RadioDemo,
-    RippleDemo,
-    RotiniPanel,
-    ScienceJoke,
-    SelectDemo,
-    SidenavDemo,
-    SliderDemo,
-    SlideToggleDemo,
-    SpagettiPanel,
-    StyleDemo,
-    TableHeaderDemo,
-    ToolbarDemo,
-    TooltipDemo,
-    TableDemo,
-    TabsDemo,
-    SunnyTabContent,
-    RainyTabContent,
-    FoggyTabContent,
-    PlatformDemo,
-    TypographyDemo,
-    ExpansionDemo,
-  ],
-  providers: [
-    {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
-    PeopleDatabase
+    EntryApp,
  ],
  entryComponents: [
-    DemoApp,
-    JazzDialog,
-    ContentElementDialog,
-    IFrameDialog,
-    RotiniPanel,
-    ScienceJoke,
-    SpagettiPanel,
+    EntryApp,
  ],
 })
 export class DemoAppModule {
  constructor(private _appRef: ApplicationRef) { }

  ngDoBootstrap() {
-    this._appRef.bootstrap(DemoApp);
+    this._appRef.bootstrap(EntryApp);
  }
 }
+
@@ -12,7 +12,7 @@

      <a md-list-item
         (click)="start.close()"
-         [routerLink]="['baseline']">
+         [routerLink]="['/baseline']">
        Baseline
      </a>
    </md-nav-list>
@@ -2,6 +2,23 @@ import {Component, ViewEncapsulation, ElementRef, ChangeDetectionStrategy} from

 const changeDetectionKey = 'mdDemoChangeDetection';

+/**
+ * The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
+ * while other demos will use `DemoApp` component. Since DemoApp and AccessibilityDemo use
+ * different templates (DemoApp has toolbar and sidenav), we use this EntryApp in index.html
+ * as our entry point.
+ */
+@Component({
+  moduleId: module.id,
+  selector: 'entry-app',
+  template: '<router-outlet></router-outlet>',
+  encapsulation: ViewEncapsulation.None,
+})
+export class EntryApp {}
+
+/**
+ * Home component for welcome message in DemoApp.
+ */
@Component({
  selector: 'home',
  template: `
@@ -20,6 +37,9 @@ export class Home {}
 })
 export class DemoAppOnPush {}

+/**
+ * DemoApp with toolbar and sidenav.
+ */
@Component({
  moduleId: module.id,
  selector: 'demo-app',
@@ -34,40 +54,40 @@ export class DemoApp {
  dark = false;
  changeDetectionStrategy: string;
  navItems = [
-    {name: 'Autocomplete', route: 'autocomplete'},
-    {name: 'Button', route: 'button'},
-    {name: 'Button Toggle', route: 'button-toggle'},
-    {name: 'Card', route: 'card'},
-    {name: 'Chips', route: 'chips'},
-    {name: 'Checkbox', route: 'checkbox'},
-    {name: 'Datepicker', route: 'datepicker'},
-    {name: 'Dialog', route: 'dialog'},
-    {name: 'Expansion Panel', route: 'expansion'},
-    {name: 'Gestures', route: 'gestures'},
-    {name: 'Grid List', route: 'grid-list'},
-    {name: 'Icon', route: 'icon'},
-    {name: 'Input', route: 'input'},
-    {name: 'List', route: 'list'},
-    {name: 'Menu', route: 'menu'},
-    {name: 'Live Announcer', route: 'live-announcer'},
-    {name: 'Overlay', route: 'overlay'},
-    {name: 'Portal', route: 'portal'},
-    {name: 'Progress Bar', route: 'progress-bar'},
-    {name: 'Progress Spinner', route: 'progress-spinner'},
-    {name: 'Radio', route: 'radio'},
-    {name: 'Ripple', route: 'ripple'},
-    {name: 'Select', route: 'select'},
-    {name: 'Sidenav', route: 'sidenav'},
-    {name: 'Slider', route: 'slider'},
-    {name: 'Slide Toggle', route: 'slide-toggle'},
-    {name: 'Snack Bar', route: 'snack-bar'},
-    {name: 'Table', route: 'table'},
-    {name: 'Tabs', route: 'tabs'},
-    {name: 'Toolbar', route: 'toolbar'},
-    {name: 'Tooltip', route: 'tooltip'},
-    {name: 'Platform', route: 'platform'},
-    {name: 'Style', route: 'style'},
-    {name: 'Typography', route: 'typography'}
+    {name: 'Autocomplete', route: '/autocomplete'},
+    {name: 'Button', route: '/button'},
+    {name: 'Button Toggle', route: '/button-toggle'},
+    {name: 'Card', route: '/card'},
+    {name: 'Chips', route: '/chips'},
+    {name: 'Checkbox', route: '/checkbox'},
+    {name: 'Datepicker', route: '/datepicker'},
+    {name: 'Dialog', route: '/dialog'},
+    {name: 'Expansion Panel', route: '/expansion'},
+    {name: 'Gestures', route: '/gestures'},
+    {name: 'Grid List', route: '/grid-list'},
+    {name: 'Icon', route: '/icon'},
+    {name: 'Input', route: '/input'},
+    {name: 'List', route: '/list'},
+    {name: 'Menu', route: '/menu'},
+    {name: 'Live Announcer', route: '/live-announcer'},
+    {name: 'Overlay', route: '/overlay'},
+    {name: 'Portal', route: '/portal'},
+    {name: 'Progress Bar', route: '/progress-bar'},
+    {name: 'Progress Spinner', route: '/progress-spinner'},
+    {name: 'Radio', route: '/radio'},
+    {name: 'Ripple', route: '/ripple'},
+    {name: 'Select', route: '/select'},
+    {name: 'Sidenav', route: '/sidenav'},
+    {name: 'Slider', route: '/slider'},
+    {name: 'Slide Toggle', route: '/slide-toggle'},
+    {name: 'Snack Bar', route: '/snack-bar'},
+    {name: 'Table', route: '/table'},
+    {name: 'Tabs', route: '/tabs'},
+    {name: 'Toolbar', route: '/toolbar'},
+    {name: 'Tooltip', route: '/tooltip'},
+    {name: 'Platform', route: '/platform'},
+    {name: 'Style', route: '/style'},
+    {name: 'Typography', route: '/typography'}
  ];

  constructor(private _element: ElementRef) {
@@ -0,0 +1,123 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {DemoApp, DemoAppOnPush, Home} from './demo-app';
+import {DEMO_APP_ROUTES} from './routes';
+import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
+import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
+import {RippleDemo} from '../ripple/ripple-demo';
+import {IconDemo} from '../icon/icon-demo';
+import {GesturesDemo} from '../gestures/gestures-demo';
+import {CardDemo} from '../card/card-demo';
+import {ChipsDemo} from '../chips/chips-demo';
+import {RadioDemo} from '../radio/radio-demo';
+import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
+import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
+import {TooltipDemo} from '../tooltip/tooltip-demo';
+import {ListDemo} from '../list/list-demo';
+import {BaselineDemo} from '../baseline/baseline-demo';
+import {GridListDemo} from '../grid-list/grid-list-demo';
+import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
+import {OverlayDemo, RotiniPanel, SpagettiPanel} from '../overlay/overlay-demo';
+import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
+import {ToolbarDemo} from '../toolbar/toolbar-demo';
+import {ButtonDemo} from '../button/button-demo';
+import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
+import {SelectDemo} from '../select/select-demo';
+import {SliderDemo} from '../slider/slider-demo';
+import {SidenavDemo} from '../sidenav/sidenav-demo';
+import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
+import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
+import {MenuDemo} from '../menu/menu-demo';
+import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
+import {PlatformDemo} from '../platform/platform-demo';
+import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
+import {InputDemo} from '../input/input-demo';
+import {StyleDemo} from '../style/style-demo';
+import {TableDemo} from '../table/table-demo';
+import {PeopleDatabase} from '../table/people-database';
+import {DatepickerDemo} from '../datepicker/datepicker-demo';
+import {TypographyDemo} from '../typography/typography-demo';
+import {ExpansionDemo} from '../expansion/expansion-demo';
+import {DemoMaterialModule} from '../demo-material-module';
+import {
+  FullscreenOverlayContainer,
+  OverlayContainer,
+} from '@angular/material';
+import {TableHeaderDemo} from '../table/table-header-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule.forChild(DEMO_APP_ROUTES),
+    DemoMaterialModule,
+  ],
+  declarations: [
+    AutocompleteDemo,
+    BaselineDemo,
+    ButtonDemo,
+    ButtonToggleDemo,
+    CardDemo,
+    ChipsDemo,
+    CheckboxDemo,
+    DatepickerDemo,
+    DemoApp,
+    DemoAppOnPush,
+    DialogDemo,
+    GesturesDemo,
+    GridListDemo,
+    Home,
+    IconDemo,
+    InputDemo,
+    JazzDialog,
+    ContentElementDialog,
+    IFrameDialog,
+    ListDemo,
+    LiveAnnouncerDemo,
+    MdCheckboxDemoNestedChecklist,
+    MenuDemo,
+    SnackBarDemo,
+    OverlayDemo,
+    PortalDemo,
+    ProgressBarDemo,
+    ProgressSpinnerDemo,
+    RadioDemo,
+    RippleDemo,
+    RotiniPanel,
+    ScienceJoke,
+    SelectDemo,
+    SidenavDemo,
+    SliderDemo,
+    SlideToggleDemo,
+    SpagettiPanel,
+    StyleDemo,
+    TableHeaderDemo,
+    ToolbarDemo,
+    TooltipDemo,
+    TableDemo,
+    TabsDemo,
+    SunnyTabContent,
+    RainyTabContent,
+    FoggyTabContent,
+    PlatformDemo,
+    TypographyDemo,
+    ExpansionDemo,
+  ],
+  providers: [
+    {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
+    PeopleDatabase
+  ],
+  entryComponents: [
+    DemoApp,
+    JazzDialog,
+    ContentElementDialog,
+    IFrameDialog,
+    RotiniPanel,
+    ScienceJoke,
+    SpagettiPanel,
+  ],
+})
+export class DemoModule {}
@@ -36,42 +36,52 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {TableDemo} from '../table/table-demo';
 import {TypographyDemo} from '../typography/typography-demo';
 import {ExpansionDemo} from '../expansion/expansion-demo';
+import {DemoApp} from './demo-app';
+import {AccessibilityDemo} from '../a11y/a11y';
+import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';

 export const DEMO_APP_ROUTES: Routes = [
-  {path: '', component: Home},
-  {path: 'autocomplete', component: AutocompleteDemo},
-  {path: 'button', component: ButtonDemo},
-  {path: 'card', component: CardDemo},
-  {path: 'chips', component: ChipsDemo},
-  {path: 'table', component: TableDemo},
-  {path: 'datepicker', component: DatepickerDemo},
-  {path: 'radio', component: RadioDemo},
-  {path: 'select', component: SelectDemo},
-  {path: 'sidenav', component: SidenavDemo},
-  {path: 'slide-toggle', component: SlideToggleDemo},
-  {path: 'slider', component: SliderDemo},
-  {path: 'progress-spinner', component: ProgressSpinnerDemo},
-  {path: 'progress-bar', component: ProgressBarDemo},
-  {path: 'portal', component: PortalDemo},
-  {path: 'overlay', component: OverlayDemo},
-  {path: 'checkbox', component: CheckboxDemo},
-  {path: 'input', component: InputDemo},
-  {path: 'toolbar', component: ToolbarDemo},
-  {path: 'icon', component: IconDemo},
-  {path: 'list', component: ListDemo},
-  {path: 'menu', component: MenuDemo},
-  {path: 'live-announcer', component: LiveAnnouncerDemo},
-  {path: 'gestures', component: GesturesDemo},
-  {path: 'grid-list', component: GridListDemo},
-  {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
-  {path: 'button-toggle', component: ButtonToggleDemo},
-  {path: 'baseline', component: BaselineDemo},
-  {path: 'ripple', component: RippleDemo},
-  {path: 'dialog', component: DialogDemo},
-  {path: 'tooltip', component: TooltipDemo},
-  {path: 'snack-bar', component: SnackBarDemo},
-  {path: 'platform', component: PlatformDemo},
-  {path: 'style', component: StyleDemo},
-  {path: 'typography', component: TypographyDemo},
-  {path: 'expansion', component: ExpansionDemo},
+  {path: '', component: DemoApp, children: [
+    {path: '', component: Home},
+    {path: 'autocomplete', component: AutocompleteDemo},
+    {path: 'button', component: ButtonDemo},
+    {path: 'card', component: CardDemo},
+    {path: 'chips', component: ChipsDemo},
+    {path: 'table', component: TableDemo},
+    {path: 'datepicker', component: DatepickerDemo},
+    {path: 'radio', component: RadioDemo},
+    {path: 'select', component: SelectDemo},
+    {path: 'sidenav', component: SidenavDemo},
+    {path: 'slide-toggle', component: SlideToggleDemo},
+    {path: 'slider', component: SliderDemo},
+    {path: 'progress-spinner', component: ProgressSpinnerDemo},
+    {path: 'progress-bar', component: ProgressBarDemo},
+    {path: 'portal', component: PortalDemo},
+    {path: 'overlay', component: OverlayDemo},
+    {path: 'checkbox', component: CheckboxDemo},
+    {path: 'input', component: InputDemo},
+    {path: 'toolbar', component: ToolbarDemo},
+    {path: 'icon', component: IconDemo},
+    {path: 'list', component: ListDemo},
+    {path: 'menu', component: MenuDemo},
+    {path: 'live-announcer', component: LiveAnnouncerDemo},
+    {path: 'gestures', component: GesturesDemo},
+    {path: 'grid-list', component: GridListDemo},
+    {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
+    {path: 'button-toggle', component: ButtonToggleDemo},
+    {path: 'baseline', component: BaselineDemo},
+    {path: 'ripple', component: RippleDemo},
+    {path: 'dialog', component: DialogDemo},
+    {path: 'tooltip', component: TooltipDemo},
+    {path: 'snack-bar', component: SnackBarDemo},
+    {path: 'platform', component: PlatformDemo},
+    {path: 'style', component: StyleDemo},
+    {path: 'typography', component: TypographyDemo},
+    {path: 'expansion', component: ExpansionDemo},
+  ]}
+];
+
+export const ALL_ROUTES: Routes = [
+  {path: '',  component: DemoApp, children: DEMO_APP_ROUTES},
+  {path: 'accessibility', component: AccessibilityDemo, children: ACCESSIBILITY_DEMO_ROUTES},
 ];
@@ -0,0 +1,78 @@
+import {NgModule} from '@angular/core';
+import {
+  MdAutocompleteModule,
+  MdButtonModule,
+  MdButtonToggleModule,
+  MdCardModule,
+  MdCheckboxModule,
+  MdChipsModule,
+  MdCoreModule,
+  MdTableModule,
+  MdDatepickerModule,
+  MdDialogModule,
+  MdExpansionModule,
+  MdGridListModule,
+  MdIconModule,
+  MdInputModule,
+  MdListModule,
+  MdMenuModule,
+  MdNativeDateModule,
+  MdPaginatorModule,
+  MdProgressBarModule,
+  MdProgressSpinnerModule,
+  MdRadioModule,
+  MdRippleModule,
+  MdSelectModule,
+  MdSidenavModule,
+  MdSliderModule,
+  MdSlideToggleModule,
+  MdSnackBarModule,
+  MdSortModule,
+  MdTabsModule,
+  MdToolbarModule,
+  MdTooltipModule,
+  StyleModule
+} from '@angular/material';
+import {CdkTableModule} from '@angular/cdk/table';
+
+/**
+ * NgModule that includes all Material modules that are required to serve the demo-app.
+ */
+@NgModule({
+  exports: [
+    MdAutocompleteModule,
+    MdButtonModule,
+    MdButtonToggleModule,
+    MdCardModule,
+    MdCheckboxModule,
+    MdChipsModule,
+    MdTableModule,
+    MdDatepickerModule,
+    MdDialogModule,
+    MdExpansionModule,
+    MdGridListModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdMenuModule,
+    MdCoreModule,
+    MdPaginatorModule,
+    MdProgressBarModule,
+    MdProgressSpinnerModule,
+    MdRadioModule,
+    MdRippleModule,
+    MdSelectModule,
+    MdSidenavModule,
+    MdSlideToggleModule,
+    MdSliderModule,
+    MdSnackBarModule,
+    MdSortModule,
+    MdTabsModule,
+    MdToolbarModule,
+    MdTooltipModule,
+    MdNativeDateModule,
+    CdkTableModule,
+    StyleModule
+  ]
+})
+export class DemoMaterialModule {}
@@ -15,7 +15,7 @@
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
 <body>
-  <demo-app>Loading...</demo-app>
+  <entry-app>Loading...</entry-app>

  <script src="node_modules/core-js/client/core.js"></script>
  <script src="node_modules/web-animations-js/web-animations.min.js"></script>
@@ -7,7 +7,13 @@
 */

 import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
-import {CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef} from '@angular/cdk/table';
+import {
+  CdkCell,
+  CdkCellDef,
+  CdkColumnDef,
+  CdkHeaderCell,
+  CdkHeaderCellDef
+} from '@angular/cdk/table';

 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _MdCellDef = CdkCellDef;
@@ -7,7 +7,13 @@
 */

 import {ChangeDetectionStrategy, Component, Directive} from '@angular/core';
-import {CdkHeaderRow, CdkRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkHeaderRowDef} from '@angular/cdk/table';
+import {
+  CdkHeaderRow,
+  CdkRow,
+  CDK_ROW_TEMPLATE,
+  CdkRowDef,
+  CdkHeaderRowDef
+} from '@angular/cdk/table';

 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _MdHeaderRowDef = CdkHeaderRowDef;