From 79bf6e982e7091920f1400637848610acc2c10f9 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 31 Mar 2025 16:25:57 -0400
Subject: [PATCH 1/5] fix(Progress): enable truncated tooltip via keyboard

---
 .../components/Progress/ProgressContainer.tsx | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/react-core/src/components/Progress/ProgressContainer.tsx b/packages/react-core/src/components/Progress/ProgressContainer.tsx
index 91f27e7ba7c..9e5178f9131 100644
--- a/packages/react-core/src/components/Progress/ProgressContainer.tsx
+++ b/packages/react-core/src/components/Progress/ProgressContainer.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useEffect } from 'react';
 import progressStyle from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
@@ -80,13 +80,21 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 }: ProgressContainerProps) => {
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
-  const onMouseEnter = (event: any) => {
+  const titleRef = useRef(null);
+  const onFocus = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(title || event.target.innerHTML);
     } else {
       setTooltip('');
     }
   };
+
+  useEffect(() => {
+    if (tooltip !== '') {
+      titleRef.current.focus();
+    }
+  }, [tooltip]);
+
   const Title = (
     <div
       className={css(
@@ -95,7 +103,10 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
       )}
       id={`${parentId}-description`}
       aria-hidden="true"
-      onMouseEnter={isTitleTruncated && typeof title === 'string' ? onMouseEnter : null}
+      onMouseEnter={isTitleTruncated && typeof title === 'string' ? onFocus : null}
+      onFocus={isTitleTruncated && typeof title === 'string' ? onFocus : null}
+      {...(isTitleTruncated && typeof title === 'string' && { tabIndex: 0 })}
+      ref={titleRef}
     >
       {title}
     </div>
@@ -103,14 +114,12 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 
   return (
     <Fragment>
-      {title &&
-        (tooltip ? (
-          <Tooltip position={tooltipPosition} content={tooltip} isVisible>
-            {Title}
-          </Tooltip>
-        ) : (
-          Title
-        ))}
+      {title && (
+        <>
+          {tooltip && <Tooltip position={tooltipPosition} content={tooltip} isVisible triggerRef={titleRef} />}
+          {Title}
+        </>
+      )}
       {(measureLocation !== ProgressMeasureLocation.none || StatusIcon) && (
         <div className={css(progressStyle.progressStatus)} aria-hidden="true">
           {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (

From 864ae4656a54d8bddf0f4394eebbaa4462cd5866 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 1 Apr 2025 10:08:03 -0400
Subject: [PATCH 2/5] fix a11y bug

---
 .../src/components/Progress/ProgressContainer.tsx  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/react-core/src/components/Progress/ProgressContainer.tsx b/packages/react-core/src/components/Progress/ProgressContainer.tsx
index 9e5178f9131..150b04fa581 100644
--- a/packages/react-core/src/components/Progress/ProgressContainer.tsx
+++ b/packages/react-core/src/components/Progress/ProgressContainer.tsx
@@ -95,17 +95,15 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
     }
   }, [tooltip]);
 
+  const _isTruncatedAndString = isTitleTruncated && typeof title === 'string';
   const Title = (
     <div
-      className={css(
-        progressStyle.progressDescription,
-        isTitleTruncated && typeof title === 'string' && progressStyle.modifiers.truncate
-      )}
+      className={css(progressStyle.progressDescription, _isTruncatedAndString && progressStyle.modifiers.truncate)}
       id={`${parentId}-description`}
-      aria-hidden="true"
-      onMouseEnter={isTitleTruncated && typeof title === 'string' ? onFocus : null}
-      onFocus={isTitleTruncated && typeof title === 'string' ? onFocus : null}
-      {...(isTitleTruncated && typeof title === 'string' && { tabIndex: 0 })}
+      aria-hidden={_isTruncatedAndString ? null : 'true'}
+      onMouseEnter={_isTruncatedAndString ? onFocus : null}
+      onFocus={_isTruncatedAndString ? onFocus : null}
+      {...(_isTruncatedAndString && { tabIndex: 0 })}
       ref={titleRef}
     >
       {title}

From 207fc8b9b66164931a5080b7c26485de61272e1b Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 7 Apr 2025 15:26:27 -0400
Subject: [PATCH 3/5] update Truncate with fix

---
 .../components/Progress/ProgressContainer.tsx |  6 ++--
 .../src/components/Truncate/Truncate.tsx      | 19 ++++++-----
 .../__snapshots__/Truncate.test.tsx.snap      | 32 +++++++++++--------
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/react-core/src/components/Progress/ProgressContainer.tsx b/packages/react-core/src/components/Progress/ProgressContainer.tsx
index 150b04fa581..e4325b145e1 100644
--- a/packages/react-core/src/components/Progress/ProgressContainer.tsx
+++ b/packages/react-core/src/components/Progress/ProgressContainer.tsx
@@ -81,7 +81,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
   const titleRef = useRef(null);
-  const onFocus = (event: any) => {
+  const updateTooltip = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(title || event.target.innerHTML);
     } else {
@@ -101,8 +101,8 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
       className={css(progressStyle.progressDescription, _isTruncatedAndString && progressStyle.modifiers.truncate)}
       id={`${parentId}-description`}
       aria-hidden={_isTruncatedAndString ? null : 'true'}
-      onMouseEnter={_isTruncatedAndString ? onFocus : null}
-      onFocus={_isTruncatedAndString ? onFocus : null}
+      onMouseEnter={_isTruncatedAndString ? updateTooltip : null}
+      onFocus={_isTruncatedAndString ? updateTooltip : null}
       {...(_isTruncatedAndString && { tabIndex: 0 })}
       ref={titleRef}
     >
diff --git a/packages/react-core/src/components/Truncate/Truncate.tsx b/packages/react-core/src/components/Truncate/Truncate.tsx
index 5fb08b01e3a..d9843d42f93 100644
--- a/packages/react-core/src/components/Truncate/Truncate.tsx
+++ b/packages/react-core/src/components/Truncate/Truncate.tsx
@@ -109,11 +109,8 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       setTextElement(textRef.current);
     }
 
-    if (
-      (refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement.parentElement)) &&
-      !parentElement
-    ) {
-      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement.parentElement);
+    if ((refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement)) && !parentElement) {
+      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement);
     }
   }, [textRef, subParentRef, textElement, parentElement]);
 
