demo(expansion): add expansion panel accessibility demo page (#6703)

Author: tinayuangao

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

@@ -19,7 +19,7 @@ import {
   DialogNeptuneIFrameDialog,
   DialogWelcomeExampleDialog
 } from './dialog/dialog-a11y';
-
+import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y';
@@ -76,6 +76,7 @@ export class AccessibilityRoutingModule {}
     DialogNeptuneExampleDialog,
     DialogNeptuneIFrameDialog,
     DialogWelcomeExampleDialog,
+    ExpansionPanelAccessibilityDemo,
     GridListAccessibilityDemo,
     IconAccessibilityDemo,
     InputAccessibilityDemo,

src/demo-app/a11y/a11y.ts

@@ -32,6 +32,7 @@ export class AccessibilityDemo {
     {name: 'Chips', route: 'chips'},
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Dialog', route: 'dialog'},
+    {name: 'Expansion panel', route: 'expansion'},
     {name: 'Grid list', route: 'grid-list'},
     {name: 'Icon', route: 'icon'},
     {name: 'Input', route: 'input'},

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

@@ -0,0 +1,53 @@
+<section class="demo-expansion">
+  <h2>Siberian Husky</h2>
+  <p>Single expansion panel</p>
+  <mat-expansion-panel class="mat-expansion-demo-width" #myPanel>
+    <mat-expansion-panel-header>
+      <mat-panel-description>
+        Dog breed
+      </mat-panel-description>
+      <mat-panel-title>Siberian Husky</mat-panel-title>
+    </mat-expansion-panel-header>
+    The Siberian Husky is a medium size working dog breed that originated
+    in north-eastern Siberia, Russia. The breed belongs to the Spitz genetic family.
+    <mat-action-row>
+      <button mat-button (click)="myPanel.expanded = false">Cancel</button>
+      <a mat-button href="https://en.wikipedia.org/wiki/Siberian_Husky" target="_blank">Wikipedia</a>
+    </mat-action-row>
+  </mat-expansion-panel>
+</section>
+
+<section class="demo-expansion">
+  <h2>Dog breeds</h2>
+  <p>Multiple expansion panel</p>
+  <mat-accordion class="mat-expansion-demo-width">
+    <mat-expansion-panel #panel1 >
+      <mat-expansion-panel-header>Golden Retriever</mat-expansion-panel-header>
+      <p>
+        The Golden Retriever is a large-sized breed of dog bred as gun dogs to retrieve shot
+        waterfowl such as ducks and upland game birds during hunting and shooting parties, and
+        were named 'retriever' because of their ability to retrieve shot game undamaged.
+        Golden Retrievers have an instinctive love of water, and are easy to train to basic
+        or advanced obedience standards.
+      </p>
+    </mat-expansion-panel>
+    <mat-expansion-panel #panel2 [disabled]="true">
+      <mat-expansion-panel-header>Beagle</mat-expansion-panel-header>
+      <p>
+        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.
+      </p>
+    </mat-expansion-panel>
+    <mat-expansion-panel #panel3 >
+      <mat-expansion-panel-header>Dachshund</mat-expansion-panel-header>
+      <p>
+        The dachshund is a short-legged, long-bodied, hound-type dog breed. The standard size
+        dachshund was developed to scent, chase, and flush out badgers and other burrow-dwelling
+        animals, while the miniature ...
+      </p>
+      <mat-action-row>
+        <button mat-button (click)="panel3.expanded = false">Close</button>
+      </mat-action-row>
+    </mat-expansion-panel>
+  </mat-accordion>
+</section>

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

@@ -0,0 +1,6 @@
+.demo-expansion {
+  button, a {
+    margin: 8px;
+    text-transform: uppercase;
+  }
+}

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

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'expansion-a11y',
+  templateUrl: 'expansion-a11y.html',
+  styleUrls: ['expansion-a11y.css']
+})
+export class ExpansionPanelAccessibilityDemo {
+}

src/demo-app/a11y/routes.ts

@@ -6,6 +6,7 @@ import {CardAccessibilityDemo} from './card/card-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {DialogAccessibilityDemo} from './dialog/dialog-a11y';
+import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
@@ -34,6 +35,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'dialog', component: DialogAccessibilityDemo},
+  {path: 'expansion', component: ExpansionPanelAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'icon', component: IconAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},