fix: accessibility

* delete `visibility: hidden;` * set 1px height and width to radio and checkbox * set background color
nostalgic-css · Jun 30, 2019 · 3c2e25a · 3c2e25a
1 parent 1f33685
commit 3c2e25a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss
@@ -52,8 +52,11 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  visibility: hidden;
 
+  background: $color-white;
+  width: 1px;
+  height: 1px;
+  border: 0;
   & + span {
     position: relative;
     cursor: $cursor-click-url, pointer;
@@ -83,6 +86,7 @@
     @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
   &.is-dark {
+    background: $base-color;
     + span {
       color: $color-white;
     }

diff --git a/scss/form/radios.scss b/scss/form/radios.scss
@@ -26,7 +26,11 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  visibility: hidden;
+
+  background: $color-white;
+  width: 1px;
+  height: 1px;
+  border: 0;
 
   & + span {
     position: relative;
@@ -53,6 +57,7 @@
     @include pixelize(2px, $radio-checked-focus, $colors);
   }
   &.is-dark {
+    background: $base-color;
     + span {
       color: $color-white;
     }