@patternfly/react-core 5.0.0-alpha.26 → 5.0.0-alpha.27

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -34,7 +34,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   React.useEffect(() => {
     if (readFileData.length < currentFiles.length) {
       setStatusIcon('inProgress');
-    } else if (readFileData.every(file => file.loadResult === 'success')) {
+    } else if (readFileData.every((file) => file.loadResult === 'success')) {
       setStatusIcon('success');
     } else {
       setStatusIcon('danger');
@@ -44,13 +44,13 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {
     const newCurrentFiles = currentFiles.filter(
-      currentFile => !namesOfFilesToRemove.some(fileName => fileName === currentFile.name)
+      (currentFile) => !namesOfFilesToRemove.some((fileName) => fileName === currentFile.name)
     );
 
     setCurrentFiles(newCurrentFiles);
 
     const newReadFiles = readFileData.filter(
-      readFile => !namesOfFilesToRemove.some(fileName => fileName === readFile.fileName)
+      (readFile) => !namesOfFilesToRemove.some((fileName) => fileName === readFile.fileName)
     );
 
     setReadFileData(newReadFiles);
@@ -60,34 +60,34 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
    * only used in this example for demonstration purposes */
   const updateCurrentFiles = (files: File[]) => {
     if (fileUploadShouldFail) {
-      const corruptedFiles = files.map(file => ({ ...file, lastModified: ('foo' as unknown) as number }));
-      setCurrentFiles(prevFiles => [...prevFiles, ...corruptedFiles]);
+      const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number }));
+      setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles]);
     } else {
-      setCurrentFiles(prevFiles => [...prevFiles, ...files]);
+      setCurrentFiles((prevFiles) => [...prevFiles, ...files]);
     }
   };
 
   // callback that will be called by the react dropzone with the newly dropped file objects
   const handleFileDrop = (droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
-    const currentFileNames = currentFiles.map(file => file.name);
-    const reUploads = droppedFiles.filter(droppedFile => currentFileNames.includes(droppedFile.name));
+    const currentFileNames = currentFiles.map((file) => file.name);
+    const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name));
 
     /** this promise chain is needed because if the file removal is done at the same time as the file adding react
      * won't realize that the status items for the re-uploaded files needs to be re-rendered */
     Promise.resolve()
