Merge pull request #181 from BeAPI/fix/sr-only-css-class

styles : change visuallyhidden basic class to sr-only accessible class

Author: francoistibo

src/scss/abstract/_index.scss

@@ -31,6 +31,7 @@
 @import "./m-radio-custom";
 @import "./m-row-fullwidth";
 @import "./m-select-custom";
+@import "./m-sr-only";
 @import "./m-style-only";
 @import "./m-title";
 @import "./m-word-wrap";

src/scss/abstract/_m-checkbox-custom.scss

@@ -8,7 +8,7 @@
     input[type="checkbox"],
     input[type="radio"] {
 
-        @extend .visuallyhidden;
+        @include sr-only;
 
         + label {
             position: relative;

src/scss/abstract/_m-sr-only.scss

@@ -0,0 +1,62 @@
+/*
+	Improved screen reader only CSS class
+    @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+	@author Gaël Poupard
+		@note Based on Yahoo!'s technique
+		@author Thierry Koblentz
+		@see https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
+	* 1.
+		@note `clip` is deprecated but works everywhere
+		@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
+	* 2.
+		@note `clip-path` is the future-proof version, but not very well supported yet
+		@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
+		@see http://caniuse.com/#search=clip-path
+		@author Yvain Liechti
+		@see https://twitter.com/ryuran78/status/778943389819604992
+	* 3.
+		@note preventing text to be condensed
+		author J. Renée Beach
+		@see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+		@note Drupal 8 goes with word-wrap: normal instead
+		@see https://www.drupal.org/node/2045151
+		@see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
+	* 4.
+		@note !important is important
+		@note Obviously you wanna hide something
+		@author Harry Roberts
+		@see https://csswizardry.com/2016/05/the-importance-of-important/
+*/
+
+@mixin sr-only($focusable: false) {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+    clip-path: inset(50%) !important; /* 2 */
+    white-space: nowrap !important; /* 3 */
+    border: 0 !important;
+
+    @if $focusable {
+        &:focus,
+        &:active {
+            width: auto !important;
+            height: auto !important;
+            margin: auto !important;
+            overflow: visible !important;
+            clip: auto !important;
+            clip-path: none !important;
+            white-space: normal !important;
+        }
+    }
+}
+
+.sr-only {
+    @include sr-only;
+}
+
+.sr-only-focusable {
+    @include sr-only(true);
+}

src/scss/base/_svg-icons.scss

@@ -15,7 +15,7 @@
 
 //display hidden text for icon only button
 .no-svg {
-    .visuallyhidden {
+    .sr-only {
         position: static;
         width: auto;
         height: auto;

src/scss/base/_visuallyhidden.scss

@@ -8,7 +8,6 @@ $entry-file-name: "editor";
 
 @import "base/fonts";
 @import "base/box-sizing";
-@import "base/visuallyhidden";
 @import "base/text";
 
 // Components

src/scss/editor.scss

@@ -10,7 +10,6 @@ $entry-file-name: "style";
 
 @import "base/fonts";
 @import "base/box-sizing";
-@import "base/visuallyhidden";
 @import "base/svg-icons";
 @import "base/text";
 @import "base/form";