Merge pull request #2331 from kevinparkerson/progress-bar-a11y-audit-fixes

Make ProgressBar read "{value}%" instead of just "{value}"

Author: interactivellama

components/progress-bar/__docs__/__snapshots__/storybook-stories.storyshot

@@ -21,6 +21,7 @@ exports[`DOM snapshots SLDSProgressBar Color 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={75}
+        aria-valuetext="Progress: 75%"
         className="slds-progress-bar"
         role="progressbar"
       >
@@ -63,6 +64,7 @@ exports[`DOM snapshots SLDSProgressBar Default 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={75}
+        aria-valuetext="Progress: 75%"
         className="slds-progress-bar"
         role="progressbar"
       >
@@ -118,9 +120,11 @@ exports[`DOM snapshots SLDSProgressBar Descriptive 1`] = `
         </span>
       </div>
       <div
+        aria-labelledby="progress-bar-label-setup-progress-bar"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={90}
+        aria-valuetext="Progress: 90%"
         className="slds-progress-bar"
         role="progressbar"
       >
@@ -166,6 +170,7 @@ exports[`DOM snapshots SLDSProgressBar Radius 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={75}
+        aria-valuetext="Progress: 75%"
         className="slds-progress-bar slds-progress-bar_circular"
         role="progressbar"
       >
@@ -211,6 +216,7 @@ exports[`DOM snapshots SLDSProgressBar Thickness 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={90}
+        aria-valuetext="Progress: 90%"
         className="slds-progress-bar slds-progress-bar_x-small"
         role="progressbar"
       >
@@ -248,6 +254,7 @@ exports[`DOM snapshots SLDSProgressBar Thickness 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={75}
+        aria-valuetext="Progress: 75%"
         className="slds-progress-bar slds-progress-bar_small"
         role="progressbar"
       >
@@ -285,6 +292,7 @@ exports[`DOM snapshots SLDSProgressBar Thickness 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={50}
+        aria-valuetext="Progress: 50%"
         className="slds-progress-bar slds-progress-bar_medium"
         role="progressbar"
       >
@@ -322,6 +330,7 @@ exports[`DOM snapshots SLDSProgressBar Thickness 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={25}
+        aria-valuetext="Progress: 25%"
         className="slds-progress-bar slds-progress-bar_large"
         role="progressbar"
       >
@@ -363,6 +372,7 @@ exports[`DOM snapshots SLDSProgressBar Vertical 1`] = `
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow={60}
+        aria-valuetext="Progress: 60%"
         className="slds-progress-bar slds-progress-bar_vertical"
         role="progressbar"
       >

components/progress-bar/index.jsx

@@ -136,9 +136,15 @@ class ProgressBar extends React.Component {
 				{this.props.orientation === 'horizontal' &&
 					this.getDescription({ labels })}
 				<div
+					aria-labelledby={
+						this.props.orientation === 'horizontal' && labels.label
+							? `progress-bar-label-${this.getId()}`
+							: undefined
+					}
 					aria-valuemin="0"
 					aria-valuemax="100"
 					aria-valuenow={this.props.value}
+					aria-valuetext={`${assistiveText.progress}: ${this.props.value}%`}
 					role="progressbar"
 					className={classNames(
 						'slds-progress-bar',

components/setup-assistant/__docs__/__snapshots__/storybook-stories.storyshot

@@ -1615,9 +1615,11 @@ exports[`DOM snapshots SLDSSetupAssistant In a Card 1`] = `
           </span>
         </div>
         <div
+          aria-labelledby="progress-bar-label-card-setup-assistant-progress-bar"
           aria-valuemax="100"
           aria-valuemin="0"
           aria-valuenow={50}
+          aria-valuetext="Progress: 50%"
           className="slds-progress-bar slds-progress-bar_circular"
           role="progressbar"
         >