fix(toggle): hide on/off test for screen readers

Fixes carbon-design-system#1794.
asudoh · Feb 13, 2019 · cfd75ca · cfd75ca
1 parent 84a6c82
commit cfd75ca
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/components/toggle/toggle--small.hbs b/src/components/toggle/toggle--small.hbs
@@ -8,30 +8,30 @@
 <div class="{{@root.prefix}}--form-item">
   <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle4" type="checkbox" aria-label="Label Name">
   <label class="{{@root.prefix}}--toggle__label" for="toggle4">
-    <span class="{{@root.prefix}}--toggle__text--left">Off</span>
+    <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
     <span class="{{@root.prefix}}--toggle__appearance">
       {{#unless componentsX}}
       <svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
         <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
       </svg>
       {{/unless}}
     </span>
-    <span class="{{@root.prefix}}--toggle__text--right">On</span>
+    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
   </label>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
   <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle5" type="checkbox" aria-label="Label Name"
     disabled>
   <label class="{{@root.prefix}}--toggle__label" for="toggle5">
-    <span class="{{@root.prefix}}--toggle__text--left">Off</span>
+    <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
     <span class="{{@root.prefix}}--toggle__appearance">
       {{#unless componentsX}}
       <svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
         <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
       </svg>
       {{/unless}}
     </span>
-    <span class="{{@root.prefix}}--toggle__text--right">On</span>
+    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
   </label>
 </div>
diff --git a/src/components/toggle/toggle.hbs b/src/components/toggle/toggle.hbs
@@ -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">Off</span>
+    <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">On</span>
+    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">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">Off</span>
+    <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">On</span>
+    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">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">Off</span>
+    <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">On</span>
+    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
   </label>
 </div>