diff --git a/demos/src/app/app-routing.module.ts b/demos/src/app/app-routing.module.ts index f957ce578..3482d0b27 100644 --- a/demos/src/app/app-routing.module.ts +++ b/demos/src/app/app-routing.module.ts @@ -60,7 +60,7 @@ const routes: Routes = [ path: 'menu-surface-demo', loadChildren: () => import('./components/menu-surface-demo/menu-surface.module').then(m => m.MenuSurfaceModule) }, - {path: 'radio-demo', loadChildren: () => import('./components/radio-demo/radio.module').then(m => m.RadioModule)}, + {path: 'radio-demo', loadChildren: () => import('./components/radio/module').then(m => m.RadioModule)}, {path: 'ripple-demo', loadChildren: () => import('./components/ripple-demo/ripple.module').then(m => m.RippleModule)}, {path: 'select-demo', loadChildren: () => import('./components/select/module').then(m => m.SelectModule)}, {path: 'shape-docs', loadChildren: () => import('./components/shape-docs/shape.module').then(m => m.ShapeModule)}, diff --git a/demos/src/app/components/radio-demo/routing.module.ts b/demos/src/app/components/radio-demo/routing.module.ts deleted file mode 100644 index 9d80fafeb..000000000 --- a/demos/src/app/components/radio-demo/routing.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { Api, Examples, Sass, RadioDemo } from './radio-demo'; - -export const ROUTE_DECLARATIONS = [ - Api, - Examples, - Sass, - RadioDemo -]; - -const ROUTES: Routes = [ - { - path: '', component: RadioDemo, - children: [ - { path: '', redirectTo: 'api' }, - { path: 'api', component: Api }, - { path: 'sass', component: Sass }, - { path: 'examples', component: Examples } - ] - } -]; - -@NgModule({ - imports: [RouterModule.forChild(ROUTES)], - exports: [RouterModule] -}) -export class RoutingModule { } diff --git a/demos/src/app/components/radio-demo/sass.html b/demos/src/app/components/radio-demo/sass.html deleted file mode 100644 index b2957e34d..000000000 --- a/demos/src/app/components/radio-demo/sass.html +++ /dev/null @@ -1,30 +0,0 @@ -
-

Sass Mixins

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MixinDescription
unchecked-stroke-color($color)Sets the stroke color of an unchecked radio button
checked-stroke-color($color)Sets the stroke color of a checked radio button
ink-color($color)Sets the ink color of a radio button
focus-indicator-color($color)Sets the color of the focus indicator
-
\ No newline at end of file diff --git a/demos/src/app/components/radio-demo/api.html b/demos/src/app/components/radio/api.html similarity index 84% rename from demos/src/app/components/radio-demo/api.html rename to demos/src/app/components/radio/api.html index fb5dcc750..89669efd4 100644 --- a/demos/src/app/components/radio-demo/api.html +++ b/demos/src/app/components/radio/api.html @@ -29,11 +29,13 @@

Properties

ariaLabel: string - Used to set the 'aria-label' attribute on the underlying input element. + Used to set the 'aria-label' attribute on the underlying input + element. ariaLabelledby: string - The 'aria-labelledby' attribute takes precedence as the element's text alternative. + The 'aria-labelledby' attribute takes precedence as the element's + text alternative. checked: boolean @@ -47,6 +49,10 @@

Properties

required: boolean Whether the radio button is required. + + touch: boolean + Set the component touch target to 48 x 48 px. + @@ -65,7 +71,8 @@

Events

change(source: MdcRadio, value: any) - Event emitted when the group value changes. Change events are only emitted when the value changes due to + Event emitted when the group value changes. Change events are only + emitted when the value changes due to user interaction with a radio button. @@ -103,14 +110,18 @@

Properties

selected: MdcRadio | null - The currently selected radio button. If set to a new radio button, the radio group value will be updated to + The currently selected radio button. If set to a new radio button, + the radio group value will be updated to match the new selected button. value: any - Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding - radio button with a matching value. If there is not such a corresponding radio button, this value persists to - be applied in case a new radio button is added with a matching value. + Value for the radio-group. Should equal the value of the selected + radio button if there is a corresponding + radio button with a matching value. If there is not such a + corresponding radio button, this value persists to + be applied in case a new radio button is added with a matching value. + @@ -120,7 +131,8 @@

Events

change(source: MdcRadio, value: any) - Event emitted when the group value changes. Change events are only emitted when the value changes due to + Event emitted when the group value changes. Change events are only + emitted when the value changes due to user interaction with a radio button. diff --git a/demos/src/app/components/radio-demo/examples.html b/demos/src/app/components/radio/examples.html similarity index 60% rename from demos/src/app/components/radio-demo/examples.html rename to demos/src/app/components/radio/examples.html index 727b1940e..dbd841b75 100644 --- a/demos/src/app/components/radio-demo/examples.html +++ b/demos/src/app/components/radio/examples.html @@ -17,11 +17,14 @@
- - - +
@@ -33,7 +36,8 @@

Radio Group

-
@@ -49,7 +53,8 @@

Radio Group

Radio Group - Reactive forms

-
@@ -62,4 +67,25 @@

Radio Group - Reactive forms

Your favorite season is: {{form.controls['season'].value}}

+
+ +
+

Accessibility

+

+ Material Design spec advises that touch targets should be at least 48 x 48 + px. To meet this requirement, add the `touch` property. +

