fix(Table) Table tooltips not triggered via keyboard

packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -789,4 +789,4 @@ exports[`disabled date picker 1`] = `
     </div>
   </div>
 </DocumentFragment>
-`;
+`;

packages/react-table/src/components/Table/SortColumn.tsx

@@ -29,6 +29,7 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   ...props
 }: SortColumnProps) => {
   let SortedByIcon;
+  const [focused, setFocused] = React.useState(false);
   if (isSortedBy) {
     SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon : LongArrowAltDownIcon;
   } else {
@@ -39,10 +40,12 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
       {...props}
       type={type}
       className={css(className, styles.tableButton)}
-      onClick={event => onSort && onSort(event)}
+      onClick={(event) => onSort && onSort(event)}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
     >
       <div className={css(className, styles.tableButtonContent)}>
-        <TableText>{children}</TableText>
+        <TableText focused={focused}>{children}</TableText>
         <span className={css(styles.tableSortIndicator)}>
           <SortedByIcon />
         </span>

packages/react-table/src/components/Table/TableText.tsx

@@ -31,6 +31,8 @@ export interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** callback used to create the tooltip if text is truncated */
   onMouseEnter?: (event: any) => void;
+  /** Determines if the TableText is focused by parent component */
+  focused?: boolean;
 }
 
 export const TableText: React.FunctionComponent<TableTextProps> = ({
@@ -41,10 +43,11 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   tooltip: tooltipProp = '',
   tooltipProps = {},
   onMouseEnter: onMouseEnterProp = () => {},
+  focused = false,
   ...props
 }: TableTextProps) => {
   const Component: TableTextVariant | 'span' | 'div' = variant;
-  const textRef = React.createRef<any>();
+  const textRef = React.createRef<HTMLElement>();
 
   const [tooltip, setTooltip] = React.useState('');
   const onMouseEnter = (event: any) => {
@@ -56,9 +59,17 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
     onMouseEnterProp(event);
   };
 
+  const onFocus = (element: HTMLElement) => {
+    if (element.offsetWidth < element.scrollWidth) {
+      setTooltip(tooltipProp || element.innerText);
+    } else {
+      setTooltip('');
+    }
+  };
+
   const text = (
     <Component
-      ref={textRef}
+      ref={textRef as React.Ref<HTMLDivElement>}
       onMouseEnter={onMouseEnter}
       className={css(className, wrapModifier && styles.modifiers[wrapModifier], styles.tableText)}
       {...props}
@@ -67,6 +78,14 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
     </Component>
   );
 
+  React.useEffect(() => {
+    if (focused) {
+      onFocus(textRef.current);
+    } else {
+      setTooltip('');
+    }
+  }, [focused]);
+
   return tooltip !== '' ? (
     <Tooltip triggerRef={textRef} content={tooltip} isVisible {...tooltipProps}>
       {text}

packages/react-table/src/components/Table/Td.tsx

@@ -105,14 +105,15 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   ...props
 }: TdProps) => {
   const [showTooltip, setShowTooltip] = React.useState(false);
+  const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
-
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       !showTooltip && setShowTooltip(true);
     } else {
       showTooltip && setShowTooltip(false);
     }
+
     onMouseEnterProp(event);
   };
 
@@ -255,9 +256,19 @@ const TdBase: React.FunctionComponent<TdProps> = ({
     (className && className.includes('pf-c-table__tree-view-title-cell')) ||
     (mergedClassName && mergedClassName.includes('pf-c-table__tree-view-title-cell'));
 
+  React.useEffect(() => {
+    setTruncated(
+      (cellRef as React.RefObject<HTMLElement>).current.offsetWidth <
+        (cellRef as React.RefObject<HTMLElement>).current.scrollWidth
+    );
+  }, [cellRef]);
+
   const cell = (
     <MergedComponent
+      tabIndex={(select || !truncated) && modifier !== 'truncate' ? -1 : 0}
       {...(!treeTableTitleCell && { 'data-label': dataLabel })}
+      onFocus={tooltip !== null ? onMouseEnter : onMouseEnterProp}
+      onBlur={() => setShowTooltip(false)}
       onMouseEnter={tooltip !== null ? onMouseEnter : onMouseEnterProp}
       className={css(
         className,
@@ -289,9 +300,14 @@ const TdBase: React.FunctionComponent<TdProps> = ({
 
   const canMakeDefaultTooltip = tooltip === '' ? typeof children === 'string' : true;
   return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (
-    <Tooltip triggerRef={cellRef as React.RefObject<any>} content={tooltip || (tooltip === '' && children)} isVisible>
+    <>
       {cell}
-    </Tooltip>
+      <Tooltip
+        triggerRef={cellRef as React.RefObject<any>}
+        content={tooltip || (tooltip === '' && children)}
+        isVisible
+      />
+    </>
   ) : (
     cell
   );

packages/react-table/src/components/Table/Th.tsx

@@ -80,6 +80,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   ...props
 }: ThProps) => {
   const [showTooltip, setShowTooltip] = React.useState(false);
+  const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
@@ -161,8 +162,18 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     ...mergedProps
   } = merged;
 
+  React.useEffect(() => {
+    setTruncated(
+      (cellRef as React.RefObject<HTMLElement>).current.offsetWidth <
+        (cellRef as React.RefObject<HTMLElement>).current.scrollWidth
+    );
+  }, [cellRef]);
+
   const cell = (
     <MergedComponent
+      tabIndex={sort || select || !truncated ? -1 : 0}
+      onFocus={tooltip !== null ? onMouseEnter : onMouseEnterProp}
+      onBlur={() => setShowTooltip(false)}
       data-label={dataLabel}
       onMouseEnter={tooltip !== null ? onMouseEnter : onMouseEnterProp}
       scope={component === 'th' && children ? scope : null}
@@ -194,9 +205,14 @@ const ThBase: React.FunctionComponent<ThProps> = ({
 
   const canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
   return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (
-    <Tooltip triggerRef={cellRef as React.RefObject<any>} content={tooltip || (tooltip === '' && children)} isVisible>
+    <>
       {cell}
-    </Tooltip>
+      <Tooltip
+        triggerRef={cellRef as React.RefObject<any>}
+        content={tooltip || (tooltip === '' && children)}
+        isVisible
+      />
+    </>
   ) : (
     cell
   );

packages/react-table/src/components/Table/examples/Table.md

@@ -233,6 +233,8 @@ export type OnExpand = (
 
 ### Modifiers with table text
 
+If the "wrapModifier" property is set to "truncate", it's needed to ensure that the corresponding tooltip can be opened using both keyboard and screen reader. Since this particular Td element is generic and doesn't have any predefined decorators, the focus management required to trigger the tooltip needs to be handled manually by defining and manipulating the requisite props.
+
 ```ts file="TableTextModifiers.tsx"
 ```
 

packages/react-table/src/components/Table/examples/TableTextModifiers.tsx

@@ -9,25 +9,36 @@ const columnNames = {
   wrap: 'Wrapping table header text. This th text will wrap instead of truncate.'
 };
 
-export const TableTextModifiers: React.FunctionComponent = () => (
-  <Table aria-label="Table text">
-    <Thead>
-      <Tr>
-        <Th width={30}>{columnNames.truncate}</Th>
-        <Th>{columnNames.wrap}</Th>
-      </Tr>
-    </Thead>
-    <Tbody>
-      <Tr>
-        <Td dataLabel={columnNames.truncate}>
-          <TableText wrapModifier="truncate">This text will truncate instead of wrap.</TableText>
-        </Td>
-        <Td dataLabel={columnNames.wrap}>
-          <TableText wrapModifier="nowrap">
-            <a href="#">This is a link that needs to be on one line and fully readable.</a>
-          </TableText>
-        </Td>
-      </Tr>
-    </Tbody>
-  </Table>
-);
+export const TableTextModifiers: React.FunctionComponent = () => {
+  const [focused, setFocused] = React.useState(false);
+
+  return (
+    <Table aria-label="Table text">
+      <Thead>
+        <Tr>
+          <Th width={30}>{columnNames.truncate}</Th>
+          <Th>{columnNames.wrap}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr>
+          <Td
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            tabIndex={0}
+            dataLabel={columnNames.truncate}
+          >
+            <TableText focused={focused} wrapModifier="truncate">
+              This text will truncate instead of wrap.
+            </TableText>
+          </Td>
+          <Td dataLabel={columnNames.wrap}>
+            <TableText wrapModifier="nowrap">
+              <a href="#">This is a link that needs to be on one line and fully readable.</a>
+            </TableText>
+          </Td>
+        </Tr>
+      </Tbody>
+    </Table>
+  );
+};