feat(radio): Add touch target

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)},

demos/src/app/components/radio-demo/api.html → demos/src/app/components/radio/api.html

@@ -29,11 +29,13 @@ <h4 mdcSubtitle2>Properties</h4>
       </tr>
       <tr>
         <td>ariaLabel: string</td>
-        <td>Used to set the 'aria-label' attribute on the underlying input element.</td>
+        <td>Used to set the 'aria-label' attribute on the underlying input
+          element.</td>
       </tr>
       <tr>
         <td>ariaLabelledby: string</td>
-        <td>The 'aria-labelledby' attribute takes precedence as the element's text alternative.</td>
+        <td>The 'aria-labelledby' attribute takes precedence as the element's
+          text alternative.</td>
       </tr>
       <tr>
         <td>checked: boolean</td>
@@ -47,6 +49,10 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>required: boolean</td>
         <td>Whether the radio button is required.</td>
       </tr>
+      <tr>
+        <td>touch: boolean</td>
+        <td>Set the component touch target to 48 x 48 px.</td>
+      </tr>
     </tbody>
   </table>
 
@@ -65,7 +71,8 @@ <h4 mdcSubtitle2>Events</h4>
     <tbody>
       <tr>
         <td>change(source: MdcRadio, value: any)</td>
-        <td>Event emitted when the group value changes. Change events are only emitted when the value changes due to
+        <td>Event emitted when the group value changes. Change events are only
+          emitted when the value changes due to
           user interaction with a radio button.</td>
       </tr>
     </tbody>
@@ -103,14 +110,18 @@ <h4 mdcSubtitle2>Properties</h4>
       </tr>
       <tr>
         <td>selected: MdcRadio | null</td>
-        <td>The currently selected radio button. If set to a new radio button, the radio group value will be updated to
+        <td>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.</td>
       </tr>
       <tr>
         <td>value: any</td>
-        <td>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.</td>
+        <td>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.
+        </td>
       </tr>
     </tbody>
   </table>
@@ -120,7 +131,8 @@ <h4 mdcSubtitle2>Events</h4>
     <tbody>
       <tr>
         <td>change(source: MdcRadio, value: any)</td>
-        <td>Event emitted when the group value changes. Change events are only emitted when the value changes due to
+        <td>Event emitted when the group value changes. Change events are only
+          emitted when the value changes due to
           user interaction with a radio button.</td>
       </tr>
     </tbody>

demos/src/app/components/radio-demo/examples.html → demos/src/app/components/radio/examples.html

@@ -17,11 +17,14 @@
 
 <div class="demo-content">
   <div class="demo-layout__row">
