feat(radio): Added reducedTouchTarget support to mwc-radio

PiperOrigin-RevId: 331779945

Author: abhiomkar

packages/checkbox/mwc-checkbox-base.ts

@@ -37,6 +37,11 @@ export class CheckboxBase extends FormElement {
 
   @property({type: String}) value = '';
 
+  /**
+   * Touch target extends beyond visual boundary of a component by default.
+   * Set to `true` to remove touch target added to the component.
+   * @see https://material.io/design/usability/accessibility.html
+   */
   @property({type: Boolean}) reducedTouchTarget = false;
 
   @internalProperty() protected animationClass = '';

packages/radio/README.md

@@ -108,13 +108,14 @@ to associate an interactive label with the radio.
 
 ### Properties/Attributes
 
-| Name            | Type      | Default | Description
-| --------------- | --------- |-------- | -----------
-| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.
-| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.
-| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.
-| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.
-| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.
+Name                 | Type      | Default | Description
+-------------------- | --------- | ------- | -----------
+`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.
+`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.
+`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.
+`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.
+`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.
+`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).
 
 ### Methods
 *None*

packages/radio/mwc-radio-base.ts

@@ -22,6 +22,7 @@ import {RippleHandlers} from '@material/mwc-ripple/ripple-handlers';
 import {MDCRadioAdapter} from '@material/radio/adapter';
 import MDCRadioFoundation from '@material/radio/foundation';
 import {eventOptions, html, internalProperty, property, query, queryAsync} from 'lit-element';
+import {classMap} from 'lit-html/directives/class-map';
 
 
 /**
@@ -100,6 +101,13 @@ export class RadioBase extends FormElement {
 
   @property({type: String}) name = '';
 
+  /**
+   * Touch target extends beyond visual boundary of a component by default.
+   * Set to `true` to remove touch target added to the component.
+   * @see https://material.io/design/usability/accessibility.html
+   */
+  @property({type: Boolean}) reducedTouchTarget = false;
+
   protected mdcFoundationClass = MDCRadioFoundation;
 
   protected mdcFoundation!: MDCRadioFoundation;
@@ -198,16 +206,25 @@ export class RadioBase extends FormElement {
 
   /**
    * @soyCompatible
+   * @soyAttributes radioAttributes: input
+   * @soyClasses radioClasses: .mdc-radio
    */
   protected render() {
+    /** @classMap */
+    const classes = {
+      'mdc-radio--touch': !this.reducedTouchTarget,
+      'mdc-radio--disabled': this.disabled,
+    };
+
     return html`
-      <div class="mdc-radio">
+      <div class="mdc-radio ${classMap(classes)}">
         <input
           class="mdc-radio__native-control"
           type="radio"
           name="${this.name}"
           .checked="${this.checked}"
           .value="${this.value}"
+          ?disabled="${this.disabled}"
           @change="${this.changeHandler}"
           @focus="${this.handleFocus}"
           @click="${this.handleClick}"