From ac6eaae2f25b5a596ada61942599396b253cc660 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Thu, 10 Apr 2025 06:27:19 -0700
Subject: [PATCH 1/3] fix(toggle): ensure proper visual selection when
 navigating via VoiceOver in Safari

---
 core/src/components/toggle/toggle.scss |  6 +++-
 core/src/components/toggle/toggle.tsx  | 44 ++++++++++++++++++++++----
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index ad78e471c0b..0aec6967d22 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -69,8 +69,12 @@
   pointer-events: none;
 }
 
+/**
+ * The native input must be hidden with display instead of visibility or
+ * aria-hidden to avoid accessibility issues with nested interactive elements.
+ */
 input {
-  @include visually-hidden();
+  display: none;
 }
 
 // Toggle Wrapper
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 8ccdb60d3dd..230b427f51a 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -35,6 +35,7 @@ import type { ToggleChangeEventDetail } from './toggle-interface';
 })
 export class Toggle implements ComponentInterface {
   private inputId = `ion-tg-${toggleIds++}`;
+  private inputLabelId = `${this.inputId}-lbl`;
   private helperTextId = `${this.inputId}-helper-text`;
   private errorTextId = `${this.inputId}-error-text`;
   private gesture?: Gesture;
@@ -246,6 +247,15 @@ export class Toggle implements ComponentInterface {
     }
   }
 
+  private onKeyDown = (ev: KeyboardEvent) => {
+    if (ev.key === ' ') {
+      ev.preventDefault();
+      if (!this.disabled) {
+        this.toggleChecked();
+      }
+    }
+  };
+
   private onClick = (ev: MouseEvent) => {
     if (this.disabled) {
       return;
@@ -355,8 +365,23 @@ export class Toggle implements ComponentInterface {
   }
 
   render() {
-    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } =
-      this;
+    const {
+      activated,
+      alignment,
+      checked,
+      color,
+      disabled,
+      el,
+      errorTextId,
+      hasLabel,
+      inheritedAttributes,
+      inputId,
+      inputLabelId,
+      justify,
+      labelPlacement,
+      name,
+      required,
+    } = this;
 
     const mode = getIonMode(this);
     const value = this.getValue();
@@ -365,9 +390,15 @@ export class Toggle implements ComponentInterface {
 
     return (
       <Host
+        role="switch"
         aria-describedby={this.getHintTextID()}
-        aria-invalid={this.getHintTextID() === this.errorTextId}
+        aria-invalid={this.getHintTextID() === errorTextId}
         onClick={this.onClick}
+        aria-labelledby={hasLabel ? inputLabelId : null}
+        aria-label={inheritedAttributes['aria-label'] || null}
+        aria-disabled={disabled ? 'true' : null}
+        tabindex={disabled ? undefined : 0}
+        onKeyDown={this.onKeyDown}
         class={createColorClasses(color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),
@@ -380,7 +411,7 @@ export class Toggle implements ComponentInterface {
           [`toggle-${rtl}`]: true,
         })}
       >
-        <label class="toggle-wrapper">
+        <label class="toggle-wrapper" htmlFor={inputId}>
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
@@ -396,14 +427,15 @@ export class Toggle implements ComponentInterface {
             onBlur={() => this.onBlur()}
             ref={(focusEl) => (this.focusEl = focusEl)}
             required={required}
-            {...this.inheritedAttributes}
+            {...inheritedAttributes}
           />
           <div
             class={{
               'label-text-wrapper': true,
-              'label-text-wrapper-hidden': !this.hasLabel,
+              'label-text-wrapper-hidden': !hasLabel,
             }}
             part="label"
+            id={inputLabelId}
           >
             <slot></slot>
             {this.renderHintText()}

From e4d25f182eab29b65fe84c15b99391e4493d4adf Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Thu, 10 Apr 2025 06:36:24 -0700
Subject: [PATCH 2/3] fix(toggle): add missing aria-checked attribute

---
 core/src/components/toggle/toggle.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 230b427f51a..57a902c9411 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -391,6 +391,7 @@ export class Toggle implements ComponentInterface {
     return (
       <Host
         role="switch"
+        aria-checked={`${checked}`}
         aria-describedby={this.getHintTextID()}
         aria-invalid={this.getHintTextID() === errorTextId}
         onClick={this.onClick}

From 3785ef01fbf3b832d8cd7544e1c5ae202a73ee2e Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Fri, 11 Apr 2025 06:23:59 -0700
Subject: [PATCH 3/3] fix(toggle): remove outline property to improve focus
 visibility

---
 core/src/components/toggle/toggle.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index 0aec6967d22..b64107e66b0 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -31,8 +31,6 @@
 
   max-width: 100%;
 
-  outline: none;
-
   cursor: pointer;
   user-select: none;
   z-index: $z-index-item-input;