@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.50

package/src/components/Popover/Popover.tsx

@@ -48,8 +48,8 @@ export interface PopoverProps {
   alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
   /** The duration of the CSS fade transition animation. */
   animationDuration?: number;
-  /** The element to append the popover to. Defaults to "document.body". */
-  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement);
+  /** The element to append the popover to. Defaults to "inline". */
+  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
   /** Accessible label for the popover, required when header is not present. */
   'aria-label'?: string;
   /**
@@ -60,11 +60,18 @@ export interface PopoverProps {
    */
   bodyContent: React.ReactNode | ((hide: () => void) => React.ReactNode);
   /**
-   * The reference element to which the popover is relatively placed to. If you cannot wrap
-   * the reference with the Popover, you can use the reference prop instead.
+   * The trigger reference element to which the popover is relatively placed to. If you cannot wrap
+   * the element with the Popover, you can use the triggerRef prop instead.
    * Usage: <Popover><Button>Reference</Button></Popover>
    */
   children?: ReactElement<any>;
+  /**
+   * The trigger reference element to which the popover is relatively placed to. If you can wrap the
+   * element with the popover, you can use the children prop instead, or both props together.
+   * When passed along with the trigger prop, the div element that wraps the trigger will be removed.
+   * Usage: <Popover triggerRef={() => document.getElementById('reference-element')} />
+   */
+  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** Additional classes added to the popover. */
   className?: string;
   /** Accessible label for the close button. */
@@ -184,12 +191,6 @@ export interface PopoverProps {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /**
-   * The reference element to which the popover is relatively placed to. If you can wrap the
-   * reference with the popover, you can use the children prop instead.
-   * Usage: <Popover reference={() => document.getElementById('reference-element')} />
-   */
-  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /**
    * Callback function that is only invoked when isVisible is also controlled. Called when the
    * popover close button is clicked, the enter key was used on it, or the escape key is used.
@@ -232,7 +233,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   alertSeverityVariant,
   alertSeverityScreenReaderText,
   footerContent = null,
-  appendTo = () => document.body,
+  appendTo = 'inline',
   hideOnOutsideClick = true,
   onHide = (): void => null,
   onHidden = (): void => null,
@@ -262,7 +263,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   animationDuration = 300,
   id,
   withFocusTrap: propWithFocusTrap,
-  reference,
+  triggerRef,
   hasNoPadding = false,
   hasAutoWidth = false,
   ...rest
@@ -277,6 +278,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
 
   React.useEffect(() => {
     onMount();
@@ -389,6 +391,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   };
   const content = (
     <FocusTrap
+      ref={popoverRef}
       active={focusTrapActive}
       focusTrapOptions={{
         returnFocusOnDeactivate: true,
@@ -458,9 +461,10 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
     <PopoverContext.Provider value={{ headerComponent }}>
       <Popper
         trigger={children}
-        reference={reference}
+        triggerRef={triggerRef}
         popper={content}
-        popperMatchesTriggerWidth={false}
+        popperRef={popoverRef}
+        minWidth="revert"
         appendTo={appendTo}
         isVisible={visible}
         positionModifiers={positionModifiers}

package/src/components/Popover/PopoverCloseButton.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
@@ -6,9 +8,11 @@ export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps
   onClose = () => undefined as void,
   ...props
 }: PopoverCloseButtonProps) => (
-  <Button onClick={onClose} variant="plain" aria-label {...props} style={{ pointerEvents: 'auto' }}>
-    <TimesIcon />
-  </Button>
+  <div className={css(styles.popoverClose)}>
+    <Button onClick={onClose} variant="plain" aria-label {...props} style={{ pointerEvents: 'auto' }}>
+      <TimesIcon />
+    </Button>
+  </div>
 );
 
 PopoverCloseButton.displayName = 'PopoverCloseButton';

package/src/components/Popover/PopoverHeader.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
-import { Title, TitleSizes } from '../Title';
 import { PopoverHeaderIcon } from './PopoverHeaderIcon';
 import { PopoverHeaderText } from './PopoverHeaderText';
 
@@ -31,23 +30,17 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
   id,
   alertSeverityScreenReaderText,
   ...props
-}: PopoverHeaderProps) => {
-  const HeadingLevel = titleHeadingLevel;
-
-  return icon || alertSeverityVariant ? (
-    <header className={css('pf-c-popover__header', className)} id={id} {...props}>
-      <HeadingLevel className={css(styles.popoverTitle, icon && styles.modifiers.icon)}>
-        {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
+}: PopoverHeaderProps) => (
+  <header className={css(styles.popoverHeader, className)} {...props}>
+    <div className={css(styles.popoverTitle)} id={id}>
+      {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
+      <PopoverHeaderText headingLevel={titleHeadingLevel}>
         {alertSeverityVariant && alertSeverityScreenReaderText && (
           <span className="pf-u-screen-reader">{alertSeverityScreenReaderText}</span>
         )}
-        <PopoverHeaderText>{children}</PopoverHeaderText>
-      </HeadingLevel>
-    </header>
-  ) : (
-    <Title headingLevel={titleHeadingLevel} size={TitleSizes.md} id={id} className={className} {...props}>
-      {children}
-    </Title>
-  );
-};
+        {children}
+      </PopoverHeaderText>
+    </div>
+  </header>
+);
 PopoverHeader.displayName = 'PopoverHeader';

package/src/components/Popover/PopoverHeaderText.tsx

@@ -7,15 +7,21 @@ export interface PopoverHeaderTextProps extends React.HTMLProps<HTMLDivElement>
   children: React.ReactNode;
   /** Class to be applied to the header text */
   className?: string;
+  /** Heading level of the header title */
+  headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const PopoverHeaderText: React.FunctionComponent<PopoverHeaderTextProps> = ({
   children,
   className,
+  headingLevel,
   ...props
-}: PopoverHeaderTextProps) => (
-  <span className={css(styles.popoverTitleText, className)} {...props}>
+}: PopoverHeaderTextProps) => {
+  const HeadingLevel = headingLevel;
+
+  return (
+  <HeadingLevel className={css(styles.popoverTitleText, className)} {...props}>
     {children}
-  </span>
-);
+  </HeadingLevel>);
+};
 PopoverHeaderText.displayName = 'PopoverHeaderText';

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap

@@ -2,29 +2,33 @@
 
 exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="string"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    style="pointer-events: auto;"
-    type="button"
+  <div
+    class="pf-c-popover__close"
   >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      style="vertical-align: -0.125em;"
-      viewBox="0 0 352 512"
-      width="1em"
+    <button
+      aria-disabled="false"
+      aria-label="string"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      style="pointer-events: auto;"
+      type="button"
     >
-      <path
-        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </div>
 </DocumentFragment>
 `;

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap

@@ -2,16 +2,21 @@
 
 exports[`PopoverHeader should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <h6
-    class="pf-c-title pf-m-md"
-    data-ouia-component-id="OUIA-Generated-Title-1"
-    data-ouia-component-type="PF4/Title"
-    data-ouia-safe="true"
-    id="string"
+  <header
+    class="pf-c-popover__header"
   >
-    <div>
-      ReactNode
+    <div
+      class="pf-c-popover__title"
+      id="string"
+    >
+      <h6
+        class="pf-c-popover__title-text"
+      >
+        <div>
+          ReactNode
+        </div>
+      </h6>
     </div>
-  </h6>
+  </header>
 </DocumentFragment>
 `;

package/src/components/Popover/__tests__/Popover.test.tsx

@@ -106,7 +106,6 @@ test('popover renders in strict mode', () => {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
           </div>
         }
-        removeFindDomNode
       >
         <div>Toggle Popover</div>
       </Popover>

package/src/components/Popover/examples/PopoverAdvanced.tsx

@@ -41,14 +41,14 @@ export const PopoverAdvanced: React.FunctionComponent = () => {
         <Checkbox
           label="Flip popover if the position falls outside the view"
           isChecked={keepInViewChecked}
-          onChange={handleKeepInViewChange}
+          onChange={(_event, checked) => handleKeepInViewChange(checked)}
           aria-label="Keep in view"
           id="popover-advanced-check-1"
         />
         <Checkbox
           label="Toggle popover from outside"
           isChecked={show}
-          onChange={handleProgrammaticChange}
+          onChange={(_event, checked) => handleProgrammaticChange(checked)}
           aria-label="Toggle popover from outside"
           id="popover-advanced-check-2"
         />

package/src/components/Popover/examples/PopoverReactRef.tsx

@@ -16,7 +16,7 @@ export const PopoverReactRef: React.FunctionComponent = () => {
           </div>
         }
         footerContent="Popover footer"
-        reference={popoverRef}
+        triggerRef={popoverRef}
       />
     </div>
   );

package/src/components/Popover/examples/PopoverSelectorRef.tsx

@@ -13,7 +13,7 @@ export const PopoverSelectorRef: React.FunctionComponent = () => (
         </div>
       }
       footerContent="Popover footer"
-      reference={() => document.getElementById('popover-selector') as HTMLButtonElement}
+      triggerRef={() => document.getElementById('popover-selector') as HTMLButtonElement}
     />
   </div>
 );

package/src/components/Progress/ProgressContainer.tsx

@@ -103,23 +103,26 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 
   return (
     <React.Fragment>
-      {tooltip ? (
-        <Tooltip position={tooltipPosition} content={tooltip} isVisible>
-          {Title}
-        </Tooltip>
-      ) : (
-        Title
+      {title &&
+        (tooltip ? (
+          <Tooltip position={tooltipPosition} content={tooltip} isVisible>
+            {Title}
+          </Tooltip>
+        ) : (
+          Title
+        ))}
+      {(measureLocation !== ProgressMeasureLocation.none || StatusIcon) && (
+        <div className={css(progressStyle.progressStatus)} aria-hidden="true">
+          {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
+            <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
+          )}
+          {StatusIcon && (
+            <span className={css(progressStyle.progressStatusIcon)}>
+              <StatusIcon />
+            </span>
+          )}
+        </div>
       )}
-      <div className={css(progressStyle.progressStatus)} aria-hidden="true">
-        {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
-          <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
-        )}
-        {variantToIcon.hasOwnProperty(variant) && (
-          <span className={css(progressStyle.progressStatusIcon)}>
-            <StatusIcon />
-          </span>
-        )}
-      </div>
       <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>

package/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap

@@ -6,11 +6,6 @@ exports[`Progress measure location inside 1`] = `
     class="pf-c-progress pf-m-inside pf-m-lg pf-m-singleline"
     id="inside-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="inside-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -43,11 +38,6 @@ exports[`Progress measure location inside and small should render large 1`] = `
     class="pf-c-progress pf-m-inside pf-m-lg pf-m-singleline"
     id="large-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="large-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -80,15 +70,6 @@ exports[`Progress measure location none 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="none-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="none-progress-description"