+

+ Note that the outer mdc-touch-target-wrapper element is only necessary if + you want to avoid potentially overlapping touch targets on adjacent elements + (due to collapsing margins).

+
+
+ + + + +
+
+
\ No newline at end of file diff --git a/demos/src/app/components/radio-demo/radio.module.ts b/demos/src/app/components/radio/module.ts similarity index 100% rename from demos/src/app/components/radio-demo/radio.module.ts rename to demos/src/app/components/radio/module.ts diff --git a/demos/src/app/components/radio-demo/radio-demo.ts b/demos/src/app/components/radio/radio.ts similarity index 92% rename from demos/src/app/components/radio-demo/radio-demo.ts rename to demos/src/app/components/radio/radio.ts index 00341ac8e..d1e84564a 100644 --- a/demos/src/app/components/radio-demo/radio-demo.ts +++ b/demos/src/app/components/radio/radio.ts @@ -6,7 +6,7 @@ import {FormGroup, FormControl} from '@angular/forms'; import {MdcRadio} from '@angular-mdc/web'; @Component({template: ''}) -export class RadioDemo implements OnInit { +export class Radio implements OnInit { @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer; ngOnInit(): void { @@ -101,4 +101,13 @@ form = new FormGroup({ season: new FormControl(''), });` }; + + exampleAccessibility = { + html: `
+ + + + +
` + }; } diff --git a/demos/src/app/components/radio/routing.module.ts b/demos/src/app/components/radio/routing.module.ts new file mode 100644 index 000000000..051926be1 --- /dev/null +++ b/demos/src/app/components/radio/routing.module.ts @@ -0,0 +1,29 @@ +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; + +import {Api, Examples, Sass, Radio} from './radio'; + +export const ROUTE_DECLARATIONS = [ + Api, + Examples, + Sass, + Radio +]; + +const ROUTES: Routes = [ + { + path: '', component: Radio, + children: [ + {path: '', redirectTo: 'api'}, + {path: 'api', component: Api}, + {path: 'sass', component: Sass}, + {path: 'examples', component: Examples} + ] + } +]; + +@NgModule({ + imports: [RouterModule.forChild(ROUTES)], + exports: [RouterModule] +}) +export class RoutingModule {} diff --git a/demos/src/app/components/radio/sass.html b/demos/src/app/components/radio/sass.html new file mode 100644 index 000000000..39259920a --- /dev/null +++ b/demos/src/app/components/radio/sass.html @@ -0,0 +1,58 @@ +
+

Sass Mixins

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinDescription
unchecked-stroke-color($color)Sets the stroke color of an unchecked, enabled radio button
checked-stroke-color($color)Sets the stroke color of a checked, enabled radio button
ink-color($color)Sets the ink color of an enabled radio button
disabled-unchecked-stroke-color($color)Sets the stroke color of an unchecked, disabled radio button
disabled-checked-stroke-color($color)Sets the stroke color of a checked, disabled radio button
disabled-ink-color($color)Sets the ink color of a disabled radio button
focus-indicator-color($color)Sets the color of the focus indicator
touch-target($size, $ripple-size)Sets radio touch target size which can be more than the ripple size. + Param $ripple-size is required for custom ripple size, + defaults to $ripple-size.
ripple-size($size)Sets custom ripple size of radio.
density($density-scale)Sets density scale for radio. Supported density scale values are + -3, -2, -1 and 0 + (default).
+
\ No newline at end of file diff --git a/demos/src/styles/_radio.scss b/demos/src/styles/_radio.scss index d81d67fbb..7a28c27a6 100644 --- a/demos/src/styles/_radio.scss +++ b/demos/src/styles/_radio.scss @@ -1,5 +1,5 @@ @use '@material/radio/_index' as radio; -@use '@material/ripple/mixins' as ripple; +@use '@material/ripple/_index' as ripple; @use '@material/theme/color-palette' as material-color; .demo-radio--custom { diff --git a/packages/radio/radio.ts b/packages/radio/radio.ts index a8dde5de7..57a5574be 100644 --- a/packages/radio/radio.ts +++ b/packages/radio/radio.ts @@ -65,7 +65,8 @@ let nextUniqueId = 0; 'class': 'mdc-radio', '(focus)': 'input.nativeElement.focus()', '[attr.tabindex]': '-1', - '[attr.name]': 'null' + '[attr.name]': 'null', + '[class.mdc-radio--touch]': 'touch', }, template: ` return `${this.id || this._uniqueId}-input`; } + @Input() + get touch(): boolean { + return this._touch; + } + set touch(value: boolean) { + this._touch = coerceBooleanProperty(value); + } + private _touch: boolean = false; + @Input() get value(): any { return this._value; diff --git a/test/radio/radio.test.ts b/test/radio/radio.test.ts index dd73a8f4b..9352b8f17 100644 --- a/test/radio/radio.test.ts +++ b/test/radio/radio.test.ts @@ -631,7 +631,7 @@ class RadiosInsideRadioGroup { [aria-labelledby]="ariaLabelledby" [aria-describedby]="ariaDescribedby"> - Raspberry + Raspberry No name ` }) @@ -639,6 +639,7 @@ class StandaloneRadioButtons { ariaLabel: string = 'Banana'; ariaLabelledby: string = 'xyz'; ariaDescribedby: string = 'abc'; + touch: boolean = false; }