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

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/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"

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
 
 export const PopoverProgressStep = () => (
-  <ProgressStepper>
+  <ProgressStepper aria-label="Progress stepper with help popover">
     <ProgressStep
       variant="success"
       id="popover-step1"

package/src/components/SimpleList/SimpleList.tsx

@@ -76,7 +76,11 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
       >
         <div className={css(styles.simpleList, className)} {...props}>
           {isGrouped && children}
-          {!isGrouped && <ul aria-label={ariaLabel}>{children}</ul>}
+          {!isGrouped && (
+            <ul role="list" aria-label={ariaLabel}>
+              {children}
+            </ul>
+          )}
         </div>
       </SimpleListContext.Provider>
     );

package/src/components/SimpleList/SimpleListGroup.tsx

@@ -27,7 +27,7 @@ export const SimpleListGroup: React.FunctionComponent<SimpleListGroupProps> = ({
     <h2 id={id} className={css(styles.simpleListTitle, titleClassName)} aria-hidden="true">
       {title}
     </h2>
-    <ul className={css(className)} aria-labelledby={id}>
+    <ul className={css(className)} role="list" aria-labelledby={id}>
       {children}
     </ul>
   </section>

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListGroup.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
     <ul
       aria-labelledby="''"
       class="''"
+      role="list"
     >
       ReactNode
     </ul>

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

@@ -7,6 +7,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
   >
     <ul
       aria-label="This is a simple list"
+      role="list"
     >
       <li
         class=""
@@ -48,7 +49,9 @@ exports[`SimpleList renders content 1`] = `
   <div
     class="pf-c-simple-list"
   >
-    <ul>
+    <ul
+      role="list"
+    >
       <li
         class=""
       >
@@ -102,6 +105,7 @@ exports[`SimpleList renders grouped content 1`] = `
       <ul
         aria-labelledby=""
         class=""
+        role="list"
       >
         <li
           class=""

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, getDefaultNormalizer } from '@testing-library/react';
 import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
 
 jest.mock('../../Tooltip', () => ({
@@ -33,7 +33,9 @@ test('Renders component', () => {
 test('Renders with current date by default with default formatting', () => {
   render(<Timestamp />);
 
-  expect(screen.getByText(new Date().toLocaleString())).toBeInTheDocument();
+  expect(
+    screen.getByText(new Date().toLocaleString(), { normalizer: getDefaultNormalizer({ collapseWhitespace: false }) })
+  ).toBeInTheDocument();
 });
 
 test('Renders with correct datetime attribute with current date by default', () => {
@@ -42,7 +44,7 @@ test('Renders with correct datetime attribute with current date by default', ()
   // we want an ISO value without the ms to expect as the datetime value.
   const isoDateWithoutMS = new Date().toISOString().split('.')[0];
 
-  expect(screen.getByText(new Date().toLocaleString())).toHaveAttribute(
+  expect(screen.getByText(new Date().toLocaleString(), { normalizer: getDefaultNormalizer({ collapseWhitespace: false }) })).toHaveAttribute(
     'datetime',
     expect.stringMatching(isoDateWithoutMS)
   );

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

@@ -9,7 +9,7 @@ exports[`Matches snapshot 1`] = `
       class="pf-c-timestamp__text"
       datetime="2022-01-01T00:00:00.000Z"
     >
-      1/1/2022, 12:00:00 AM
+      1/1/2022, 12:00:00 AM
     </time>
   </span>
 </DocumentFragment>

package/src/components/Wizard/WizardNav.tsx

@@ -27,7 +27,11 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 }: WizardNavProps) => {
   const ouiaProps = useOUIAProps(WizardNav.displayName, ouiaId, ouiaSafe);
 
-  const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
+  const innerList = (
+    <ol className={css(styles.wizardNavList)} role="list">
+      {children}
+    </ol>
+  );
 
   if (returnList) {
     return innerList;
@@ -40,7 +44,9 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
       aria-labelledby={ariaLabelledBy}
       {...ouiaProps}
     >
-      <ol className={css(styles.wizardNavList)}>{children}</ol>
+      <ol className={css(styles.wizardNavList)} role="list">
+        {children}
+      </ol>
     </nav>
   );
 };

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = `
   >
     <ol
       class="pf-c-wizard__nav-list"
+      role="list"
     >
       any
     </ol>

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

@@ -100,6 +100,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         >
           <ol
             class="pf-c-wizard__nav-list"
+            role="list"
           >
             <li
               class="pf-c-wizard__nav-item"
@@ -154,6 +155,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               </button>
               <ol
                 class="pf-c-wizard__nav-list"
+                role="list"
               >
                 <li
                   class="pf-c-wizard__nav-item"
@@ -367,6 +369,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         >
           <ol
             class="pf-c-wizard__nav-list"
+            role="list"
           >
             <li
               class="pf-c-wizard__nav-item"
@@ -397,6 +400,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               </button>
               <ol
                 class="pf-c-wizard__nav-list"
+                role="list"
               >
                 <li
                   class="pf-c-wizard__nav-item"
@@ -571,6 +575,7 @@ exports[`Wizard bare wiz 1`] = `
         >
           <ol
             class="pf-c-wizard__nav-list"
+            role="list"
           >
             <li
               class="pf-c-wizard__nav-item"

package/src/next/components/Wizard/WizardNav.tsx

@@ -23,7 +23,11 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   isInnerList = false
 }: WizardNavProps) => {
   if (isInnerList) {
-    return <ol className={css(styles.wizardNavList)}>{children}</ol>;
+    return (
+      <ol className={css(styles.wizardNavList)} role="list">
+        {children}
+      </ol>
+    );
   }
 
   return (
@@ -32,7 +36,9 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
     >
-      <ol className={css(styles.wizardNavList)}>{children}</ol>
+      <ol className={css(styles.wizardNavList)} role="list">
+        {children}
+      </ol>
     </nav>
   );
 };