Keep multi-link cells out of row-link mode

Author: dukenv0307

src/components/HTMLEngineProvider/HTMLRenderers/TableRowLink.ts

@@ -1,3 +1,7 @@
+/**
+ * Helpers for treating a table's link column as the link of each row: finding the single column whose cells hold
+ * links, resolving each row's destination, and spotting the anchor that renders as plain text because of it.
+ */
 import type {TNode} from 'react-native-render-html';
 
 import {getElementChildren} from './TableChildrenRenderer';
@@ -8,31 +12,49 @@ function getBodyRows(tableTnode: TNode): TNode[] {
         .flatMap((section) => getElementChildren(section));
 }
 
-function findAnchor(node: TNode): TNode | undefined {
+function getAnchors(node: TNode): TNode[] {
     if (node.tagName === 'a') {
-        return node;
+        return [node];
+    }
+    return (node.children ?? []).flatMap(getAnchors);
+}
+
+/** The destination of a cell, defined only when the cell holds exactly one link and that link has an href. */
+function getCellLinkURL(cell: TNode): string | undefined {
+    const anchors = getAnchors(cell);
+    if (anchors.length !== 1) {
+        return undefined;
     }
-    return (node.children ?? []).reduce<TNode | undefined>((found, child) => found ?? findAnchor(child), undefined);
+
+    return anchors.at(0)?.attributes?.href || undefined;
 }
 
 /**
  * The single column whose cells hold links, or undefined when the table has no such column.
  *
  * Concierge expense tables link one cell per row — the merchant — and that link points at the row's transaction, so
- * the row as a whole can navigate there. Requiring the links to sit in exactly one column leaves any other table
- * (no links, or links spread across columns) rendering as a plain table with its own per-cell anchors.
+ * the row as a whole can navigate there. Requiring the links to sit in exactly one column, each cell holding a single
+ * link with an href, leaves every other table (no links, links spread across columns, or a cell whose several links
+ * one row destination could not stand in for) rendering as a plain table with its own per-cell anchors.
  */
 function getLinkColumnIndex(tableTnode: TNode): number | undefined {
     const columnsWithLinks = new Set<number>();
+    let hasCellWithoutSingleLink = false;
     for (const row of getBodyRows(tableTnode)) {
         for (const [columnIndex, cell] of getElementChildren(row).entries()) {
-            if (findAnchor(cell)) {
-                columnsWithLinks.add(columnIndex);
+            if (getAnchors(cell).length === 0) {
+                continue;
             }
+            columnsWithLinks.add(columnIndex);
+            hasCellWithoutSingleLink = hasCellWithoutSingleLink || !getCellLinkURL(cell);
         }
     }
 
-    return columnsWithLinks.size === 1 ? columnsWithLinks.values().next().value : undefined;
+    if (hasCellWithoutSingleLink || columnsWithLinks.size !== 1) {
+        return undefined;
+    }
+
+    return columnsWithLinks.values().next().value;
 }
 
 /**
@@ -76,7 +98,7 @@ function getRowLinkURL(rowTnode: TNode, linkColumnIndex: number | undefined): st
     }
 
     const linkCell = getElementChildren(rowTnode).at(linkColumnIndex);
-    return linkCell ? findAnchor(linkCell)?.attributes?.href : undefined;
+    return linkCell ? getCellLinkURL(linkCell) : undefined;
 }
 
 export {getLinkColumnIndex, getRowLinkURL, getTextContent, isLinkColumnAnchor};

src/components/HTMLEngineProvider/HTMLRenderers/TableRowRenderer.tsx

@@ -3,13 +3,16 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import {showContextMenuForReport, useShowContextMenuActions, useShowContextMenuState} from '@components/ShowContextMenuContext';
 
 import useEnvironment from '@hooks/useEnvironment';
+import useHover from '@hooks/useHover';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import {openLink} from '@libs/actions/Link';
 
+import variables from '@styles/variables';
+
 import CONST from '@src/CONST';
 
 import type {CustomRendererProps, TBlock, TNode} from 'react-native-render-html';
@@ -19,7 +22,7 @@ import {View} from 'react-native';
 
 import TableChildrenRenderer, {getElementChildren} from './TableChildrenRenderer';
 import TableLinkColumnContext from './TableLinkColumnContext';
-import {getRowLinkURL} from './TableRowLink';
+import {getRowLinkURL, getTextContent} from './TableRowLink';
 
 function isLastRowOfTable(tnode: TNode): boolean {
     const section = tnode.parent;
@@ -32,12 +35,21 @@ function isLastRowOfTable(tnode: TNode): boolean {
     return sectionRows.at(-1) === tnode && tableSections.at(-1) === section;
 }
 
+/** The row read out as its cells, e.g. `Airbnb, 2026-06-02, £404.60`. */
+function getRowCellsText(rowTnode: TNode): string {
+    return getElementChildren(rowTnode)
+        .map((cell) => getTextContent(cell).trim())
+        .filter((cellText) => cellText.length > 0)
+        .join(', ');
+}
+
 function TableRowRenderer({tnode}: CustomRendererProps<TBlock>) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
+    const {hovered, bind} = useHover();
     const {anchor, report, action, originalReportID} = useShowContextMenuState();
     const {onShowContextMenu, checkIfContextMenuActive} = useShowContextMenuActions();
 
@@ -57,7 +69,9 @@ function TableRowRenderer({tnode}: CustomRendererProps<TBlock>) {
                     <Icon
                         src={icons.ArrowRight}
                         fill={theme.icon}
-                        size={CONST.ICON_SIZE.SMALL}
+                        additionalStyles={!hovered && styles.opacitySemiTransparent}
+                        width={variables.iconSizeNormal}
+                        height={variables.iconSizeNormal}
                     />
                 )}
             </View>
@@ -79,10 +93,12 @@ function TableRowRenderer({tnode}: CustomRendererProps<TBlock>) {
             onPress={() => openLink(rowLinkURL, environmentURL)}
             onLongPress={(event) => onShowContextMenu(() => showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, originalReportID))}
             role={CONST.ROLE.BUTTON}
-            accessibilityLabel={translate('iou.viewDetails')}
+            accessibilityLabel={getRowCellsText(tnode) || translate('iou.viewDetails')}
+            accessibilityHint={translate('iou.viewDetails')}
             sentryLabel={CONST.SENTRY_LABEL.HTML_RENDERER.TABLE_ROW}
             shouldUseHapticsOnLongPress
             isNested
+            {...bind}
         >
             <TableChildrenRenderer tnode={tnode} />
             {chevron}

tests/unit/TableRowLinkTest.ts

@@ -76,6 +76,18 @@ describe('getLinkColumnIndex', () => {
 
         expect(getLinkColumnIndex(mixedTable as unknown as TNode)).toBeUndefined();
     });
+
+    it('returns undefined when a cell holds more than one link, since one row destination cannot stand in for both', () => {
+        const twoLinkCellTable = table([[node('span', [link('Airbnb', AIRBNB_URL), link('Uber', UBER_URL)]), text('£404.60')]]);
+
+        expect(getLinkColumnIndex(twoLinkCellTable as unknown as TNode)).toBeUndefined();
+    });
+
+    it('returns undefined when the linked cell has an anchor without an href', () => {
+        const hreflessTable = table([[node('a', [text('Airbnb')]), text('£404.60')]]);
+
+        expect(getLinkColumnIndex(hreflessTable as unknown as TNode)).toBeUndefined();
+    });
 });
 
 describe('getRowLinkURL', () => {