@transferwise/components 0.0.0-experimental-131773e → 0.0.0-experimental-1bec623

package/src/listItem/ListItem.spec.tsx

@@ -1,22 +1,49 @@
-import { render, screen, mockMatchMedia } from '../test-utils';
-import ListItem from './ListItem';
+import { mockMatchMedia, render, screen } from '../test-utils';
+import { Edit } from '@transferwise/icons';
+import Link from '../link';
+import { ListItem } from './ListItem';
 
 mockMatchMedia();
 
 describe('ListItem', () => {
+  const cb = () => {};
+  const title = '__title__';
+  const subtitle = '__subtitle__';
+  const valueTitle = '__valueTitle__';
+  const valueSubtitle = '__valueSubtitle__';
+  const additionalInfo = '__additionalInfo__';
+  const additionalInfoAction = '__infoAction__';
+  const prompt = '__prompt__';
+  const promptAction = '__promptAction__';
+  const promptWithLink = (
+    <>
+      {prompt}
+      <Link href="wise.com">{promptAction}</Link>
+      {prompt}
+    </>
+  );
+  const promptWithButton = (
+    <>
+      {prompt}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <Link onClick={cb}>{promptAction}</Link>
+      {prompt}
+    </>
+  );
+
   describe('aria and a11y attributes', () => {
     it('sets id on the container', () => {
-      render(<ListItem id="custom-id" title="Test Title" />);
+      render(<ListItem id="custom-id" title={title} />);
       expect(screen.getByRole('listitem')).toHaveAttribute('id', 'custom-id');
     });
 
     it('sets custom role on the container', () => {
-      render(<ListItem title="Test Title" role="button" />);
+      render(<ListItem title={title} role="button" />);
       expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
     it('sets aria-labelledby when provided', () => {
-      render(<ListItem title="Test Title" aria-labelledby="Accessible label" />);
+      render(<ListItem title={title} aria-labelledby="Accessible label" />);
       expect(screen.getByRole('listitem')).toHaveAttribute('aria-labelledby', 'Accessible label');
     });
 
@@ -59,9 +86,1381 @@ describe('ListItem', () => {
     });
 
     it('sets aria-disabled when disabled', () => {
-      render(<ListItem title="Disabled" disabled />);
+      render(<ListItem title={title} disabled />);
       expect(screen.getByRole('listitem')).toHaveAttribute('aria-disabled', 'true');
     });
+
+    describe('Switch', () => {
+      describe('has accessible name when used with:', () => {
+        it('title', () => {
+          render(<ListItem title={title} control={<ListItem.Switch onClick={cb} />} />);
+
+          expect(screen.getByRole('switch')).toHaveAccessibleName(title);
+        });
+
+        it('title and subtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              control={<ListItem.Switch onClick={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('switch')).toHaveAccessibleName(`${title} ${subtitle}`);
+        });
+
+        it('title, subtitle, and valueTitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              control={<ListItem.Switch onClick={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('switch')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              control={<ListItem.Switch onClick={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('switch')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              inverted
+              control={<ListItem.Switch onClick={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('switch')).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              control={<ListItem.Switch onClick={cb} />}
+            />,
+          );
+          const control = screen.getByRole('switch');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(additionalInfo);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              control={<ListItem.Switch onClick={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('switch');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              inverted
+              control={<ListItem.Switch onClick={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('switch');
+          expect(screen.getByRole('switch')).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+      });
+    });
+
+    describe('Radio', () => {
+      describe('has accessible name when used with:', () => {
+        it('title', () => {
+          render(
+            <ListItem
+              title={title}
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('radio')).toHaveAccessibleName(title);
+        });
+
+        it('title and subtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('radio')).toHaveAccessibleName(`${title} ${subtitle}`);
+        });
+
+        it('title, subtitle, and valueTitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('radio')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('radio')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              inverted
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('radio')).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('radio');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(additionalInfo);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('radio');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              inverted
+              control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('radio');
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+      });
+    });
+
+    describe('Navigation', () => {
+      describe('has accessible name when used with:', () => {
+        it('title', () => {
+          render(<ListItem title={title} control={<ListItem.Navigation href="/settings" />} />);
+
+          expect(screen.getByRole('link')).toHaveAccessibleName(title);
+        });
+
+        it('title and subtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              control={<ListItem.Navigation href="/settings" />}
+            />,
+          );
+
+          expect(screen.getByRole('link')).toHaveAccessibleName(`${title} ${subtitle}`);
+        });
+
+        it('title, subtitle, and valueTitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              control={<ListItem.Navigation href="/settings" />}
+            />,
+          );
+
+          expect(screen.getByRole('link')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              control={<ListItem.Navigation href="/settings" />}
+            />,
+          );
+
+          expect(screen.getByRole('link')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              inverted
+              control={<ListItem.Navigation href="/settings" />}
+            />,
+          );
+
+          expect(screen.getByRole('link')).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              control={<ListItem.Navigation href="/settings" />}
+            />,
+          );
+
+          const control = screen.getByRole('link');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(additionalInfo);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              control={<ListItem.Navigation href="/settings" />}
+            />,
+          );
+
+          const control = screen.getByRole('link');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              inverted
+              control={<ListItem.Navigation href="/settings" />}
+            />,
+          );
+
+          const control = screen.getByRole('link');
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+      });
+    });
+
+    describe('Checkbox', () => {
+      describe('has accessible name when used with:', () => {
+        it('title', () => {
+          render(<ListItem title={title} control={<ListItem.Checkbox onChange={cb} />} />);
+
+          expect(screen.getByRole('checkbox')).toHaveAccessibleName(title);
+        });
+
+        it('title and subtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              control={<ListItem.Checkbox onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('checkbox')).toHaveAccessibleName(`${title} ${subtitle}`);
+        });
+
+        it('title, subtitle, and valueTitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              control={<ListItem.Checkbox onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('checkbox')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              control={<ListItem.Checkbox onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('checkbox')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              inverted
+              control={<ListItem.Checkbox onChange={cb} />}
+            />,
+          );
+
+          expect(screen.getByRole('checkbox')).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              control={<ListItem.Checkbox onChange={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('checkbox');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(additionalInfo);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              control={<ListItem.Checkbox onChange={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('checkbox');
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              inverted
+              control={<ListItem.Checkbox onChange={cb} />}
+            />,
+          );
+
+          const control = screen.getByRole('checkbox');
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
+        });
+      });
+    });
+
+    describe('IconButton', () => {
+      describe('Fully interactive', () => {
+        it('title', () => {
+          render(
+            <ListItem
+              title={title}
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleName(title);
+        });
+
+        it('title and subtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleName(`${title} ${subtitle}`);
+        });
+
+        it('title, subtitle, and valueTitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              inverted
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleDescription(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleDescription(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt}`,
+          );
+        });
+
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          render(
+            <ListItem
+              title={title}
+              subtitle={subtitle}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
+              additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+              prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+              inverted
+              control={
+                <ListItem.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          expect(screen.getByRole('button')).toHaveAccessibleDescription(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle} ${additionalInfo} ${prompt}`,
+          );
+        });
+      });
+
+      describe('Partially interactive', () => {
+        describe('has accessible name when used with:', () => {
+          it('title', () => {
+            render(
+              <ListItem
+                title={title}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(title);
+          });
+
+          it('title and subtitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(`${title} ${subtitle}`);
+          });
+
+          it('title, subtitle, and valueTitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, and valueSubtitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                inverted
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with link action', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={
+                  <ListItem.AdditionalInfo
+                    action={{
+                      label: additionalInfoAction,
+                      href: 'wise.com',
+                    }}
+                  >
+                    {additionalInfo}
+                  </ListItem.AdditionalInfo>
+                }
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${additionalInfoAction}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with button action', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={
+                  <ListItem.AdditionalInfo action={{ label: additionalInfoAction, onClick: cb }}>
+                    {additionalInfo}
+                  </ListItem.AdditionalInfo>
+                }
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getAllByRole('button')[0]).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${additionalInfoAction}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline link', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{promptWithLink}</ListItem.Prompt>}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline button', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{promptWithButton}</ListItem.Prompt>}
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getAllByRole('button')[0]).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+                inverted
+                control={
+                  <ListItem.IconButton partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle} ${additionalInfo} ${prompt}`,
+            );
+          });
+        });
+      });
+    });
+
+    describe('Button', () => {
+      describe('Fully interactive', () => {
+        describe('has accessible name when used with:', () => {
+          it('title', () => {
+            render(
+              <ListItem
+                title={title}
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(title);
+            expect(control).toHaveAccessibleDescription(`Save`);
+          });
+
+          it('title and subtitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`${title} ${subtitle}`);
+            expect(control).toHaveAccessibleDescription(`Save`);
+          });
+
+          it('title, subtitle, and valueTitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${valueTitle}`);
+            expect(control).toHaveAccessibleDescription(`Save`);
+          });
+
+          it('title, subtitle, valueTitle, and valueSubtitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(`Save`);
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                inverted
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(`Save`);
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(`Save ${additionalInfo}`);
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(`Save ${additionalInfo} ${prompt}`);
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+                inverted
+                control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(`Save ${additionalInfo} ${prompt}`);
+          });
+        });
+      });
+
+      describe('Partially interactive', () => {
+        describe('has accessible name when used with:', () => {
+          it('title', () => {
+            render(
+              <ListItem
+                title={title}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(title);
+          });
+
+          it('title and subtitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(`${title} ${subtitle}`);
+          });
+
+          it('title, subtitle, and valueTitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(`${title} ${subtitle} ${valueTitle}`);
+          });
+
+          it('title, subtitle, valueTitle, and valueSubtitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                inverted
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with link action', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={
+                  <ListItem.AdditionalInfo
+                    action={{
+                      label: additionalInfoAction,
+                      href: 'wise.com',
+                    }}
+                  >
+                    {additionalInfo}
+                  </ListItem.AdditionalInfo>
+                }
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+            screen.debug(undefined, 99999999);
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${additionalInfoAction}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with button action', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={
+                  <ListItem.AdditionalInfo action={{ label: additionalInfoAction, onClick: cb }}>
+                    {additionalInfo}
+                  </ListItem.AdditionalInfo>
+                }
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getAllByRole('button')[0];
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${additionalInfoAction}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline link', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{promptWithLink}</ListItem.Prompt>}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline button', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{promptWithButton}</ListItem.Prompt>}
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getAllByRole('button')[0];
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
+            );
+          });
+
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
+                additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
+                prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+                inverted
+                control={
+                  <ListItem.Button partiallyInteractive onClick={cb}>
+                    Save
+                  </ListItem.Button>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(`Save`);
+            expect(control).toHaveAccessibleDescription(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle} ${additionalInfo} ${prompt}`,
+            );
+          });
+        });
+      });
+    });
   });
 
   describe('spotlight', () => {
@@ -77,7 +1476,7 @@ describe('ListItem', () => {
         <ListItem
           title="Test Title"
           spotlight="inactive"
-          control={<ListItem.Switch onClick={() => {}} />}
+          control={<ListItem.Switch onClick={cb} />}
         />,
       );
       const listItem = screen.getByRole('listitem');