Merge pull request #5700 from pennin-style:use-inert-radio

PiperOrigin-RevId: 668978675
material-components · Aug 29, 2024 · 990d065 · 990d065
2 parents 22e19c2 + a696121
commit 990d065
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 15 deletions.
diff --git a/radio/internal/_radio.scss b/radio/internal/_radio.scss
@@ -89,19 +89,14 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       );
     }
 
-    // <input> is also the touch target
-    input {
-      appearance: none;
+    .touch-target {
       height: 48px;
-      margin: 0;
       position: absolute;
       width: 48px;
-      cursor: inherit;
     }
 
-    :host([touch-target='none']) input {
-      width: 100%;
-      height: 100%;
+    :host([touch-target='none']) .touch-target {
+      display: none;
     }
 
     md-ripple {

diff --git a/radio/internal/radio.ts b/radio/internal/radio.ts
@@ -119,13 +119,7 @@ export class Radio extends radioBaseClass {
           <circle class="inner circle" cx="10" cy="10" r="5" />
         </svg>
 
-        <input
-          id="input"
-          type="radio"
-          tabindex="-1"
-          .checked=${this.checked}
-          .value=${this.value}
-          ?disabled=${this.disabled} />
+        <div class="touch-target"></div>
       </div>
     `;
   }