fix(Truncate, Progress): enable truncated tooltip via keyboard

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,37 +80,44 @@ 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 updateTooltip = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(title || event.target.innerHTML);
     } else {
       setTooltip('');
     }
   };
+
+  useEffect(() => {
+    if (tooltip !== '') {
+      titleRef.current.focus();
+    }
+  }, [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' ? onMouseEnter : null}
+      aria-hidden={_isTruncatedAndString ? null : 'true'}
+      onMouseEnter={_isTruncatedAndString ? updateTooltip : null}
+      onFocus={_isTruncatedAndString ? updateTooltip : null}
+      {...(_isTruncatedAndString && { tabIndex: 0 })}
+      ref={titleRef}
     >
       {title}
     </div>
   );
 
   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) && (

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
+    </>
   );
 };
 

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>

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>
 `;
 
@@ -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>
 `;
 
@@ -76,15 +78,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>
 `;

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');
+  });
+});

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',

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';

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';