a11y(radio): Add radio buttons accessibility demo page (#5958)

* Add page for radio

* address comments

* add description

Author: tinayuangao

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

@@ -1,11 +1,13 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 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';
+import {RadioAccessibilityDemo} from './radio/radio-a11y';
 
 @NgModule({
   imports: [
@@ -20,6 +22,8 @@ export class AccessibilityRoutingModule {}
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
     AccessibilityRoutingModule,
     DemoMaterialModule,
   ],
@@ -28,6 +32,7 @@ export class AccessibilityRoutingModule {}
     AccessibilityHome,
     ButtonAccessibilityDemo,
     CheckboxAccessibilityDemo,
+    RadioAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -19,5 +19,6 @@ export class AccessibilityDemo {
     {name: 'Home', route: '.'},
     {name: 'Button', route: 'button'},
     {name: 'Checkbox', route: 'checkbox'},
+    {name: 'Radio buttons', route: 'radio'},
   ];
 }

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

@@ -0,0 +1,36 @@
+<section>
+  <h2>Radio buttons in group</h2>
+  <md-radio-group name="seasons" [(ngModel)]="favoriteSeason" aria-label="Seasons">
+    <md-radio-button *ngFor="let season of seasonOptions" [value]="season">
+      {{season}}
+    </md-radio-button>
+  </md-radio-group>
+</section>
+
+<section>
+  <h2>Radio buttons with align-end label position</h2>
+  <md-radio-group name="bread" align="end" aria-label="Breads">
+    <md-radio-button value="toast">Toast</md-radio-button>
+    <md-radio-button value="biscuit">Biscuit</md-radio-button>
+    <md-radio-button value="bagel">Bagel</md-radio-button>
+  </md-radio-group>
+</section>
+
+<section>
+  <h2>Disabled radio buttons</h2>
+  <p>
+    This section contains three radio buttons for "Yes", "No", and "Maybe".
+    The "Maybe" radio button is disabled.
+  </p>
+  <md-radio-button name="disable">Yes</md-radio-button>
+  <md-radio-button name="disable">No</md-radio-button>
+  <md-radio-button name="disable" [disabled]="true">Maybe</md-radio-button>
+</section>
+
+<section>
+  <h2>Radio buttons with different colors</h2>
+  <md-radio-button name="color">Default (accent)</md-radio-button>
+  <md-radio-button name="color" color="primary">Primary</md-radio-button>
+  <md-radio-button name="color" color="accent">Accent</md-radio-button>
+  <md-radio-button name="color" color="warn">Warn</md-radio-button>
+</section>

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

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'radio-a11y',
+  templateUrl: 'radio-a11y.html',
+  styleUrls: ['radio-a11y.css'],
+})
+export class RadioAccessibilityDemo {
+  favoriteSeason: string = 'Autumn';
+  seasonOptions = [
+    'Winter',
+    'Spring',
+    'Summer',
+    'Autumn',
+  ];
+}

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

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