From e8b18cabaa861d486824a4a0403aacd764b671ab Mon Sep 17 00:00:00 2001
From: Lyza Danger Gardner <lyza@lyza.com>
Date: Mon, 30 Jan 2023 13:39:34 -0500
Subject: [PATCH] Ensure Checkbox has a visible ring on `focus-visible`

Fixes #627
---
 src/components/input/Checkbox.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/input/Checkbox.js b/src/components/input/Checkbox.js
index a0c13344..6acf0212 100644
--- a/src/components/input/Checkbox.js
+++ b/src/components/input/Checkbox.js
@@ -63,6 +63,8 @@ const CheckboxNext = function Checkbox({
     }
   }
 
+  const Icon = isChecked ? CheckedIcon : UncheckedIcon;
+
   return (
     <label
       className={classnames('relative flex items-center gap-x-1.5', {
@@ -77,6 +79,9 @@ const CheckboxNext = function Checkbox({
         type="checkbox"
         ref={downcastRef(elementRef)}
         className={classnames(
+          // Set the special Tailwind peer class to allow sibling elements
+          // to style themselves based on the state of this element
+          'peer',
           // Position this atop the icon and size it to the same dimensions
           'absolute w-em h-em',
           // Make checkbox input visually hidden, but
@@ -91,11 +96,15 @@ const CheckboxNext = function Checkbox({
         id={id}
         onChange={handleChange}
       />
-      {isChecked ? (
-        <CheckedIcon className="w-em h-em" />
-      ) : (
-        <UncheckedIcon className="w-em h-em" />
-      )}
+      <Icon
+        className={classnames(
+          // Add an outline ring to the icon when the input is focus-visible.
+          // The ring needs to be applied here because the `input` has an
+          // effectively-0 opacity.
+          'peer-focus-visible:ring',
+          'w-em h-em'
+        )}
+      />
       {children}
     </label>
   );