From c40598341e0a13d5d6e3e33592083ac7c8bac07a Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Wed, 3 Jul 2019 17:49:55 +0900
Subject: [PATCH] refactor: add visually-hidden util

---
 scss/elements/buttons.scss          |  2 +-
 scss/form/checkboxes.scss           |  7 ++-----
 scss/form/radios.scss               |  6 +-----
 scss/utilities/_index.scss          |  1 +
 scss/utilities/visually-hidden.scss | 13 +++++++++++++
 5 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 scss/utilities/visually-hidden.scss

diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
index e20fb06..99a7285 100644
--- a/scss/elements/buttons.scss
+++ b/scss/elements/buttons.scss
@@ -13,7 +13,7 @@
   }
 
   &:hover {
-    color: inherit;
+    color: $color;
     text-decoration: none;
     background-color: $hover-background;
 
diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss
index 0e608ea..962b810 100644
--- a/scss/form/checkboxes.scss
+++ b/scss/form/checkboxes.scss
@@ -53,10 +53,8 @@
   -moz-appearance: none;
   appearance: none;
 
-  background: $color-white;
-  width: 1px;
-  height: 1px;
-  border: 0;
+  @include visually-hidden();
+
   & + span {
     position: relative;
     cursor: $cursor-click-url, pointer;
@@ -86,7 +84,6 @@
     @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
index b7ca363..ae00536 100644
--- a/scss/form/radios.scss
+++ b/scss/form/radios.scss
@@ -27,10 +27,7 @@
   -moz-appearance: none;
   appearance: none;
 
-  background: $color-white;
-  width: 1px;
-  height: 1px;
-  border: 0;
+  @include visually-hidden();
 
   & + span {
     position: relative;
@@ -57,7 +54,6 @@
     @include pixelize(2px, $radio-checked-focus, $colors);
   }
   &.is-dark {
-    background: $base-color;
     + span {
       color: $color-white;
     }
diff --git a/scss/utilities/_index.scss b/scss/utilities/_index.scss
index 8483415..6531acf 100644
--- a/scss/utilities/_index.scss
+++ b/scss/utilities/_index.scss
@@ -3,3 +3,4 @@
 @import "animations.scss";
 @import "icon-mixin.scss";
 @import "rounded-corners-mixin.scss";
+@import "visually-hidden.scss";
diff --git a/scss/utilities/visually-hidden.scss b/scss/utilities/visually-hidden.scss
new file mode 100644
index 0000000..4941073
--- /dev/null
+++ b/scss/utilities/visually-hidden.scss
@@ -0,0 +1,13 @@
+/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
+@mixin visually-hidden() {
+  // position: absolute;
+  // margin: -1px;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}