Fix: aria-label class not properly hidden (fixes #606) (#611)

Author: hanshillen

less/core/accessibility.less

@@ -3,32 +3,33 @@
 .component { position: relative; }
 .block { position: relative; }
 
-// jquery.a11y start
-// Invisible aria-labels
-// --------------------------------------------------
-.aria-label {
-  position: absolute !important;
-  &.relative {
-    position: relative !important;
-  }
-  left: 0 !important;
-  width: auto !important;
-  height: auto !important;
-  overflow: auto !important;
-  color: rgba(0,0,0,0) !important;
-  background: rgba(0,0,0,0) !important;
-  font-size: 1px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  line-height: normal !important;
-  z-index: 1;
+// Use to hide content visually while keeping it accessible to assistive technologies
+.visually-hidden {  
+  display: block;  
+  position: absolute !important;  
+  width: 1px !important;  
+  height: 1px !important;  
+  padding: 0 !important;  
+  margin: -1px !important;  
+  overflow: hidden !important;  
+  clip: rect(0, 0, 0, 0) !important;  
+  white-space: nowrap !important;  
+  border: 0 !important;  
 }
 
-// Force aria-labels to hide on hidden
-// --------------------------------------------------
-.aria-label.aria-hidden {
-  display: none !important;
-}
+.aria-label {  
+  .visually-hidden();  
+  pointer-events: none;  
+} 
+
+// Use to only display content when it's focused
+.aria-label-focusable, .visually-hidden-focusable {  
+  &:not(:focus):not(:focus-within) {  
+     .visually-hidden;  
+   }  
+ } 
+
+// jquery.a11y start
 
 // Hidden focus guard
 // --------------------------------------------------