feat(progress-indicator): adds hidden span to announce state of compl…

…etion (#5125) * fix(progress-indicator): adds hidden span to announce completion state * fix(progress-indicator): update tests and build * feat(progress-indicator): add translatewithid prop for translations Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Akira Sudoh <[email protected]>
carbon-design-system · Jan 24, 2020 · 99fde8e · 99fde8e
1 parent ef94af7
commit 99fde8e
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 19 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -20453,6 +20453,7 @@ Progress indicator styles
     margin-left: $carbon--spacing-06;
     margin-top: rem(28px);
     color: $text-01;
+    text-align: start;
   }
 
   //CURRENT STYLING
@@ -20489,6 +20490,7 @@ Progress indicator styles
 
   //interactive button
   .#{$prefix}--progress-step-button {
+    @include button-reset();
     display: flex;
   }
 

diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -132,6 +132,7 @@
     margin-left: $carbon--spacing-06;
     margin-top: rem(28px);
     color: $text-01;
+    text-align: start;
   }
 
   //CURRENT STYLING
@@ -168,6 +169,7 @@
 
   //interactive button
   .#{$prefix}--progress-step-button {
+    @include button-reset();
     display: flex;
   }
 

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-test.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-test.js
@@ -88,7 +88,7 @@ describe('ProgressIndicator', () => {
       mountedList
         .find(ProgressStep)
         .at(0)
-        .find('[role="button"]')
+        .find('button')
         .simulate('click');
       expect(mockOnChange).toHaveBeenCalledWith(0);
     });

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -13,21 +13,33 @@ import { CheckmarkOutline16, Warning16 } from '@carbon/icons-react';
 import { keys, matches } from '../../internal/keyboard';
 
 const { prefix } = settings;
+
 const defaultRenderLabel = props => <p {...props} />;
-export const ProgressStep = ({ ...props }) => {
-  const {
-    label,
-    description,
-    className,
-    current,
-    complete,
-    invalid,
-    secondaryLabel,
-    disabled,
-    onClick,
-    renderLabel: ProgressStepLabel,
-  } = props;
 
+const defaultTranslations = {
+  'carbon.progress-step.complete': 'Complete',
+  'carbon.progress-step.incomplete': 'Incomplete',
+  'carbon.progress-step.current': 'Current',
+  'carbon.progress-step.invalid': 'Invalid',
+};
+
+function translateWithId(messageId) {
+  return defaultTranslations[messageId];
+}
+
+export function ProgressStep({
+  label,
+  description,
+  className,
+  current,
+  complete,
+  invalid,
+  secondaryLabel,
+  disabled,
+  onClick,
+  renderLabel: ProgressStepLabel,
+  translateWithId: t,
+}) {
   const classes = classnames({
     [`${prefix}--progress-step`]: true,
     [`${prefix}--progress-step--current`]: current,
@@ -70,16 +82,31 @@ export const ProgressStep = ({ ...props }) => {
     );
   };
 
+  let message = t('carbon.progress-step.incomplete');
+
+  if (current) {
+    message = t('carbon.progress-step.current');
+  }
+
+  if (complete) {
+    message = t('carbon.progress-step.complete');
+  }
+
+  if (invalid) {
+    message = t('carbon.progress-step.invalid');
+  }
+
   return (
-    <li className={classes} aria-disabled={disabled}>
-      <div
+    <li className={classes}>
+      <button
         className={classnames(`${prefix}--progress-step-button`, {
           [`${prefix}--progress-step-button--unclickable`]: !onClick || current,
         })}
-        role="button"
+        aria-disabled={disabled}
         tabIndex={!current && onClick ? 0 : -1}
         onClick={!current ? onClick : undefined}
         onKeyDown={handleKeyDown}>
+        <span className={`${prefix}--assistive-text`}>{message}</span>
         <SVGIcon
           complete={complete}
           current={current}
@@ -94,10 +121,10 @@ export const ProgressStep = ({ ...props }) => {
           <p className={`${prefix}--progress-optional`}>{secondaryLabel}</p>
         ) : null}
         <span className={`${prefix}--progress-line`} />
-      </div>
+      </button>
     </li>
   );
-};
+}
 
 ProgressStep.propTypes = {
   /**
@@ -165,10 +192,17 @@ ProgressStep.propTypes = {
    * A callback called if the step is clicked or the enter key is pressed
    */
   onClick: PropTypes.func,
+
+  /**
+   * Optional method that takes in a message id and returns an
+   * internationalized string.
+   */
+  translateWithId: PropTypes.func,
 };
 
 ProgressStep.defaultProps = {
   renderLabel: defaultRenderLabel,
+  translateWithId,
 };
 
 export class ProgressIndicator extends Component {