-      .then(() => removeFiles(reUploads.map(file => file.name)))
+      .then(() => removeFiles(reUploads.map((file) => file.name)))
       .then(() => updateCurrentFiles(droppedFiles));
   };
 
   // callback called by the status item when a file is successfully read with the built-in file reader
   const handleReadSuccess = (data: string, file: File) => {
-    setReadFileData(prevReadFiles => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);
+    setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);
   };
 
   // callback called by the status item when a file encounters an error while being read with the built-in file reader
   const handleReadFail = (error: DOMException, file: File) => {
-    setReadFileData(prevReadFiles => [
+    setReadFileData((prevReadFiles) => [
       ...prevReadFiles,
       { loadError: error, fileName: file.name, loadResult: 'danger' }
     ]);
@@ -95,7 +95,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
 
   // add helper text to a status item showing any error encountered during the file reading process
   const createHelperText = (file: File) => {
-    const fileResult = readFileData.find(readFile => readFile.fileName === file.name);
+    const fileResult = readFileData.find((readFile) => readFile.fileName === file.name);
     if (fileResult?.loadError) {
       return (
         <HelperText isLiveRegion>
@@ -105,7 +105,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     }
   };
 
-  const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
+  const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length;
 
   return (
     <>
@@ -131,8 +131,9 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
           <MultipleFileUploadStatus
             statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
             statusToggleIcon={statusIcon}
+            aria-label="Current uploads"
           >
-            {currentFiles.map(file => (
+            {currentFiles.map((file) => (
               <MultipleFileUploadStatusItem
                 file={file}
                 key={file.name}

package/src/components/Nav/NavExpandable.tsx

@@ -82,7 +82,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
     if (this.props.onExpand) {
       this.props.onExpand(e, !expandedState);
     } else {
-      this.setState(prevState => ({ expandedState: !prevState.expandedState }));
+      this.setState((prevState) => ({ expandedState: !prevState.expandedState }));
       const { groupId } = this.props;
       onToggle(e, groupId, !expandedState);
     }
@@ -112,7 +112,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
 
     return (
       <NavContext.Consumer>
-        {context => (
+        {(context) => (
           <li
             className={css(
               styles.navItem,
@@ -129,7 +129,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
                 <button
                   className={styles.navLink}
                   id={srText ? null : this.id}
-                  onClick={e => this.onExpand(e, context.onToggle)}
+                  onClick={(e) => this.onExpand(e, context.onToggle)}
                   aria-expanded={expandedState}
                   tabIndex={isNavOpen ? null : -1}
                   {...buttonProps}
@@ -149,7 +149,9 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
                   {srText}
                 </h2>
               )}
-              <ul className={css(styles.navList)}>{children}</ul>
+              <ul className={css(styles.navList)} role="list">
+                {children}
+              </ul>
             </section>
           </li>
         )}

package/src/components/Nav/NavGroup.tsx

@@ -35,7 +35,9 @@ export const NavGroup: React.FunctionComponent<NavGroupProps> = ({
           {title}
         </h2>
       )}
-      <ul className={css(styles.navList, className)}>{children}</ul>
+      <ul className={css(styles.navList, className)} role="list">
+        {children}
+      </ul>
     </section>
   );
 };

package/src/components/Nav/NavList.tsx

@@ -125,6 +125,7 @@ export class NavList extends React.Component<NavListProps> {
                   ref={this.navList}
                   className={css(styles.navList, className)}
                   onScroll={this.handleScrollButtons}
+                  role="list"
                   {...props}
                 >
                   {children}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       </h2>
       <ul
         class="pf-c-nav__list"
+        role="list"
       />
     </section>
   </li>

package/src/components/Nav/__tests__/Generated/__snapshots__/NavGroup.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`NavGroup should match snapshot (auto-generated) 1`] = `
     </h2>
     <ul
       class="pf-c-nav__list ''"
+      role="list"
     >
       ReactNode
     </ul>

package/src/components/Nav/__tests__/Generated/__snapshots__/NavList.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`NavList should match snapshot 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-nav__list"
+    role="list"
   >
     ReactNode
   </ul>

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

@@ -11,6 +11,7 @@ exports[`Nav Dark Nav List 1`] = `
   >
     <ul
       class="pf-c-nav__list test-nav-list-class"
+      role="list"
     >
       <li
         class="pf-c-nav__item test-nav-item-class"
@@ -80,6 +81,7 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
   >
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item"
@@ -149,6 +151,7 @@ exports[`Nav Default Nav List 1`] = `
   >
     <ul
       class="pf-c-nav__list test-nav-list-class"
+      role="list"
     >
       <li
         class="pf-c-nav__item test-nav-item-class"
@@ -218,6 +221,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
   >
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item pf-m-expandable expandable-group"
@@ -260,6 +264,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
         >
           <ul
             class="pf-c-nav__list"
+            role="list"
           >
             <li
               class="pf-c-nav__item"
@@ -332,6 +337,7 @@ exports[`Nav Expandable Nav List 1`] = `
   >
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item pf-m-expandable"
@@ -374,6 +380,7 @@ exports[`Nav Expandable Nav List 1`] = `
         >
           <ul
             class="pf-c-nav__list"
+            role="list"
           >
             <li
               class="pf-c-nav__item"
@@ -446,6 +453,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
   >
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item pf-m-expandable"
@@ -493,6 +501,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           </h2>
           <ul
             class="pf-c-nav__list"
+            role="list"
           >
             <li
               class="pf-c-nav__item"
@@ -584,6 +593,7 @@ exports[`Nav Horizontal Nav List 1`] = `
     </button>
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item"
@@ -691,6 +701,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
     </button>
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item"
@@ -789,9 +800,11 @@ exports[`Nav Nav Grouped List 1`] = `
       </h2>
       <ul
         class="pf-c-nav__list"
+        role="list"
       >
         <ul
           class="pf-c-nav__list"
+          role="list"
         >
           <li
             class="pf-c-nav__item"
@@ -860,9 +873,11 @@ exports[`Nav Nav Grouped List 1`] = `
       </h2>
       <ul
         class="pf-c-nav__list"
+        role="list"
       >
         <ul
           class="pf-c-nav__list"
+          role="list"
         >
           <li
             class="pf-c-nav__item"
@@ -953,6 +968,7 @@ exports[`Nav Nav List with custom item nodes 1`] = `
     </button>
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item test-nav-item-class"
@@ -1020,6 +1036,7 @@ exports[`Nav Nav List with flyout 1`] = `
     </button>
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item pf-m-flyout test-nav-item-class"
@@ -1100,6 +1117,7 @@ exports[`Nav Renders nav list in strict mode 1`] = `
   >
     <ul
       class="pf-c-nav__list test-nav-list-class"
+      role="list"
     >
       <li
         class="pf-c-nav__item test-nav-item-class"
@@ -1188,6 +1206,7 @@ exports[`Nav Tertiary Nav List 1`] = `
     </button>
     <ul
       class="pf-c-nav__list"
+      role="list"
     >
       <li
         class="pf-c-nav__item"

package/src/components/NotificationDrawer/NotificationDrawerList.tsx

@@ -9,15 +9,24 @@ export interface NotificationDrawerListProps extends React.HTMLProps<HTMLUListEl
   className?: string;
   /**  Adds styling to the notification drawer list to indicate expand/hide state */
   isHidden?: boolean;
+  /** Adds an accessible label to the notification drawer list. */
+  'aria-label'?: string;
 }
 
 export const NotificationDrawerList: React.FunctionComponent<NotificationDrawerListProps> = ({
   children,
   className = '',
   isHidden = false,
+  'aria-label': ariaLabel,
   ...props
 }: NotificationDrawerListProps) => (
-  <ul {...props} className={css('pf-c-notification-drawer__list', className)} hidden={isHidden}>
+  <ul
+    {...props}
+    className={css('pf-c-notification-drawer__list', className)}
+    hidden={isHidden}
+    role="list"
+    aria-label={ariaLabel}
+  >
     {children}
   </ul>
 );

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`NotificationDrawerList drawer list with hidden applied  1`] = `
   <ul
     class="pf-c-notification-drawer__list"
     hidden=""
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -13,6 +14,7 @@ exports[`NotificationDrawerList renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-notification-drawer__list"
+    role="list"
   />
 </DocumentFragment>
 `;

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -57,7 +57,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
         />
       </NotificationDrawerHeader>
       <NotificationDrawerBody>
-        <NotificationDrawerList>
+        <NotificationDrawerList aria-label="Notifications in the basic example">
           <NotificationDrawerListItem variant="info">
             <NotificationDrawerListItemHeader
               variant="info"

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -94,7 +94,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
             count={2}
             onExpand={toggleFirstDrawer}
           >
-            <NotificationDrawerList isHidden={!firstGroupExpanded}>
+            <NotificationDrawerList isHidden={!firstGroupExpanded} aria-label="Notifications in the first group">
               <NotificationDrawerListItem variant="info">
                 <NotificationDrawerListItemHeader
                   variant="info"
@@ -205,7 +205,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
             count={2}
             onExpand={toggleSecondDrawer}
           >
-            <NotificationDrawerList isHidden={!secondGroupExpanded}>
+            <NotificationDrawerList isHidden={!secondGroupExpanded} aria-label="Notifications in the second group">
               <NotificationDrawerListItem variant="info">
                 <NotificationDrawerListItemHeader
                   variant="info"
@@ -317,7 +317,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
             onExpand={toggleThirdDrawer}
             truncateTitle={1}
           >
-            <NotificationDrawerList isHidden={!thirdGroupExpanded}>
+            <NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label="Notifications in the third group">
               <EmptyState variant={EmptyStateVariant.full}>
                 <EmptyStateIcon icon={SearchIcon} />
                 <Title headingLevel="h2" size="lg">

package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx

@@ -58,7 +58,10 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
             isRead={true}
             onExpand={toggleFirstDrawer}
           >
-            <NotificationDrawerList isHidden={!firstGroupExpanded}>
+            <NotificationDrawerList
+              isHidden={!firstGroupExpanded}
+              aria-label="Notifications in the first lightweight group"
+            >
               <NotificationDrawerListItem variant="info">
                 <NotificationDrawerListItemHeader
                   variant="info"
@@ -109,7 +112,10 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
             isRead={true}
             onExpand={toggleSecondDrawer}
           >
-            <NotificationDrawerList isHidden={!secondGroupExpanded}>
+            <NotificationDrawerList
+              isHidden={!secondGroupExpanded}
+              aria-label="Notifications in the second lightweight group"
+            >
               <NotificationDrawerListItem variant="info">
                 <NotificationDrawerListItemHeader
                   variant="info"
@@ -162,7 +168,10 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
             isRead={true}
             onExpand={toggleThirdDrawer}
           >
-            <NotificationDrawerList isHidden={!thirdGroupExpanded}>
+            <NotificationDrawerList
+              isHidden={!thirdGroupExpanded}
+              aria-label="Notifications in the third lightweight group"
+            >
               <EmptyState variant={EmptyStateVariant.full}>
                 <EmptyStateIcon icon={SearchIcon} />
                 <Title headingLevel="h2" size="lg">

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

@@ -176,6 +176,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
         >
           <ol
             class="pf-c-breadcrumb__list"
+            role="list"
           >
             <li
               class="pf-c-breadcrumb__item"
@@ -343,6 +344,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
         >
           <ol
             class="pf-c-breadcrumb__list"
+            role="list"
           >
             <li
               class="pf-c-breadcrumb__item"
@@ -513,6 +515,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
           >
             <ol
               class="pf-c-breadcrumb__list"
+              role="list"
             >
               <li
                 class="pf-c-breadcrumb__item"
@@ -635,6 +638,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
             </button>
             <ul
               class="pf-c-nav__list"
+              role="list"
             >
               <li
                 class="pf-c-nav__item"
@@ -821,6 +825,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
             </button>
             <ul
               class="pf-c-nav__list"
+              role="list"
             >
               <li
                 class="pf-c-nav__item"
@@ -920,6 +925,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
             >
               <ol
                 class="pf-c-breadcrumb__list"
+                role="list"
               >
                 <li
                   class="pf-c-breadcrumb__item"
@@ -1108,6 +1114,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
           </button>
           <ul
             class="pf-c-nav__list"
+            role="list"
           >
             <li
               class="pf-c-nav__item"
@@ -1284,6 +1291,7 @@ exports[`Page Check page to verify skip to content points to main content region
         >
           <ol
             class="pf-c-breadcrumb__list"
+            role="list"
           >
             <li
               class="pf-c-breadcrumb__item"
@@ -1512,6 +1520,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
         >
           <ol
             class="pf-c-breadcrumb__list"
+            role="list"
           >
             <li
               class="pf-c-breadcrumb__item"
@@ -1679,6 +1688,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
         >
           <ol
             class="pf-c-breadcrumb__list"
+            role="list"
           >
             <li
               class="pf-c-breadcrumb__item"
@@ -1846,6 +1856,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
         >
           <ol
             class="pf-c-breadcrumb__list"
+            role="list"
           >
             <li
               class="pf-c-breadcrumb__item"
@@ -2013,6 +2024,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
         >
           <ol
             class="pf-c-breadcrumb__list"
+            role="list"
           >
             <li
               class="pf-c-breadcrumb__item"

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -88,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}
     >

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}

package/src/components/ProgressStepper/__tests__/__snapshots__/ProgressStep.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <li
     class="pf-c-progress-stepper__step"
+    role="listitem"
   >
     <div
       class="pf-c-progress-stepper__step-connector"

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

@@ -4,6 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <ol
     class="pf-c-progress-stepper"
+    role="list"
   >
     Test
   </ol>

package/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
 
 export const ProgressStepperBasic: React.FunctionComponent = () => (
-  <ProgressStepper>
+  <ProgressStepper aria-label="Basic progress stepper">
     <ProgressStep
       variant="success"
       id="basic-step1"

package/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
 
 export const ProgressStepperBasicFailure: React.FunctionComponent = () => (
-  <ProgressStepper>
+  <ProgressStepper aria-label="Basic progress stepper with failure">
     <ProgressStep
       variant="success"
       id="basic-with-failure-step1"

package/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
 
 export const ProgressStepperBasicIssue: React.FunctionComponent = () => (
-  <ProgressStepper>
+  <ProgressStepper aria-label="Basic progress stepper with issue">
     <ProgressStep
       variant="success"
       id="basic-with-issue-step1"

package/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx

@@ -24,7 +24,11 @@ export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () =>
         name="toggle-center"
       />
       <br />
-      <ProgressStepper isVertical={isVertical} isCenterAligned={isCenterAligned}>
+      <ProgressStepper
+        isVertical={isVertical}
+        isCenterAligned={isCenterAligned}
+        aria-label="Basic progress stepper with alignment"
+      >
         <ProgressStep
           variant="success"
           description="This is the first thing to happen"

package/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
 
 export const ProgressStepperBasicWithDescription: React.FunctionComponent = () => (
-  <ProgressStepper>
+  <ProgressStepper aria-label="Basic progress stepper with description">
     <ProgressStep
       variant="success"
       description="This is the first thing to happen"

package/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx

@@ -6,7 +6,7 @@ export const ProgressStepperCompact: React.FunctionComponent = () => {
   const [isCenterAligned, setIsCenterAligned] = React.useState(false);
 
   return (
-    <React.Fragment>
+    <React.Fragment aria-label="Compact progress stepper">
       <Checkbox
         label="Vertical alignment"
         isChecked={isVertical}

package/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx

@@ -4,7 +4,7 @@ import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-i
 import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 
 export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
-  <ProgressStepper>
+  <ProgressStepper aria-label="Progress stepper with custom icons">
     <ProgressStep
       variant="success"
       id="custom-step1"