fix(common): Port accessible hide styles from JS to CSS (Workday#310)

* fix(common): Ports accessible hide code from js to css

Code to make text screen reader only was added to js common but was not mirrored in the css. This adds a new class to the common css

* Update readme

* Change word-wrap: normal to white-space: nowrap

* make accessible-hide available by mixin

Author: vibdev

Diff for: modules/common/css/README.md

@@ -38,4 +38,8 @@ or
 
 ## Forms
 
-`forms` has shared styles for inputs
+`forms` has shared styles for inputs.
+
+## Accessibility
+
+`accessibility` has focus for inputs and method to provide screen reader only content.

Diff for: modules/common/css/lib/accessibility.scss

@@ -21,3 +21,20 @@
     outline: none;
   }
 }
+
+@mixin wdc-accessible-hide() {
+  clip: 'rect(1px, 1px, 1px, 1px)'; // Deprecated but still used by most browsers, clip-path will be taking its place soon.
+  clip-path: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)';
+  position: 'absolute';
+  overflow: 'hidden';
+  white-space: 'nowrap';
+  height: '1px';
+  width: '1px';
+  margin: '-1px';
+  padding: 0;
+  border: 0;
+}
+
+.wdc-accessible-hide {
+  @include wdc-accessible-hide();
+}

Diff for: modules/common/react/lib/styles/accessibleHide.ts

@@ -9,7 +9,7 @@ const accessibleHide: CSSObject = {
   clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
   position: 'absolute',
   overflow: 'hidden',
-  wordWrap: 'normal',
+  whiteSpace: 'nowrap',
   height: '1px',
   width: '1px',
   margin: '-1px',