[DataTable] Fixes bug in DataTable tooltips when using truncate prop (#6914)

* Fixes bug with tooltips where they become disassociated when content gets sorted

* Adds changeset

* Ensures tooltip content links will not be blue

* Use `innerText` instead of `{children}` for tooltip content

* Disable eslint `scrollable-region-focusable` in `data-table-default` example

* Update `DataTable.stories.tsx` to ignore `scrollable-region-focusable`

* Update `Filters.stories.tsx` to remove `scrollable-region-focusable` rule

* Simplified implementation

* Remove uneccessary comment

* Remove incorrect eslint-disable comment

* Update .changeset/metal-impalas-type.md

Co-authored-by: Lo Kim <[email protected]>

Co-authored-by: Lo Kim <[email protected]>

Author: philschoefer

.changeset/metal-impalas-type.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed bug in `DataTable` where tooltips become disassociated when rows get sorted

polaris-react/src/components/DataTable/DataTable.stories.tsx

@@ -4,6 +4,13 @@ import {Card, DataTable, Link, Page} from '@shopify/polaris';
 
 export default {
   component: DataTable,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{id: 'scrollable-region-focusable', enabled: false}],
+      },
+    },
+  },
 } as ComponentMeta<typeof DataTable>;
 
 export function Default() {

polaris-react/src/components/DataTable/components/Cell/Cell.tsx

@@ -1,4 +1,4 @@
-import React, {FocusEventHandler, useState} from 'react';
+import React, {FocusEventHandler, useRef} from 'react';
 import {SortAscendingMajor, SortDescendingMajor} from '@shopify/polaris-icons';
 
 import {classNames, variationName} from '../../../../utilities/css';
@@ -63,20 +63,6 @@ export function Cell({
   const i18n = useI18n();
   const numeric = contentType === 'numeric';
 
-  const [showTooltip, setShowTooltip] = useState(false);
-  const [tooltipContent, setTooltipContent] = useState('');
-
-  function setTooltip(ref: HTMLTableCellElement | null) {
-    if (!ref) {
-      return;
-    }
-    // Since the cell can accept any React node, we'll only show a tooltip when the cell content has an innerText
-    if (ref.scrollWidth > ref.offsetWidth && ref.innerText) {
-      setShowTooltip(true);
-      setTooltipContent(ref.innerText);
-    }
-  }
-
   const className = classNames(
     styles.Cell,
     styles[`Cell-${variationName('verticalAlign', verticalAlign)}`],
@@ -180,17 +166,10 @@ export function Cell({
       scope="row"
       {...colSpanProp}
       ref={(ref) => {
-        setTooltip(ref);
         setRef(ref);
       }}
     >
-      {showTooltip ? (
-        <Tooltip content={tooltipContent}>
-          <span className={styles.TooltipContent}>{content}</span>
-        </Tooltip>
-      ) : (
-        content
-      )}
+      <TruncatedText className={styles.TooltipContent}>{content}</TruncatedText>
     </th>
   );
 
@@ -205,3 +184,25 @@ export function Cell({
 
   return stickyHeadingCell ? stickyHeading : cellMarkup;
 }
+
+const TruncatedText = ({
+  children,
+  className = '',
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  const textRef = useRef<any | null>(null);
+  const {current} = textRef;
+  const text = (
+    <span ref={textRef} className={className}>
+      {children}
+    </span>
+  );
+
+  return current?.scrollWidth > current?.offsetWidth ? (
+    <Tooltip content={textRef.current.innerText}>{text}</Tooltip>
+  ) : (
+    text
+  );
+};

polaris-react/src/components/Filters/Filters.stories.tsx

@@ -15,6 +15,15 @@ import {
 
 export default {
   component: Filters,
+  parameters: {
+    a11y: {
+      config: {
+        // disabled due to DataTable having a scrollable region without
+        // keyboard access when all content fits without scrolling.
+        rules: [{id: 'scrollable-region-focusable', enabled: false}],
+      },
+    },
+  },
 } as ComponentMeta<typeof Filters>;
 
 export function WithAResourceList() {