-    />
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__status"
-    />
     <div
       aria-valuemax="100"
       aria-valuemin="0"
@@ -115,11 +96,6 @@ exports[`Progress measure location outside 1`] = `
     class="pf-c-progress pf-m-outside pf-m-singleline"
     id="outside-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="outside-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -156,11 +132,6 @@ exports[`Progress measure location top 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="top-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="top-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -197,11 +168,6 @@ exports[`Progress size lg 1`] = `
     class="pf-c-progress pf-m-lg pf-m-singleline"
     id="lg-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="lg-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -238,11 +204,6 @@ exports[`Progress size md 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="md-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="md-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -279,11 +240,6 @@ exports[`Progress size sm 1`] = `
     class="pf-c-progress pf-m-sm pf-m-singleline"
     id="sm-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="sm-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -320,11 +276,6 @@ exports[`Progress variant danger 1`] = `
     class="pf-c-progress pf-m-danger pf-m-singleline"
     id="danger-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="danger-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -378,11 +329,6 @@ exports[`Progress variant success 1`] = `
     class="pf-c-progress pf-m-success pf-m-singleline"
     id="success-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="success-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -436,11 +382,6 @@ exports[`Progress variant warning 1`] = `
     class="pf-c-progress pf-m-warning pf-m-singleline"
     id="warning-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="warning-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -494,11 +435,6 @@ exports[`Progress with aria-valuetext 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="progress-aria-valuetext"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="progress-aria-valuetext-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -536,11 +472,6 @@ exports[`Simple progress 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="progress-simple-example"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="progress-simple-example-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -577,11 +508,6 @@ exports[`additional label 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="additional-label"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="additional-label-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -618,11 +544,6 @@ exports[`no value specified 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="no-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="no-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -659,11 +580,6 @@ exports[`value higher than maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="higher-max-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="higher-max-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -700,11 +616,6 @@ exports[`value lower than minValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="lower-min-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="lower-min-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -741,11 +652,6 @@ exports[`value scaled between minValue and maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-range-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-range-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -782,11 +688,6 @@ exports[`value scaled with maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-max-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-max-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -823,11 +724,6 @@ exports[`value scaled with minValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-min-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-min-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -6,6 +6,15 @@ import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
+export enum ProgressStepVariant {
+  default = 'default',
+  pending = 'pending',
+  success = 'success',
+  info = 'info',
+  danger = 'danger',
+  warning = 'warning'
+}
+
 export interface ProgressStepProps
   extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
   /** Content rendered inside the progress step. */
@@ -79,6 +88,8 @@ export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
         className
       )}
       aria-label={ariaLabel}
+      // CSS style `display: contents` gives this li a generic role, we need to override that
+      role="listitem"
       {...(isCurrent && { 'aria-current': 'step' })}
       {...props}
     >
@@ -91,7 +102,9 @@ export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
           id={titleId}
           ref={stepRef}
           {...(popoverRender && { type: 'button' })}
-          {...(props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })}
+          {...(props.id !== undefined &&
+            titleId !== undefined &&
+            popoverRender && { 'aria-labelledby': `${props.id} ${titleId}` })}
         >
           {children}
           {popoverRender && popoverRender(stepRef)}

package/src/components/ProgressStepper/ProgressStepper.tsx

@@ -14,6 +14,8 @@ export interface ProgressStepperProps
   isVertical?: boolean;
   /** Flag indicating the progress stepper should be rendered compactly. */
   isCompact?: boolean;
+  /** Adds an accessible label to the progress stepper. */
+  'aria-label'?: string;
 }
 
 export const ProgressStepper: React.FunctionComponent<ProgressStepperProps> = ({
@@ -22,6 +24,7 @@ export const ProgressStepper: React.FunctionComponent<ProgressStepperProps> = ({
   isCenterAligned,
   isVertical,
   isCompact,
+  'aria-label': ariaLabel,
   ...props
 }: ProgressStepperProps) => (
   <ol
@@ -32,6 +35,8 @@ export const ProgressStepper: React.FunctionComponent<ProgressStepperProps> = ({
       isCompact && styles.modifiers.compact,
       className
     )}
+    role="list"
+    aria-label={ariaLabel}
     {...props}
   >
     {children}