Merge pull request #281 from edx/talbs/update-text-sr-utility

FEDX-19: Updating a11y-based "sr" Utilities
edx · Feb 1, 2016 · 2417377 · 2417377
2 parents 3573048 + 0d3ece3
commit 2417377
Show file tree

Hide file tree

Showing 16 changed files with 71 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ Nothing yet
 
 - - -
 
+## 0.9.2 (2016-02-01)
+* modernizing '%a11y-hide' and 'sr-only' utilities
+
+- - -
+
 ## 0.9.1 (2016-02-01)
 * introduce $pattern-library-path variable
 * FIX - always refer to edx-icons via $edx-icons-font-path

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "edx-pattern-library",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "authors": [
     "edX UX Team <[email protected]>"
   ],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "edx-pattern-library",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "author": "edX UX Team <[email protected]>",
   "license": "Apache-2.0",
   "description": "The (working) Visual, UI, and Front End Styleguide for edX Apps",

diff --git a/pattern-library/css/edx-pattern-library-ltr.css b/pattern-library/css/edx-pattern-library-ltr.css
diff --git a/pattern-library/css/edx-pattern-library-ltr.min.css b/pattern-library/css/edx-pattern-library-ltr.min.css
diff --git a/pattern-library/css/edx-pattern-library-rtl.css b/pattern-library/css/edx-pattern-library-rtl.css
diff --git a/pattern-library/css/edx-pattern-library-rtl.min.css b/pattern-library/css/edx-pattern-library-rtl.min.css
diff --git a/pattern-library/sass/global/_helpers.scss b/pattern-library/sass/global/_helpers.scss
@@ -54,14 +54,18 @@
 
 // accessibility
 %a11y-hide {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
+    // clip has been deprecated but is still supported
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
     position: absolute;
+    margin: -1px;
+    height: 1px;
     width: 1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    // ensure there are spaces in sr text
+    word-wrap: normal;
 }
 
 %a11y-hide-image-text {

diff --git a/public/css/demo-ltr.css b/public/css/demo-ltr.css
diff --git a/public/css/demo-ltr.min.css b/public/css/demo-ltr.min.css
diff --git a/public/css/demo-rtl.css b/public/css/demo-rtl.css
diff --git a/public/css/demo-rtl.min.css b/public/css/demo-rtl.min.css
diff --git a/public/css/main-ltr.css b/public/css/main-ltr.css
diff --git a/public/css/main-ltr.min.css b/public/css/main-ltr.min.css
diff --git a/public/css/main-rtl.css b/public/css/main-rtl.css
diff --git a/public/css/main-rtl.min.css b/public/css/main-rtl.min.css