From 9ea4c6a96d4e0a0b5f8824fc144049baf548988d Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <ac@iconstorm.com>
Date: Tue, 19 Sep 2023 16:42:23 +0200
Subject: [PATCH] fix(radio-button): polish click handling and hover/active
 states (#2131)

---
 .../src/components/radio-button/radio-button.css  |  7 +++----
 .../src/components/radio-button/radio-button.tsx  | 15 ++-------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/components/radio-button/radio-button.css b/packages/components/src/components/radio-button/radio-button.css
index c939e3fbc0..49165ce00f 100644
--- a/packages/components/src/components/radio-button/radio-button.css
+++ b/packages/components/src/components/radio-button/radio-button.css
@@ -74,7 +74,6 @@ scale-radio-button {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  cursor: pointer;
   width: fit-content;
 }
 
@@ -128,15 +127,15 @@ scale-icon-alert-error {
   cursor: pointer;
 }
 
-.radio-button:hover input:not(:checked):not([disabled]) {
+.radio-button input:not(:checked):not([disabled]):hover {
   box-shadow: none;
   border-color: var(--telekom-color-ui-border-hovered);
   background-color: var(--telekom-color-ui-state-fill-hovered);
 }
-.radio-button:hover input:not(:checked):not([disabled]) ~ label {
+.radio-button input:not(:checked):not([disabled]):hover ~ label {
   color: var(--color-primary-hover);
 }
-.radio-button:active input:not(:checked):not([disabled]) {
+.radio-button input:not(:checked):not([disabled]):active {
   border-color: var(--telekom-color-ui-border-pressed);
   background-color: var(--telekom-color-ui-state-fill-pressed);
 }
diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
index 939a051c17..0dab024edf 100644
--- a/packages/components/src/components/radio-button/radio-button.tsx
+++ b/packages/components/src/components/radio-button/radio-button.tsx
@@ -93,15 +93,6 @@ export class RadioButton {
     }
   };
 
-  // Prevent click event being fired twice when the target is the label.
-  handleClick = (event: any) => {
-    event.stopPropagation();
-    if (!this.disabled) {
-      this.checked = true;
-      this.uncheckSiblings();
-    }
-  };
-
   // We manually set `checked` to false on sibling <scale-radio-button> elements,
   // otherwise they stayed `checked` after being clicked once, forever.
   uncheckSiblings() {
@@ -137,7 +128,7 @@ export class RadioButton {
 
     return (
       <Host>
-        <div class={this.getCssClassMap()} onClick={this.handleClick}>
+        <div class={this.getCssClassMap()}>
           <input
             type="radio"
             name={this.name}
@@ -149,9 +140,7 @@ export class RadioButton {
             {...ariaInvalidAttr}
             {...(this.helperText ? ariaDescribedByAttr : {})}
           />
-          <label htmlFor={this.inputId} onClick={this.handleClick}>
-            {this.label}
-          </label>
+          <label htmlFor={this.inputId}>{this.label}</label>
           {!!this.helperText && (
             <div
               class="radio-button__meta"