Merge branch 'master' into chore/add-scss-test-setup

carbon-design-system · Feb 14, 2019 · a44bf1d · a44bf1d
2 parents 6f671f5 + 86740be
commit a44bf1d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/src/components/progress-indicator/progress-indicator.config.js b/src/components/progress-indicator/progress-indicator.config.js
@@ -22,12 +22,18 @@ const steps = [
     label: 'Second Step',
     overflow: true,
     overflowLabel: 'Overflow Ex. 1',
+    tooltipId: Math.random()
+      .toString(36)
+      .substr(2),
   },
   {
     state: 'incomplete',
     label: 'Third Step',
     overflow: true,
     overflowLabel: 'Overflow Ex. 2 Multi Line',
+    tooltipId: Math.random()
+      .toString(36)
+      .substr(2),
   },
   {
     state: 'incomplete',

diff --git a/src/components/progress-indicator/progress-indicator.hbs b/src/components/progress-indicator/progress-indicator.hbs
@@ -7,7 +7,7 @@
 
 <ul data-progress data-progress-current class="{{@root.prefix}}--progress {{#if vertical}}{{@root.prefix}}--progress--vertical{{/if}}">
   {{#each steps}}
-    <li class="{{@root.prefix}}--progress-step {{@root.prefix}}--progress-step--{{state}} {{#if disabled}} {{@root.prefix}}--progress-step--disabled {{/if}}" {{#if invalid}} data-invalid {{/if}}>
+    <li class="{{@root.prefix}}--progress-step {{@root.prefix}}--progress-step--{{state}} {{#if disabled}} {{@root.prefix}}--progress-step--disabled {{/if}}" {{#if invalid}} data-invalid {{/if}} {{#if disabled}} aria-disabled="true" {{/if}}>
       {{#is state "complete"}}
         {{carbon-icon 'CheckmarkOutline16'}}
       {{/is}}
@@ -36,7 +36,7 @@
           </svg>
         {{/if}}
       {{/is}}
-      <p tabindex="0" class="{{@root.prefix}}--progress-label" {{#if ../componentsX}} aria-describedby="label-tooltip" {{/if}}>
+      <p tabindex="0" class="{{@root.prefix}}--progress-label" {{#if ../componentsX}} {{#if overflow}} aria-describedby="label-tooltip{{tooltipId}}" {{/if}} {{/if}}>
         {{#if ../componentsX}}
           {{#if overflow}}
             {{#if ../vertical}}
@@ -52,7 +52,7 @@
         {{/if}}
       </p>
       {{#if ../componentsX}}
-        <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
+        <div id="label-tooltip{{tooltipId}}" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
           <span class="{{@root.prefix}}--tooltip__caret"></span>
           <p class="{{@root.prefix}}--tooltip__text">{{overflowLabel}}</p>
         </div>

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>