fix(toggle): allow screen readers to announce labels

carbon-design-system · May 28, 2019 · e8d2c35 · e8d2c35
1 parent 536fcf1
commit e8d2c35
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 19 deletions.
diff --git a/packages/components/src/components/toggle/toggle.hbs b/packages/components/src/components/toggle/toggle.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -8,9 +8,9 @@
 <div class="{{@root.prefix}}--form-item">
   <input class="{{@root.prefix}}--toggle" id="toggle1" type="checkbox">
   <label class="{{@root.prefix}}--toggle__label" for="toggle1">
-    <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
+    <span class="{{@root.prefix}}--toggle__text--left">Off</span>
     <span class="{{@root.prefix}}--toggle__appearance"></span>
-    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
+    <span class="{{@root.prefix}}--toggle__text--right">On</span>
   </label>
 </div>
 
@@ -19,18 +19,18 @@
   <div class="{{@root.prefix}}--form-item">
     <input class="{{@root.prefix}}--toggle" id="toggle2" type="checkbox">
     <label class="{{@root.prefix}}--toggle__label" for="toggle2">
-    <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="{{@root.prefix}}--toggle__appearance"></span>
-    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
-  </label>
+      <span class="{{@root.prefix}}--toggle__text--left">Off</span>
+      <span class="{{@root.prefix}}--toggle__appearance"></span>
+      <span class="{{@root.prefix}}--toggle__text--right">On</span>
+    </label>
   </div>
 </fieldset>
 
 <div class="{{@root.prefix}}--form-item">
   <input class="{{@root.prefix}}--toggle" id="toggle3" type="checkbox" disabled>
   <label class="{{@root.prefix}}--toggle__label" for="toggle3">
-    <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
+    <span class="{{@root.prefix}}--toggle__text--left">Off</span>
     <span class="{{@root.prefix}}--toggle__appearance"></span>
-    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
+    <span class="{{@root.prefix}}--toggle__text--right">On</span>
   </label>
 </div>
diff --git a/packages/react/src/components/Toggle/Toggle.js b/packages/react/src/components/Toggle/Toggle.js
@@ -124,17 +124,9 @@ class Toggle extends React.Component {
           />
 
           <label className={`${prefix}--toggle__label`} htmlFor={id}>
-            <span
-              className={`${prefix}--toggle__text--left`}
-              aria-hidden="true">
-              {labelA}
-            </span>
+            <span className={`${prefix}--toggle__text--left`}>{labelA}</span>
             <span className={`${prefix}--toggle__appearance`} />
-            <span
-              className={`${prefix}--toggle__text--right`}
-              aria-hidden="true">
-              {labelB}
-            </span>
+            <span className={`${prefix}--toggle__text--right`}>{labelB}</span>
           </label>
         </div>
       </>