fix(tile): improve interactive element detection to include aria-role (#14239)

tay1orjones · web-flow · commit 82beae917dd6 · 2023-07-26T13:54:42.000Z
* fix(tile): improve interactive element detection to include aria-role

* fix(expandable-tile): ensure aria-controls on button controlling belowTheFold content

* test(tile): update tests for aria-controls in expandable tile
diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js
@@ -183,7 +183,7 @@ describe('Tile', () => {
 
     it('toggles the expandable class on click', async () => {
       const onClick = jest.fn();
-      render(
+      const { container } = render(
         <ExpandableTile onClick={onClick}>
           <TileAboveTheFoldContent>
             <div>TestAbove</div>
@@ -193,6 +193,7 @@ describe('Tile', () => {
           </TileBelowTheFoldContent>
         </ExpandableTile>
       );
+      expect(container.firstChild.nodeName).toBe('BUTTON');
       expect(screen.getByRole('button')).not.toHaveClass(
         `${prefix}--tile--is-expanded`
       );
@@ -280,4 +281,78 @@ describe('Tile', () => {
       );
     });
   });
+
+  describe('ExpandableTile with interactive elements', () => {
+    it('does not render the tile as a button and expands/collapses', async () => {
+      const onClick = jest.fn();
+      const { container } = render(
+        <ExpandableTile onClick={onClick}>
+          <TileAboveTheFoldContent>
+            <button type="button">TestAbove</button>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <button type="button">TestBelow</button>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      );
+
+      const tile = container.firstChild;
+      const expandButton = screen.getByRole('button', {
+        name: 'Interact to expand Tile',
+      });
+
+      expect(tile.nodeName).not.toBe('BUTTON');
+      expect(tile).toContainElement(expandButton);
+      expect(tile).not.toHaveAttribute('aria-expanded');
+
+      expect(expandButton).toHaveAttribute('aria-expanded', 'false');
+      expect(expandButton).toHaveAttribute(
+        'aria-controls',
+        expect.stringContaining('expandable-tile-interactive')
+      );
+
+      await userEvent.click(expandButton);
+
+      expect(onClick).toHaveBeenCalled();
+      expect(expandButton).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  describe('ExpandableTile with role elements', () => {
+    it('does not render the tile as a button and expands/collapses', async () => {
+      const onClick = jest.fn();
+      const { container } = render(
+        <ExpandableTile onClick={onClick}>
+          <TileAboveTheFoldContent>
+            <div role="table" className="testing">
+              TestAbove
+            </div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <div>TestBelow</div>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      );
+
+      const tile = container.firstChild;
+      const expandButton = screen.getByRole('button', {
+        name: 'Interact to expand Tile',
+      });
+
+      expect(tile.nodeName).not.toBe('BUTTON');
+      expect(tile).toContainElement(expandButton);
+      expect(tile).not.toHaveAttribute('aria-expanded');
+
+      expect(expandButton).toHaveAttribute('aria-expanded', 'false');
+      expect(expandButton).toHaveAttribute(
+        'aria-controls',
+        expect.stringContaining('expandable-tile-interactive')
+      );
+
+      await userEvent.click(expandButton);
+
+      expect(onClick).toHaveBeenCalled();
+      expect(expandButton).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
 });
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
@@ -24,9 +24,13 @@ import deprecate from '../../prop-types/deprecate';
 import { composeEventHandlers } from '../../tools/events';
 import { usePrefix } from '../../internal/usePrefix';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
-import { getInteractiveContent } from '../../internal/useNoInteractiveChildren';
+import {
+  getInteractiveContent,
+  getRoleContent,
+} from '../../internal/useNoInteractiveChildren';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 import { useFeatureFlag } from '../FeatureFlags';
+import { useId } from '../../internal/useId';
 
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
@@ -663,10 +667,14 @@ export const ExpandableTile = React.forwardRef<
       return;
     }
 
-    if (!getInteractiveContent(belowTheFold.current)) {
-      setInteractive(false);
-      return;
-    } else if (!getInteractiveContent(aboveTheFold.current)) {
+    // Interactive elements or elements that are given a role should be treated
+    // the same because elements with a role can not be rendered inside a `button`
+    if (
+      !getInteractiveContent(belowTheFold.current) &&
+      !getRoleContent(belowTheFold.current) &&
+      !getInteractiveContent(aboveTheFold.current) &&
+      !getRoleContent(aboveTheFold.current)
+    ) {
       setInteractive(false);
     }
   }, []);
@@ -697,12 +705,13 @@ export const ExpandableTile = React.forwardRef<
     return () => resizeObserver.disconnect();
   }, []);
 
+  const belowTheFoldId = useId('expandable-tile-interactive');
+
   return interactive ? (
     <div
       // @ts-expect-error: Needlesly strict & deep typing for the element type
       ref={ref}
       className={interactiveClassNames}
-      aria-expanded={isExpanded}
       {...rest}>
       <div ref={tileContent}>
         <div ref={aboveTheFold} className={`${prefix}--tile-content`}>
@@ -711,13 +720,17 @@ export const ExpandableTile = React.forwardRef<
         <button
           type="button"
           aria-expanded={isExpanded}
+          aria-controls={belowTheFoldId}
           onKeyUp={composeEventHandlers([onKeyUp, handleKeyUp])}
           onClick={composeEventHandlers([onClick, handleClick])}
           aria-label={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
           className={chevronInteractiveClassNames}>
           <ChevronDown />
         </button>
-        <div ref={belowTheFold} className={`${prefix}--tile-content`}>
+        <div
+          ref={belowTheFold}
+          className={`${prefix}--tile-content`}
+          id={belowTheFoldId}>
           {childrenAsArray[1]}
         </div>
       </div>
diff --git a/packages/react/src/internal/useNoInteractiveChildren.js b/packages/react/src/internal/useNoInteractiveChildren.js
@@ -51,6 +51,32 @@ export function getInteractiveContent(node) {
   return null;
 }
 
+/**
+ * Determines if a given DOM node has a role, or has itself a role.
+ * It returns the node with a role if one is found
+ *
+ * @param {HTMLElement} node
+ * @returns {HTMLElement}
+ */
+export function getRoleContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+
+  if (node?.getAttribute?.('role') && node.getAttribute('role') !== '') {
+    return node;
+  }
+
+  for (const childNode of node.childNodes) {
+    const roleNode = getRoleContent(childNode);
+    if (roleNode) {
+      return roleNode;
+    }
+  }
+
+  return null;
+}
+
 /**
  * Determines if the given element is focusable, or not
  *