@@ -224,18 +221,20 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     <span
       ref={subParentRef}
       className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
+      {...(isTruncated && { tabIndex: 0 })}
       {...props}
     >
       {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
     </span>
   );
 
-  return isTruncated ? (
-    <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content}>
+  return (
+    <>
+      {isTruncated && (
+        <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content} triggerRef={subParentRef} />
+      )}
       {truncateBody}
-    </Tooltip>
-  ) : (
-    truncateBody
+    </>
   );
 };
 
diff --git a/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap b/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
index 9c1455a92b5..c1a00ac3749 100644
--- a/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
+++ b/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
@@ -41,6 +41,7 @@ exports[`renders default truncation 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
+    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -50,16 +51,17 @@ exports[`renders default truncation 1`] = `
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate"
+      class="pf-v6-c-truncate__start"
     >
-      <span
-        class="pf-v6-c-truncate__start"
-      >
-        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
-      </span>
+      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
@@ -67,6 +69,7 @@ exports[`renders start truncation with &lrm; at end 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
+    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -76,15 +79,16 @@ exports[`renders start truncation with &lrm; at end 1`] = `
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate"
+      class="pf-v6-c-truncate__end"
     >
-      <span
-        class="pf-v6-c-truncate__end"
-      >
-        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
-      </span>
+      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;

From f77143aad7418d937d58b5be923a8edc4bfb9114 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 8 Apr 2025 11:18:14 -0400
Subject: [PATCH 4/5] fix truncate mock for snapshot, add basic integration
 test for tabindex

---
 .../Truncate/__tests__/Truncate.test.tsx      |  2 +-
 .../__snapshots__/Truncate.test.tsx.snap      |  2 --
 .../cypress/integration/truncate.spec.ts      | 23 +++++++++++++++++++
 .../demo-app-ts/src/Demos.ts                  |  5 ++++
 .../demos/TruncateDemo/TruncateDemo.tsx       | 13 +++++++++++
 .../demo-app-ts/src/components/demos/index.ts |  1 +
 6 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-integration/cypress/integration/truncate.spec.ts
 create mode 100644 packages/react-integration/demo-app-ts/src/components/demos/TruncateDemo/TruncateDemo.tsx

diff --git a/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx b/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx
index 9d1541f0ff1..3abc4b0df5b 100644
--- a/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx
+++ b/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx
@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
-  Tooltip: ({ content, position, children, ...props }) => (
+  Tooltip: ({ content, position, children, triggerRef, ...props }) => (
     <div data-testid="Tooltip-mock" {...props}>
       <div data-testid="Tooltip-mock-content-container">Test {content}</div>
       <p>{`position: ${position}`}</p>
diff --git a/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap b/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
index c1a00ac3749..ba4fca170e9 100644
--- a/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
+++ b/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`renders default truncation 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
-    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -69,7 +68,6 @@ exports[`renders start truncation with &lrm; at end 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
-    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"
diff --git a/packages/react-integration/cypress/integration/truncate.spec.ts b/packages/react-integration/cypress/integration/truncate.spec.ts
new file mode 100644
index 00000000000..c84ccafca08
--- /dev/null
+++ b/packages/react-integration/cypress/integration/truncate.spec.ts
@@ -0,0 +1,23 @@
+describe('Truncate Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/truncate-demo-nav-link');
+  });
+
+  it('Verify no tooltip renders by default', () => {
+    cy.get('.pf-v6-c-tooltip').should('not.exist');
+  });
+
+  it('Verify non-truncated content in wide container does not have tabindex', () => {
+    cy.get('#no-truncate').should('not.have.attr', 'tabindex');
+  });
+
+  it('Verify truncated content in small container does have tabindex', () => {
+    cy.get('#basic-truncate').should('have.attr', 'tabindex');
+  });
+
+  it('Verify tooltip renders when truncate is focused', () => {
+    cy.get('#basic-truncate').should('have.attr', 'tabindex');
+    cy.get('#basic-truncate').focus();
+    cy.get('.pf-v6-c-tooltip').should('exist');
+  });
+});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index 38da48a303b..61a7c733ac4 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -462,6 +462,11 @@ export const Demos: DemoInterface[] = [
     name: 'Tree View Demo',
     componentType: Examples.TreeViewDemo
   },
