From b5880f26af8b97d47eca83a9fc7bd05b006cc54c Mon Sep 17 00:00:00 2001
From: Jessica Boezwinkle <jessica@trbl.design>
Date: Mon, 6 Feb 2023 12:51:57 +0000
Subject: [PATCH] fix: allows radio input to be tabbable

---
 .../field-types/RadioGroup/RadioInput/index.scss   | 14 +++++++++++++-
 .../field-types/RadioGroup/RadioInput/index.tsx    |  4 ++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss b/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss
index 2609c2674f..d79fc8a88d 100644
--- a/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss
+++ b/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss
@@ -7,7 +7,10 @@
   margin: base(.10) 0;
 
   input[type=radio] {
-    display: none;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
   }
 
   &__styled-radio {
@@ -45,6 +48,15 @@
     }
   }
 
+
+  &--is-focused {
+    .radio-input {
+      &__styled-radio {
+        box-shadow: 0 0 3px 3px var(--theme-success-400);
+      }
+    }
+  }
+
   &:not(&--is-selected) {
     &:hover {
       .radio-input {
diff --git a/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx b/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx
index 52358896cf..e94a2e2123 100644
--- a/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx
+++ b/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx
@@ -10,10 +10,12 @@ const baseClass = 'radio-input';
 const RadioInput: React.FC<Props> = (props) => {
   const { isSelected, option, onChange, path } = props;
   const { i18n } = useTranslation();
+  const [isFocused, setIsFocused] = React.useState(false);
 
   const classes = [
     baseClass,
     isSelected && `${baseClass}--is-selected`,
+    isFocused && `${baseClass}--is-focused`,
   ].filter(Boolean).join(' ');
 
   const id = `field-${path}-${option.value}`;
@@ -27,6 +29,8 @@ const RadioInput: React.FC<Props> = (props) => {
           id={id}
           type="radio"
           checked={isSelected}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           onChange={() => (typeof onChange === 'function' ? onChange(option.value) : null)}
         />
         <span className={`${baseClass}__styled-radio`} />