@patternfly/react-core 6.3.1-prerelease.2 → 6.3.1-prerelease.4

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.1","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.3","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.1","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.3","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.1","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.1-prerelease.2",
+  "version": "6.3.1-prerelease.4",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "8d65eb8ad40d4d01963d6c3280f48fe3cd709056"
+  "gitHead": "f0bf2bc5afde17af6fcee4e790d76f484c5bb4e5"
 }

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/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -618,7 +618,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <p>This is a demo that showcases Patternfly cards.</p>
         </Content>
       </PageSection>
-      <PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card filtering toolbar">
+      <PageSection isFilled padding={{ md: 'padding' }} aria-label="Card filtering toolbar">
         <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
           <ToolbarContent>{toolbarItems}</ToolbarContent>
         </Toolbar>