fix(accessibility): allow focus on radio inputs

AxaFrance · Sep 11, 2023 · ddcb5c9 · ddcb5c9
1 parent 55b6538
commit ddcb5c9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 12 deletions.
diff --git a/packages/Form/Input/checkbox/src/checkbox.scss b/packages/Form/Input/checkbox/src/checkbox.scss
@@ -32,8 +32,7 @@
 
   &__input-checkbox {
     position: absolute;
-    z-index: -1;
-    visibility: hidden;
+    opacity: 0;
 
     &:checked + .af-form__label {
       .af-form__indicator {
@@ -107,8 +106,7 @@
 
     .af-form__input-checkbox {
       position: absolute;
-      z-index: -1;
-      visibility: hidden;
+      opacity: 0;
 
       &:checked + .af-form__label {
         background-color: $color-azur;

diff --git a/packages/Form/Input/choice/src/radio.scss b/packages/Form/Input/choice/src/radio.scss
@@ -84,8 +84,7 @@
 
     .af-form__input-radio {
       position: absolute;
-      z-index: -1;
-      visibility: hidden;
+      opacity: 0;
 
       &:checked + .af-form__label {
         &::after {
@@ -126,8 +125,7 @@
 
     .af-form__input-radio {
       position: absolute;
-      z-index: -1;
-      visibility: hidden;
+      opacity: 0;
 
       &:checked + .af-form__label {
         background-color: $color-azur;

diff --git a/packages/Form/Input/radio/src/radio.scss b/packages/Form/Input/radio/src/radio.scss
@@ -84,8 +84,7 @@
 
     .af-form__input-radio {
       position: absolute;
-      z-index: -1;
-      visibility: hidden;
+      opacity: 0;
 
       &:checked + .af-form__label {
         &::after {
@@ -126,8 +125,7 @@
 
     .af-form__input-radio {
       position: absolute;
-      z-index: -1;
-      visibility: hidden;
+      opacity: 0;
 
       &:checked + .af-form__label {
         background-color: $color-azur;