@patternfly/react-core 6.3.1-prerelease.1 → 6.3.1-prerelease.10

package/src/components/Progress/examples/Progress.md

@@ -8,75 +8,119 @@ propComponents: ['Progress']
 import { useState } from 'react';
 
 ## Examples
+
 ### Basic
+
 ```ts file="./ProgressBasic.tsx"
+
 ```
 
 ### Small
+
 ```ts file="./ProgressSmall.tsx"
+
 ```
 
 ### Large
+
 ```ts file="./ProgressLarge.tsx"
-```
 
-### Outside
-```ts file="./ProgressOutside.tsx"
 ```
 
-### Inside
-```ts file="./ProgressInside.tsx"
-```
+### Outside
 
-### Success
-```ts file="./ProgressSuccess.tsx"
-```
+```ts file="./ProgressOutside.tsx"
 
-### Failure
-```ts file="./ProgressFailure.tsx"
 ```
 
-### Warning
-```ts file="./ProgressWarning.tsx"
-```
+### Inside
 
-### Inside success
-```ts file="./ProgressInsideSuccess.tsx"
-```
+```ts file="./ProgressInside.tsx"
 
-### Outside failure
-```ts file="./ProgressOutsideFailure.tsx"
 ```
 
 ### Single line
+
 ```ts file="./ProgressSingleLine.tsx"
+
 ```
 
 ### Without measure
+
 ```ts file="./ProgressWithoutMeasure.tsx"
-```
 
-### Failure without measure
-```ts file="./ProgressFailureWithoutMeasure.tsx"
 ```
 
-
 ### Finite step
+
 ```ts file="./ProgressFiniteStep.tsx"
+
 ```
 
 ### Progress with step instructions
+
 ```ts file="./ProgressStepInstruction.tsx"
+
 ```
 
 ### Truncate title
+
 ```ts file="./ProgressTruncateTitle.tsx"
+
 ```
 
 ### Title outside of progress bar
+
 ```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
+
 ```
 
 ### Helper text
+
 ```ts file="./ProgressHelperText.tsx"
+
+```
+
+## Status examples
+
+When conveying status, you should ensure:
+
+- There is visible helper text that explains the status.
+- The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text#basic).
+- The helper text is linked to the `<Progress>` component via the `aria-describedby` property, as seen in the [progress helper text example](#helper-text).
+
+### Success
+
+```ts file="./ProgressSuccess.tsx"
+
+```
+
+### Failure
+
+```ts file="./ProgressFailure.tsx"
+
+```
+
+### Warning
+
+```ts file="./ProgressWarning.tsx"
+
+```
+
+### Inside success
+
+```ts file="./ProgressInsideSuccess.tsx"
+
+```
+
+### Outside failure
+
+```ts file="./ProgressOutsideFailure.tsx"
+
+```
+
+### Failure without measure
+
+```ts file="./ProgressFailureWithoutMeasure.tsx"
+
 ```

package/src/components/Progress/examples/ProgressHelperText.tsx

@@ -25,7 +25,7 @@ export const ProgressHelperText: React.FunctionComponent = () => {
   const helperTextVariant = selectedVariant === 'danger' ? 'error' : selectedVariant;
 
   const helperText = (
-    <HelperText>
+    <HelperText id="progress-helper-text-example-help-text">
       <HelperTextItem variant={helperTextVariant}>
         {`${formatVariantName(selectedVariant)} variant is being displayed`}
       </HelperTextItem>
@@ -36,7 +36,13 @@ export const ProgressHelperText: React.FunctionComponent = () => {
     <>
       {variantOptions}
       <br />
-      <Progress value={33} title="Title" helperText={helperText} variant={selectedVariant} />
+      <Progress
+        aria-describedby="progress-helper-text-example-help-text"
+        value={33}
+        title="Title"
+        helperText={helperText}
+        variant={selectedVariant}
+      />
     </>
   );
 };

package/src/components/Tabs/Tabs.tsx

@@ -438,6 +438,10 @@ class Tabs extends Component<TabsProps, TabsState> {
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
+
+    if (prevState.uncontrolledIsExpandedLocal !== this.state.uncontrolledIsExpandedLocal) {
+      this.setAccentStyles(true);
+    }
   }
 
   static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {

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

@@ -1,4 +1,5 @@
 import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Tabs } from '../Tabs';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
@@ -50,6 +51,53 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when com
   jest.useRealTimers();
 });
 
