fix(radiosfield): accessibility from keyboard

Author: btry

css/styles.scss

@@ -476,7 +476,7 @@ form#plugin_formcreator_form {
 }
 
 #plugin_formcreator_form input[type = checkbox]:focus + label,
-#plugin_formcreator_form input[type = radio].new_radio:focus + label,
+#plugin_formcreator_form input[type = radio].form-check-input:focus + label,
 #plugin_formcreator_form input[type = file]:focus {
    color: #66afe9;
    color: rgba(102,175,233, 1);
@@ -517,31 +517,31 @@ form#plugin_formcreator_form {
 .radios .form-group-radio + label {
    margin-left: 7px;
 }
-input[type = radio].new_radio {
+input[type = radio].form-check-input {
    display: none;
 }
 .label-radio .radio {
    padding: 2px 0;
 }
-input[type = radio].new_radio + label.label-radio span {
+input[type = radio].form-check-input + label.label-radio span {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
 }
-input[type = radio].new_radio + label.label-radio .box {
+input[type = radio].form-check-input + label.label-radio .box {
    background-color: #fff;
    border: 2px solid #727272;
    border-radius: 50%;
 }
-input[type = radio].new_radio + label.label-radio .check {
+input[type = radio].form-check-input + label.label-radio .check {
    left: 4px;
    top: 4px;
    width: 0px;
    height: 0px;
    opacity: 0;
 }
-input[type = radio].new_radio:checked + label.label-radio .check {
+input[type = radio].form-check-input:checked + label.label-radio .check {
    border: 6px solid #727272;
    border-radius: 50%;
    transition: opacity 0.3s ease;
@@ -1191,7 +1191,7 @@ a.plugin_formcreator_formTile_title {
    opacity: 1;
    color: #3874BC;
 
-   .radios input[type = radio].new_radio + label:before {
+   .radios input[type = radio].form-check-input + label:before {
       background-color: #3874BC;
       border: 2px solid #3874BC;
    }
@@ -1207,7 +1207,7 @@ a.plugin_formcreator_formTile_title {
       margin: 0 20px;
    }
 
-   .radios input[type = radio].new_radio + label {
+   .radios input[type = radio].form-check-input + label {
       display: inline-block;
       margin-right: 10px;
    }

inc/field/radiosfield.class.php

@@ -122,7 +122,7 @@ public function getRenderedHtml($domain, $canEdit = true): string {
                $html .= '<span class="form-group-radio">';
                $html .= Html::input($fieldName, [
                   'type'    => 'radio',
-                  'class'   => 'new_radio form-control',
+                  'class'   => 'form-check-input form-control',
                   'id'      => $domId . '_' . $i,
                   'value'   => $value
                ] + $checked);