From b757970d23e87c59aa883ecb1bfa9b66bcae8de2 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Dec 2023 11:38:29 -0500
Subject: [PATCH] feat(radio): add shadow part for label (#28607)

Issue number: Part of #28300

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Developers are unable to adjust margin, width, etc. of the radio label

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Radio label has a shadow part.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
As part of this work, I investigated moving `pointer-events: none` up
the DOM tree so developers wouldn't be able to override it with the
shadow part. In my testing, I was unable to see any difference in
behavior with vs without `pointer-events: none`. Therefore, I removed it
entirely.
---
 core/api.txt                                 |  1 +
 core/src/components/radio/radio.scss         |  7 -------
 core/src/components/radio/radio.tsx          |  2 ++
 core/src/components/radio/test/radio.spec.ts | 17 +++++++++++++++++
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 9f30c35c09..320c0fc187 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1030,6 +1030,7 @@ ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
 ion-radio,css-prop,--inner-border-radius
 ion-radio,part,container
+ion-radio,part,label
 ion-radio,part,mark
 
 ion-radio-group,none
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index 4272607949..5a231acad9 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -109,13 +109,6 @@ input {
 // ----------------------------------------------------------------
 
 .label-text-wrapper {
-  /**
-   * This ensures that double tapping this text
-   * clicks the <label> and focuses the radio
-   * when a screen reader is enabled.
-   */
-  pointer-events: none;
-
   text-overflow: ellipsis;
 
   white-space: nowrap;
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 343d7d9e30..d19fc34d52 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -15,6 +15,7 @@ import type { Color, StyleEventDetail } from '../../interface';
  * @slot - The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio.
  *
  * @part container - The container for the radio mark.
+ * @part label - The label text describing the radio.
  * @part mark - The checkmark or dot used to indicate the checked state.
  */
 @Component({
@@ -297,6 +298,7 @@ export class Radio implements ComponentInterface {
               'label-text-wrapper': true,
               'label-text-wrapper-hidden': !hasLabel,
             }}
+            part="label"
           >
             <slot></slot>
           </div>
diff --git a/core/src/components/radio/test/radio.spec.ts b/core/src/components/radio/test/radio.spec.ts
index ecfa2d2fc8..b8c23dd208 100644
--- a/core/src/components/radio/test/radio.spec.ts
+++ b/core/src/components/radio/test/radio.spec.ts
@@ -31,6 +31,23 @@ describe('ion-radio', () => {
 
     expect(radio.classList.contains('radio-checked')).toBe(true);
   });
+
+  it('should render the radio with shadow parts', async () => {
+    const page = await newSpecPage({
+      components: [Radio, RadioGroup],
+      html: `
+        <ion-radio-group>
+          <ion-radio value="value"></ion-radio>
+        </ion-radio-group>
+      `,
+    });
+
+    const radio = page.body.querySelector('ion-radio')!;
+
+    expect(radio).toHaveShadowPart('container');
+    expect(radio).toHaveShadowPart('label');
+    expect(radio).toHaveShadowPart('mark');
+  });
 });
 
 describe('ion-radio: disabled', () => {