+test(`Renders with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component initially mounts`, async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
+  render(
+    <Tabs
+      isVertical
+      expandable={{ default: 'expandable' }}
+      toggleText="Jump to section"
+      defaultIsExpanded={false}
+      role="region"
+    >
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  jest.useFakeTimers();
+  await user.click(screen.getByRole('button', { name: 'Jump to section' }));
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent);
+  jest.useRealTimers();
+});
+
+test(`Does not render with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component is finished mounting`, async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Tabs
+      isVertical
+      expandable={{ default: 'expandable' }}
+      toggleText="Jump to section"
+      defaultIsExpanded={false}
+      role="region"
+    >
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Jump to section' }));
+  expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">

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

@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-12"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-18"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -413,7 +413,7 @@ exports[`should render expandable vertical tabs 1`] = `
         <button
           aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
+          data-ouia-component-id="OUIA-Generated-Button-plain-5"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="generated-id-button"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-4"
+    data-ouia-component-id="OUIA-Generated-Tabs-6"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-15"
+      data-ouia-component-id="OUIA-Generated-Tabs-17"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-19"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-17"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-7"
+    data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-8"
+    data-ouia-component-id="OUIA-Generated-Tabs-10"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

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

@@ -225,7 +225,7 @@ exports[`Toolbar should render with custom label content 1`] = `
               <button
                 aria-label="Close label group"
                 aria-labelledby="remove_group_generated-id generated-id"
-                class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+                class="pf-v6-c-button pf-m-plain pf-m-small"
                 data-ouia-component-id="OUIA-Generated-Button-plain-4"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
@@ -241,11 +241,11 @@ exports[`Toolbar should render with custom label content 1`] = `
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    viewBox="0 0 512 512"
+                    viewBox="0 0 352 512"
                     width="1em"
                   >
                     <path
-                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                      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>
                 </span>

package/src/components/Tooltip/Tooltip.tsx

@@ -174,6 +174,75 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const [visible, setVisible] = useState(false);
   const popperRef = createRef<HTMLDivElement>();
 
+  const getTriggerRefElement = (): HTMLElement | null => {
+    if (typeof triggerRef === 'function') {
+      return triggerRef();
+    } else if (triggerRef && typeof triggerRef === 'object' && 'current' in triggerRef) {
+      return triggerRef.current;
+    } else if (triggerRef instanceof HTMLElement) {
+      return triggerRef;
+    }
+    return null;
+  };
+
+  const getAriaAttributeName = () => (aria !== 'none' ? `aria-${aria}` : null);
+
+  const addAriaToRefElement = (element: HTMLElement): void => {
+    const attributeName = getAriaAttributeName();
+    if (!element || !attributeName) {
+      return;
+    }
+
+    const existingAria = element.getAttribute(attributeName);
+    if (!existingAria || !existingAria.includes(id)) {
+      const newAria = existingAria ? `${existingAria} ${id}` : id;
+      element.setAttribute(attributeName, newAria);
+    }
+  };
+
+  const removeAriaFromRefElement = (element: HTMLElement): void => {
+    const attributeName = getAriaAttributeName();
+    if (!element || !attributeName) {
+      return;
+    }
+
+    const existingAria = element.getAttribute(attributeName);
+    if (!existingAria) {
+      return;
+    }
+    const newAria = existingAria.replace(new RegExp(`\\b${id}\\b`, 'g'), '').trim();
+    if (newAria) {
+      element.setAttribute(attributeName, newAria);
+    } else {
+      element.removeAttribute(attributeName);
+    }
+  };
+
+  const updateTriggerElementAria = (shouldAddAria: boolean): void => {
+    if (aria === 'none' || !triggerRef || children) {
+      return;
+    }
+
+    const triggerElement = getTriggerRefElement();
+    if (!triggerElement) {
+      return;
+    }
+
+    if (shouldAddAria) {
+      addAriaToRefElement(triggerElement);
+    } else {
+      removeAriaFromRefElement(triggerElement);
+    }
+  };
+
+  useEffect(() => {
+    updateTriggerElementAria(visible);
+
+    return () => {
+      updateTriggerElementAria(false);
+    };
+  }, [visible, aria, triggerRef, children, id]);
+
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
       if (event.key === KeyTypes.Escape && visible) {
@@ -258,8 +327,12 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     }
   };
 
-  const addAriaToTrigger = () => {
-    if (aria === 'describedby' && children && children.props && !children.props['aria-describedby']) {
+  const addAriaToChildren = () => {
+    if (!children) {
+      return;
+    }
+
+    if (aria === 'describedby' && children.props && !children.props['aria-describedby']) {
       return cloneElement(children, { 'aria-describedby': id });
     } else if (aria === 'labelledby' && children.props && !children.props['aria-labelledby']) {
       return cloneElement(children, { 'aria-labelledby': id });
@@ -269,7 +342,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
 
   return (
     <Popper
-      trigger={aria !== 'none' && visible ? addAriaToTrigger() : children}
+      trigger={aria !== 'none' && visible ? addAriaToChildren() : children}
       triggerRef={triggerRef}
       popper={content}
       popperRef={popperRef}

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

@@ -204,3 +204,129 @@ test('Matches snapshot', async () => {
   const tooltip = await screen.findByRole('tooltip');
   expect(tooltip).toMatchSnapshot();
 });
+
+test('Applies aria-describedby to triggerRef element when no children are provided', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={triggerRef}>Trigger</button>
+      <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test description" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Test description');
+});
+
+test('Applies aria-labelledby to triggerRef element when no children are provided', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={triggerRef}>Trigger</button>
+      <Tooltip id="trigger-ref-test" aria="labelledby" triggerRef={triggerRef} isVisible content="Test label" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Test label');
+});
+
+test('Removes aria-describedby from triggerRef element when tooltip is hidden', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  const TooltipTest = () => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    return (
+      <>
+        <button ref={triggerRef} onClick={() => setIsVisible(!isVisible)}>
+          Trigger
+        </button>
+        <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible={isVisible} content="Test description" />
+      </>
+    );
+  };
+
+  render(<TooltipTest />);
+
+  // Tooltip should be visible initially
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Test description');
+
+  // Hide tooltip
+  const user = userEvent.setup();
+  await user.click(triggerRef.current);
+
+  // aria-describedby should be removed
+  expect(triggerRef.current).not.toHaveAccessibleDescription();
+});
+
+test('Removes aria-labelledby from triggerRef element when tooltip is hidden', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  const TooltipTest = () => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    return (
+      <>
+        <button ref={triggerRef} onClick={() => setIsVisible(!isVisible)} />
+        <Tooltip
+          aria="labelledby"
+          id="trigger-ref-test"
+          triggerRef={triggerRef}
+          isVisible={isVisible}
+          content="Test label"
+        />
+      </>
+    );
+  };
+
+  render(<TooltipTest />);
+
+  // Tooltip should be visible initially
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Test label');
+
+  // Hide tooltip
+  const user = userEvent.setup();
+  await user.click(triggerRef.current);
+
+  // aria-describedby should be removed
+  expect(triggerRef.current).not.toHaveAccessibleName();
+});
+
+test('Preserves existing aria-describedby on triggerRef element', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <div id="existing-aria">Existing description</div>
+      <button ref={triggerRef} aria-describedby="existing-aria">
+        Trigger
+      </button>
+      <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test description" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Existing description Test description');
+});
+
+test('Preserves existing aria-labelledby on triggerRef element', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <div id="existing-aria">Existing label</div>
+      <button ref={triggerRef} aria-labelledby="existing-aria">
+        Trigger
+      </button>
+      <Tooltip aria="labelledby" id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test label" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Existing label Test label');
+});

package/src/components/Wizard/WizardNavItem.tsx

@@ -116,7 +116,7 @@ export const WizardNavItem = ({
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (
             <>
-              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
                   <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />