From 87bc7490404b0406b511833a85b686f1db791f66 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 9 Feb 2023 12:36:29 -0500
Subject: [PATCH] fix(checkbox, radio): label is announced once on ios (#26770)

resolves #26769
---
 core/src/components/checkbox/checkbox.tsx | 26 +++++++++++++----------
 core/src/components/radio/radio.tsx       | 20 ++++++++++-------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 68391778a5..0e7e3c3c6a 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -247,6 +247,21 @@ export class Checkbox implements ComponentInterface {
         })}
       >
         <label class="checkbox-wrapper">
+          {/*
+            The native control must be rendered
+            before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
+          */}
+          <input
+            type="checkbox"
+            aria-checked={`${checked}`}
+            disabled={disabled}
+            id={inputId}
+            onChange={this.toggleChecked}
+            onFocus={() => this.onFocus()}
+            onBlur={() => this.onBlur()}
+            ref={(focusEl) => (this.focusEl = focusEl)}
+            {...inheritedAttributes}
+          />
           <div
             class={{
               'label-text-wrapper': true,
@@ -260,17 +275,6 @@ export class Checkbox implements ComponentInterface {
               {path}
             </svg>
           </div>
-          <input
-            type="checkbox"
-            aria-checked={`${checked}`}
-            disabled={disabled}
-            id={inputId}
-            onChange={this.toggleChecked}
-            onFocus={() => this.onFocus()}
-            onBlur={() => this.onBlur()}
-            ref={(focusEl) => (this.focusEl = focusEl)}
-            {...inheritedAttributes}
-          />
         </label>
       </Host>
     );
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index ca553de434..a8c1878ee5 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -234,6 +234,18 @@ export class Radio implements ComponentInterface {
         })}
       >
         <label class="radio-wrapper">
+          {/*
+            The native control must be rendered
+            before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
+          */}
+          <input
+            type="radio"
+            checked={checked}
+            disabled={disabled}
+            id={inputId}
+            ref={(nativeEl) => (this.nativeInput = nativeEl as HTMLInputElement)}
+            {...inheritedAttributes}
+          />
           <div
             class={{
               'label-text-wrapper': true,
@@ -243,14 +255,6 @@ export class Radio implements ComponentInterface {
             <slot></slot>
           </div>
           <div class="native-wrapper">{this.renderRadioControl()}</div>
-          <input
-            type="radio"
-            checked={checked}
-            disabled={disabled}
-            id={inputId}
-            ref={(nativeEl) => (this.nativeInput = nativeEl as HTMLInputElement)}
-            {...inheritedAttributes}
-          />
         </label>
       </Host>
     );