+  {
+    id: 'truncate-demo',
+    name: 'Truncate Demo',
+    componentType: Examples.TruncateDemo
+  },
   {
     id: 'wizard-demo',
     name: 'Wizard Demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TruncateDemo/TruncateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TruncateDemo/TruncateDemo.tsx
new file mode 100644
index 00000000000..488c9530ef9
--- /dev/null
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TruncateDemo/TruncateDemo.tsx
@@ -0,0 +1,13 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateDemo: React.FunctionComponent = () => (
+  <>
+    <div style={{ width: '100px' }}>
+      <Truncate id="basic-truncate" content={'basic truncated content'} />
+    </div>
+    <div style={{ width: '800px' }}>
+      <Truncate id="no-truncate" content={'no truncation in wide container'} />
+    </div>
+  </>
+);
+TruncateDemo.displayName = 'TruncateDemo';
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 764b6035d67..669875480ef 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -88,5 +88,6 @@ export * from './ToolbarDemo/ToolbarDemo';
 export * from './ToolbarDemo/ToolbarVisibilityDemo';
 export * from './TooltipDemo/TooltipDemo';
 export * from './TreeViewDemo/TreeViewDemo';
+export * from './TruncateDemo/TruncateDemo';
 export * from './WizardDemo/WizardDemo';
 export * from './WizardDeprecatedDemo/WizardDeprecatedDemo';

From 68e9c56b620499381ed679891f89dcae66a630f6 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 22 Apr 2025 16:32:41 -0400
Subject: [PATCH 5/5] update snapshot

---
 .../__snapshots__/Truncate.test.tsx.snap      | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap b/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
index ba4fca170e9..028952dd10c 100644
--- a/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
+++ b/packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap
@@ -13,27 +13,28 @@ exports[`Truncation with maxCharsDisplayed Matches snapshot with default positio
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate pf-m-fixed"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate pf-m-fixed"
+      class="pf-v6-c-truncate__text"
     >
-      <span
-        class="pf-v6-c-truncate__text"
-      >
-        Tes
-      </span>
-      <span
-        aria-hidden="true"
-        class="pf-v6-c-truncate__omission"
-      >
-        …
-      </span>
-      <span
-        class="pf-v6-screen-reader"
-      >
-        t truncation content
-      </span>
+      Tes
     </span>
-  </div>
+    <span
+      aria-hidden="true"
+      class="pf-v6-c-truncate__omission"
+    >
+      …
+    </span>
+    <span
+      class="pf-v6-screen-reader"
+    >
+      t truncation content
+    </span>
+  </span>
 </DocumentFragment>
 `;