fix(react-tree): move unit test to appropriate location

Author: PaulGMardling

packages/react-components/react-tree/library/src/components/Tree/Tree.test.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { isConformant } from '../../testing/isConformant';
 import { Tree } from './Tree';
 import { TreeItem } from '../TreeItem/TreeItem';
+import { TreeItemLayout } from '../TreeItemLayout/TreeItemLayout';
+import { TreeItemPersonaLayout } from '../TreeItemPersonaLayout/TreeItemPersonaLayout';
 
 describe('Tree', () => {
   isConformant({
@@ -37,4 +39,40 @@ describe('Tree', () => {
 
     expect(handleOpenChange).toHaveBeenNthCalledWith(2, expect.any(Object), expect.objectContaining({ open: false }));
   });
+
+  describe('selection control accessibility', () => {
+    it.each([
+      {
+        case: 'multiselect',
+        selectionMode: 'multiselect',
+        role: 'checkbox',
+        layout: <TreeItemLayout>Item 1</TreeItemLayout>,
+        accessibleName: 'Item 1',
+      },
+      {
+        case: 'single',
+        selectionMode: 'single',
+        role: 'radio',
+        layout: <TreeItemLayout>Item 1</TreeItemLayout>,
+        accessibleName: 'Item 1',
+      },
+      {
+        case: 'TreeItemPersonaLayout',
+        selectionMode: 'multiselect',
+        role: 'checkbox',
+        layout: <TreeItemPersonaLayout>Jane Doe</TreeItemPersonaLayout>,
+        accessibleName: 'Jane Doe',
+      },
+    ] as const)('exposes a named $role selector ($case)', ({ selectionMode, role, layout, accessibleName }) => {
+      render(
+        <Tree aria-label="Tree" selectionMode={selectionMode}>
+          <TreeItem itemType="leaf" value="item1">
+            {layout}
+          </TreeItem>
+        </Tree>,
+      );
+
+      expect(screen.getByRole(role, { name: accessibleName })).toBeTruthy();
+    });
+  });
 });

packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.test.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { TreeItemLayout } from './TreeItemLayout';
 import { isConformant } from '../../testing/isConformant';
 import { TreeItemProvider } from '../../contexts';
-import { Tree } from '../../Tree';
-import { TreeItem } from '../TreeItem/TreeItem';
 
 const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
   <TreeItemProvider
@@ -51,31 +49,4 @@ describe('TreeItemLayout', () => {
     const result = render(<TreeItemLayout>Default TreeItemLayout</TreeItemLayout>);
     expect(result.container).toMatchSnapshot();
   });
-
-  // Regression tests for the accessibility fix that exposes the selection control to assistive
-  // technologies (e.g. Voice Access). The selector must not be `aria-hidden` (so it is found by
-  // role) and must have an accessible name derived from the item content. See MAS 4.3.1.
-  it('exposes the multiselect selection control with an accessible name', () => {
-    render(
-      <Tree aria-label="Tree" selectionMode="multiselect">
-        <TreeItem itemType="leaf" value="item1">
-          <TreeItemLayout>Item 1</TreeItemLayout>
-        </TreeItem>
-      </Tree>,
-    );
-
-    expect(screen.getByRole('checkbox', { name: 'Item 1' })).toBeTruthy();
-  });
-
-  it('exposes the single-selection control with an accessible name', () => {
-    render(
-      <Tree aria-label="Tree" selectionMode="single">
-        <TreeItem itemType="leaf" value="item1">
-          <TreeItemLayout>Item 1</TreeItemLayout>
-        </TreeItem>
-      </Tree>,
-    );
-
-    expect(screen.getByRole('radio', { name: 'Item 1' })).toBeTruthy();
-  });
 });

packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { TreeItemPersonaLayout } from './TreeItemPersonaLayout';
 import { isConformant } from '../../testing/isConformant';
 import { TreeItemProvider } from '../../contexts';
-import { Tree } from '../../Tree';
-import { TreeItem } from '../TreeItem/TreeItem';
 
 const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
   <TreeItemProvider
@@ -52,19 +50,4 @@ describe('TreeItemPersonaLayout', () => {
     const result = render(<TreeItemPersonaLayout>Default TreeItemPersonaLayout</TreeItemPersonaLayout>);
     expect(result.container).toMatchSnapshot();
   });
-
-  // Regression test: the persona layout shares the selection control via TreeItemLayout, so it
-  // must also expose a named selector. The content id is carried onto its `main` slot so the
-  // selector's `aria-labelledby` resolves here too. See MAS 4.3.1.
-  it('exposes the selection control with an accessible name', () => {
-    render(
-      <Tree aria-label="Tree" selectionMode="multiselect">
-        <TreeItem itemType="leaf" value="item1">
-          <TreeItemPersonaLayout>Jane Doe</TreeItemPersonaLayout>
-        </TreeItem>
-      </Tree>,
-    );
-
-    expect(screen.getByRole('checkbox', { name: 'Jane Doe' })).toBeTruthy();
-  });
 });