From e528aae79597b4ba0fe423bcb6e3dd18c2626adc Mon Sep 17 00:00:00 2001
From: Thierry Bugier <tbugier@teclib.com>
Date: Mon, 17 Oct 2022 10:36:24 +0200
Subject: [PATCH] fix(radiosfield): accessibility from keyboard

---
 css/styles.scss                 | 16 ++++++++--------
 inc/field/radiosfield.class.php |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/css/styles.scss b/css/styles.scss
index 4f3b2ac7d..72ca40e68 100644
--- a/css/styles.scss
+++ b/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;
    }
diff --git a/inc/field/radiosfield.class.php b/inc/field/radiosfield.class.php
index 83b1f84ae..e35b297c5 100644
--- a/inc/field/radiosfield.class.php
+++ b/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);