diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 98fa3a729c9..b3b2ae84f72 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/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 {} diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index 501a1b0b8e8..d07969fa88d 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/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'}, ]; } diff --git a/src/demo-app/a11y/radio/radio-a11y.html b/src/demo-app/a11y/radio/radio-a11y.html new file mode 100644 index 00000000000..7ae213f85fe --- /dev/null +++ b/src/demo-app/a11y/radio/radio-a11y.html @@ -0,0 +1,36 @@ +
+

Radio buttons in group

+ + + {{season}} + + +
+ +
+

Radio buttons with align-end label position

+ + Toast + Biscuit + Bagel + +
+ +
+

Disabled radio buttons

+

+ This section contains three radio buttons for "Yes", "No", and "Maybe". + The "Maybe" radio button is disabled. +

+ Yes + No + Maybe +
+ +
+

Radio buttons with different colors

+ Default (accent) + Primary + Accent + Warn +
diff --git a/src/demo-app/a11y/radio/radio-a11y.scss b/src/demo-app/a11y/radio/radio-a11y.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/demo-app/a11y/radio/radio-a11y.ts b/src/demo-app/a11y/radio/radio-a11y.ts new file mode 100644 index 00000000000..093dfabf3be --- /dev/null +++ b/src/demo-app/a11y/radio/radio-a11y.ts @@ -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', + ]; +} diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index a934103399b..8b8020feb68 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.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}, ];