fix: allows radio input to be tabbable

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 {

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`} />