-    <button mdc-button (click)="demoFormField.alignEnd = !demoFormField.alignEnd">RTL: {{demoFormField.alignEnd ? 'On'
+    <button mdc-button
+      (click)="demoFormField.alignEnd = !demoFormField.alignEnd">RTL: {{demoFormField.alignEnd ? 'On'
       : 'Off'}}</button>
-    <button mdc-button (click)="demoRadio2.disabled = !demoRadio2.disabled">Disabled: {{demoRadio2.disabled ? 'On' :
+    <button mdc-button
+      (click)="demoRadio2.disabled = !demoRadio2.disabled">Disabled: {{demoRadio2.disabled ? 'On' :
       'Off'}}</button>
-    <button mdc-button (click)="alternateColors(demoRadio2)">Alternate Colors</button>
+    <button mdc-button (click)="alternateColors(demoRadio2)">Alternate
+      Colors</button>
   </div>
   <mdc-form-field #demoFormField [alignEnd]="false">
     <mdc-radio #demoRadio2></mdc-radio>
@@ -33,7 +36,8 @@
 <div class="demo-content">
   <h3 class="demo-content__headline">Radio Group</h3>
   <div class="demo-layout__row">
-    <button mdc-button (click)="demoRadioGroup.disabled = !demoRadioGroup.disabled">Disabled: {{demoRadioGroup.disabled
+    <button mdc-button
+      (click)="demoRadioGroup.disabled = !demoRadioGroup.disabled">Disabled: {{demoRadioGroup.disabled
       ? 'On' : 'Off'}}</button>
   </div>
   <mdc-radio-group #demoRadioGroup [(ngModel)]="favoriteSeason">
@@ -49,7 +53,8 @@ <h3 class="demo-content__headline">Radio Group</h3>
 <div class="demo-content">
   <h3 class="demo-content__headline">Radio Group - Reactive forms</h3>
   <div class="demo-layout__row">
-    <button mdc-button (click)="demoRadioReactive.disabled = !demoRadioReactive.disabled">Disabled:
+    <button mdc-button
+      (click)="demoRadioReactive.disabled = !demoRadioReactive.disabled">Disabled:
       {{demoRadioReactive.disabled ? 'On' : 'Off'}}</button>
   </div>
   <form [formGroup]="form">
@@ -62,4 +67,25 @@ <h3 class="demo-content__headline">Radio Group - Reactive forms</h3>
   </form>
   <p>Your favorite season is: {{form.controls['season'].value}}</p>
   <example-viewer [example]="exampleReactive"></example-viewer>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Accessibility</h3>
+  <p>
+    Material Design spec advises that touch targets should be at least 48 x 48
+    px. To meet this requirement, add the `touch` property.
+  </p>
+  <p>
+    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). </p>
+  <div class="demo-layout__row">
+    <div class="mdc-touch-target-wrapper">
+      <mdc-form-field>
+        <mdc-radio name="demo-radio-set" touch></mdc-radio>
+        <label>My Accessibility Radio</label>
+      </mdc-form-field>
+    </div>
+  </div>
+  <example-viewer [example]="exampleAccessibility"></example-viewer>
 </div>

demos/src/app/components/radio-demo/radio-demo.ts → 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: '<component-viewer></component-viewer>'})
-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: `<div class="mdc-touch-target-wrapper">
+  <mdc-form-field>
+    <mdc-radio name="demo-radio-set" touch></mdc-radio>
+    <label>My Accessibility Radio</label>
+  </mdc-form-field>
+</div>`
+  };
 }

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 {}

demos/src/app/components/radio/sass.html

@@ -0,0 +1,58 @@
+<div class="docs-api">
+  <h4 mdcSubtitle2>Sass Mixins</h4>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Mixin</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>unchecked-stroke-color($color)</code></td>
+        <td>Sets the stroke color of an unchecked, enabled radio button</td>
+      </tr>
+      <tr>
+        <td><code>checked-stroke-color($color)</code></td>
+        <td>Sets the stroke color of a checked, enabled radio button</td>
+      </tr>
+      <tr>
+        <td><code>ink-color($color)</code></td>
+        <td>Sets the ink color of an enabled radio button</td>
+      </tr>
+      <tr>
+        <td><code>disabled-unchecked-stroke-color($color)</code></td>
+        <td>Sets the stroke color of an unchecked, disabled radio button</td>
+      </tr>
+      <tr>
+        <td><code>disabled-checked-stroke-color($color)</code></td>
+        <td>Sets the stroke color of a checked, disabled radio button</td>
+      </tr>
+      <tr>
+        <td><code>disabled-ink-color($color)</code></td>
+        <td>Sets the ink color of a disabled radio button</td>
+      </tr>
+      <tr>
+        <td><code>focus-indicator-color($color)</code></td>
+        <td>Sets the color of the focus indicator</td>
+      </tr>
+      <tr>
+        <td><code>touch-target($size, $ripple-size)</code></td>
+        <td>Sets radio touch target size which can be more than the ripple size.
+          Param <code>$ripple-size</code> is required for custom ripple size,
+          defaults to <code>$ripple-size</code>.</td>
+      </tr>
+      <tr>
+        <td><code>ripple-size($size)</code></td>
+        <td>Sets custom ripple size of radio.</td>
+      </tr>
+      <tr>
+        <td><code>density($density-scale)</code></td>
+        <td>Sets density scale for radio. Supported density scale values are
+          <code>-3</code>, <code>-2</code>, <code>-1</code> and <code>0</code>
+          (default).</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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 {

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: `
   <input type="radio"
@@ -119,6 +120,15 @@ export class MdcRadio extends MDCComponent<MDCRadioFoundation>
     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;

test/radio/radio.test.ts

@@ -631,14 +631,15 @@ class RadiosInsideRadioGroup {
                      [aria-labelledby]="ariaLabelledby"
                      [aria-describedby]="ariaDescribedby">
     </mdc-radio>
-    <mdc-radio name="fruit" value="raspberry">Raspberry</mdc-radio>
+    <mdc-radio name="fruit" [touch]="touch" value="raspberry">Raspberry</mdc-radio>
     <mdc-radio id="nameless" value="no-name">No name</mdc-radio>
   `
 })
 class StandaloneRadioButtons {
   ariaLabel: string = 'Banana';
   ariaLabelledby: string = 'xyz';
   ariaDescribedby: string = 'abc';
+  touch: boolean = false;
 }