From bb789354b06c44317ecedaa1f00f39eee23acb01 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Mar 2024 16:13:51 -0500
Subject: [PATCH] use ion-activatable & ion-focusable & any-hover

---
 .../components/checkbox/checkbox.ionic.scss   | 44 ++++++++++---------
 core/src/components/checkbox/checkbox.tsx     |  2 +
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss
index f9690d7119..61144bd633 100644
--- a/core/src/components/checkbox/checkbox.ionic.scss
+++ b/core/src/components/checkbox/checkbox.ionic.scss
@@ -35,42 +35,44 @@
 // Checkbox: Focused
 // --------------------------------------------------------
 
-:host(:focus) .checkbox-icon {
+:host(.ion-focusable) .checkbox-icon {
   outline: $checkbox-ionic-outline-width solid $checkbox-ionic-outline-color;
 }
 
-:host(:focus.checkbox-checked) .checkbox-icon,
-:host(:focus.checkbox-indeterminate) .checkbox-icon {
+:host(.ion-focusable.checkbox-checked) .checkbox-icon,
+:host(.ion-focusable.checkbox-indeterminate) .checkbox-icon {
   outline: $checkbox-ionic-outline-width solid $checkbox-ionic-outline-color;
 }
 
 // unchecked checkbox with `required` property set to true
-:host(:focus.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
+:host(.ion-focusable.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
   outline-color: #ffafaf;
 }
 
-// Checkbox: Active
-// --------------------------------------------------------
-
-:host(:active) .checkbox-icon {
-  background-color: #e3e3e3;
-}
-
-:host(:active.checkbox-checked) .checkbox-icon,
-:host(:active.checkbox-indeterminate) .checkbox-icon {
-  background-color: #105ed1;
-}
-
 // Checkbox: Hover
 // --------------------------------------------------------
 
-:host(:hover) .checkbox-icon {
-  background-color: #ececec;
+@media (any-hover: hover) {
+  :host(:hover) .checkbox-icon {
+    background-color: #ececec;
+  }
+
+  :host(:hover.checkbox-checked) .checkbox-icon,
+  :host(:hover.checkbox-indeterminate) .checkbox-icon {
+    background-color: #1061da;
+  }
 }
 
-:host(:hover.checkbox-checked) .checkbox-icon,
-:host(:hover.checkbox-indeterminate) .checkbox-icon {
-  background-color: #1061da;
+// Checkbox: Active
+// --------------------------------------------------------
+
+:host(.ion-activated) .checkbox-icon {
+  background-color: #e3e3e3;
+}
+
+:host(.ion-activated.checkbox-checked) .checkbox-icon,
+:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+  background-color: #105ed1;
 }
 
 // Material Design Checkbox: Checked / Indeterminate
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index b13e4d23fe..dacafe75db 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -271,6 +271,8 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-justify-${justify}`]: true,
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
+          'ion-activatable': true,
+          'ion-focusable': true,
         })}
         onClick={this.onClick}
       >