demo(tabs): Add accessibility demo page for tabs (#6610)

* Add accessibility demo page for tabs

* fix lint;

* .

Author: tinayuangao

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

@@ -33,6 +33,12 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 import {SelectAccessibilityDemo} from './select/select-a11y';
+import {
+  TabsAccessibilityDemo,
+  SunnyTabContent,
+  RainyTabContent,
+  FoggyTabContent,
+} from './tabs/tabs-a11y';
 
 
 @NgModule({
@@ -81,6 +87,10 @@ export class AccessibilityRoutingModule {}
     SlideToggleAccessibilityDemo,
     SnackBarAccessibilityDemo,
     SelectAccessibilityDemo,
+    TabsAccessibilityDemo,
+    SunnyTabContent,
+    RainyTabContent,
+    FoggyTabContent,
   ],
   entryComponents: [
     DialogAccessibilityDemo,
@@ -89,6 +99,9 @@ export class AccessibilityRoutingModule {}
     DialogNeptuneExampleDialog,
     DialogNeptuneIFrameDialog,
     DialogWelcomeExampleDialog,
+    SunnyTabContent,
+    RainyTabContent,
+    FoggyTabContent,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -38,6 +38,7 @@ export class AccessibilityDemo {
     {name: 'Slide toggle', route: 'slide-toggle'},
     {name: 'Snack bar', route: 'snack-bar'},
     {name: 'Select', route: 'select'},
+    {name: 'Tabs', route: 'tabs'},
     {name: 'Toolbar', route: 'toolbar'},
   ];
 

src/demo-app/a11y/routes.ts

@@ -20,6 +20,8 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 import {SelectAccessibilityDemo} from './select/select-a11y';
+import {TabsAccessibilityDemo} from './tabs/tabs-a11y';
+import {TABS_DEMO_ROUTES} from './tabs/routes';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -42,5 +44,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'slide-toggle', component: SlideToggleAccessibilityDemo},
   {path: 'snack-bar', component: SnackBarAccessibilityDemo},
   {path: 'select', component: SelectAccessibilityDemo},
+  {path: 'tabs', component: TabsAccessibilityDemo, children: TABS_DEMO_ROUTES},
   {path: 'toolbar', component: ToolbarAccessibilityDemo},
 ];

src/demo-app/a11y/tabs/routes.ts

@@ -0,0 +1,10 @@
+import {Routes} from '@angular/router';
+
+import {SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs-a11y';
+
+export const TABS_DEMO_ROUTES: Routes = [
+  {path: '', redirectTo: 'sunny-tab', pathMatch: 'full'},
+  {path: 'sunny-tab', component: SunnyTabContent},
+  {path: 'rainy-tab', component: RainyTabContent},
+  {path: 'foggy-tab', component: FoggyTabContent},
+];

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

@@ -0,0 +1,63 @@
+<section>
+  <h2>Weather</h2>
+  <p>Switch tabs to navigate</p>
+
+  <nav md-tab-nav-bar aria-label="weather navigation links">
+    <a md-tab-link
+       *ngFor="let tabLink of tabLinks; let i = index"
+       [routerLink]="tabLink.link"
+       routerLinkActive #rla="routerLinkActive"
+       [active]="rla.isActive">
+      {{tabLink.label}}
+    </a>
+  </nav>
+  <router-outlet></router-outlet>
+</section>
+
+<section>
+  <h2>Dog breeds</h2>
+  <p>Dynamic height tabs</p>
+
+  <md-tab-group class="demo-tab-group" dynamicHeight>
+    <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
+      <ng-template md-tab-label>{{tab.label}}</ng-template>
+      <div class="tab-content">
+        {{tab.content}}
+        <br>
+        <br>
+        <div *ngIf="tab.extraContent">
+          The Labrador Retriever, also Labrador, is a type of retriever-gun dog. The Labrador is
+          one of the most popular breeds of dog in the United Kingdom and the United States.
+          <br>
+          <br>
+          A favourite disability assistance breed in many countries, Labradors are frequently 
+          trained to aid the blind, those who have autism, to act as a therapy dog and perform
+          screening and detection work for law enforcement and other official agencies. They are
+          prized as sporting and hunting dogs.
+          <br>
+          <br>
+          A few kennels breeding their ancestors, the St. John's water dog, were in England. 
+          At the same time, a combination of the sheep protection policy in Newfoundland and rabies
+          quarantine in the United Kingdom, led to the gradual demise of the St. John's water dog 
+          in Canada.
+          <br>
+          <br>
+          In the 1830s, the 10th Earl of Home and his nephews the 5th Duke of Buccleuch and Lord 
+          John Scott, had imported progenitors of the breed from Newfoundland to Europe for 
+          use as gundogs. Another early advocate of these Newfoundland dogs, or Labrador Retrievers 
+          as they later became known, was the 2nd Earl of Malmesbury who bred them for their 
+          expertise in waterfowling.
+
+          During the 1880s, the 3rd Earl of Malmesbury, the 6th Duke of Buccleuch and the 12th Earl 
+          of Home collaborated to develop and establish the modern Labrador breed. The dogs 
+          Buccleuch Avon and Buccleuch Ned, given by Malmesbury to Buccleuch, were mated with 
+          bitches carrying blood from those originally imported by the 5th Duke and the 10th Earl 
+          of Home. The offspring are considered to be the ancestors of modern Labradors.
+          <br>
+          <br>
+        </div>
+      </div>
+    </md-tab>
+  </md-tab-group>
+</section>
+

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

@@ -0,0 +1,65 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'tabs-a11y',
+  templateUrl: 'tabs-a11y.html',
+  styleUrls: ['tabs-a11y.css'],
+})
+export class TabsAccessibilityDemo {
+  // Nav bar demo
+  tabLinks = [
+    {label: 'Sun', link: 'sunny-tab'},
+    {label: 'Rain', link: 'rainy-tab'},
+    {label: 'Fog', link: 'foggy-tab'},
+  ];
+
+  // Standard tabs demo
+  tabs = [
+    {
+      label: 'German Shepherd',
+      content: `The German Shepherd is a breed of medium to large-sized working dog that originated
+          in Germany. The breed's officially recognized name is German Shepherd Dog in the
+          English language. The breed is also known as the Alsatian in Britain and Ireland.`
+    }, {
+      label: 'Labrador Retriever',
+      extraContent: true,
+      content: `The Labrador Retriever, also Labrador, is a type of retriever-gun dog. The Labrador
+          is one of the most popular breeds of dog in the United Kingdom and the United States.`
+    }, {
+      label: 'Rottweiler',
+      disabled: true,
+      content: `The Rottweiler is a breed of domestic dog, regarded as medium-to-large or large.
+          The dogs were known in German as Rottweiler Metzgerhund, meaning Rottweil butchers' dogs,
+          because their main use was to ...`
+    }, {
+      label: 'Beagle',
+      content: `The Beagle is a breed of small hound, similar in appearance to the much larger
+          foxhound. The beagle is a scent hound, developed primarily for hunting hare.`
+    },
+  ];
+}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'sunny-routed-content',
+  template: 'Having a lot of light from the sun.',
+})
+export class SunnyTabContent {}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'rainy-routed-content',
+  template: 'A rainy period of time is one when it rains a lot',
+})
+export class RainyTabContent {}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'foggy-routed-content',
+  template: 'If the weather is foggy, there is fog',
+})
+export class FoggyTabContent {}