feat(selector-counter): Add .accessible-hide and also style the label…

… on the last example Since they lost some globally scoped styles
telus · Jan 18, 2018 · 2fbd048 · 2fbd048
1 parent 53073ce
commit 2fbd048
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/docs/scss/_examples.scss b/docs/scss/_examples.scss
@@ -31,3 +31,11 @@
   display: flex;
   height: 100%;
 }
+
+.docs_selcounter-label {
+  display: inline-block;
+  font-weight: 700;
+  color: $color-shark;
+  letter-spacing: -0.6px;
+  margin-bottom: 3px;
+}
diff --git a/src/old-components/SelectorCounter/SelectorCounter.jsx b/src/old-components/SelectorCounter/SelectorCounter.jsx
@@ -17,7 +17,7 @@ class SelectorCounter extends Component {
     this.handleIncrement = this.handleIncrement.bind(this)
     this.handleDecrement = this.handleDecrement.bind(this)
     this.state = {
-      value: props.defaultValue
+      value: props.defaultValue,
     }
   }
 
@@ -71,14 +71,14 @@ class SelectorCounter extends Component {
       invalid,
       max,
       min,
-      successful
+      successful,
     } = this.props
     const value = this.state.value
 
     const cssClasses = {
       'selector-counter--disabled': disabled,
       'selector-counter--error': invalid,
-      'selector-counter--successful': successful
+      'selector-counter--successful': successful,
     }
     /* eslint-disable */
     return (
@@ -87,7 +87,7 @@ class SelectorCounter extends Component {
           {`${contextPrefix} ${value} ${contextSuffix}`}
         </div>
         <input
-          ref={input => this.input = input}
+          ref={input => (this.input = input)}
           id={id}
           type="number"
           pattern="\d*"
@@ -112,11 +112,11 @@ class SelectorCounter extends Component {
           label={decrementorLabel}
           icon="caret-down"
           onClick={this.handleDecrement}
-          disabled={(disabled === true || value <= min)}
+          disabled={disabled === true || value <= min}
           aria-controls={id}
         />
       </div>
-    );
+    )
     /* eslint-enable */
   }
 }
@@ -179,7 +179,7 @@ SelectorCounter.propTypes = {
    *
    * Accessible text suffix for the change event announcement.
    */
-  contextSuffix: PropTypes.string
+  contextSuffix: PropTypes.string,
 }
 
 SelectorCounter.defaultProps = {
@@ -193,7 +193,7 @@ SelectorCounter.defaultProps = {
   invalid: false,
   successful: false,
   contextPrefix: '',
-  contextSuffix: ''
+  contextSuffix: '',
 }
 
 export default SelectorCounter
diff --git a/src/old-components/SelectorCounter/SelectorCounter.md b/src/old-components/SelectorCounter/SelectorCounter.md
@@ -75,7 +75,7 @@ const helperSuccess = successful? 'helper--success':'';
 
 <form onSubmit={handleSubmit}>
   <div className={`field ${fieldError} ${fieldSuccess}`}>
-    <label htmlFor="ex-selcounter">How many smartphone plans?</label>
+    <label htmlFor="ex-selcounter" className="docs_selcounter-label">How many smartphone plans?</label>
     <div id="ex-selcounter-desc">
       <Paragraph size="small">Instructions</Paragraph>
       <UnorderedList listStyle={listType}>

diff --git a/src/old-components/SelectorCounter/SelectorCounter.scss b/src/old-components/SelectorCounter/SelectorCounter.scss
@@ -135,3 +135,18 @@ input.selector-counter__value.selector-counter__value {
   width: 100%;
   transition: background-color 0.1s linear;
 }
+
+.accessible-hide {
+  display: block;
+  position: absolute !important;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+}