fix: remove the input entirely and replace it with a touch target

material-components · Aug 28, 2024 · cf84a27 · cf84a27
1 parent 192f17e
commit cf84a27
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 14 deletions.
diff --git a/radio/internal/_radio.scss b/radio/internal/_radio.scss
@@ -89,17 +89,13 @@ $_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 {
+    :host([touch-target='none']) .touch-target {
       width: 100%;
       height: 100%;
     }

diff --git a/radio/internal/radio.ts b/radio/internal/radio.ts
@@ -99,7 +99,7 @@ export class Radio extends radioBaseClass {
   protected override render() {
     const classes = {'checked': this.checked};
     return html`
-      <div class="container ${classMap(classes)}" inert">
+      <div class="container ${classMap(classes)}" aria-hidden="true">
         <md-ripple
           part="ripple"
           .control=${this}
@@ -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>
     `;
   }