@transferwise/components 46.103.1 → 46.105.0

package/src/listItem/ListItem.spec.tsx

@@ -0,0 +1,1511 @@
+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={title} />);
+      expect(screen.getByRole('listitem')).toHaveAttribute('id', 'custom-id');
+    });
+
+    it('sets aria-describedby with correct IDs for fully interactive list item with prompt and additionalInfo', () => {
+      render(
+        <ListItem
+          title="Title"
+          subtitle="Subtitle"
+          control={<ListItem.Button>Hello</ListItem.Button>}
+          additionalInfo={<ListItem.AdditionalInfo>Additional Info</ListItem.AdditionalInfo>}
+          prompt={<ListItem.Prompt sentiment="positive">Hello</ListItem.Prompt>}
+        />,
+      );
+      const item = screen.getByRole('button');
+      const describedBy = item.getAttribute('aria-describedby') || '';
+      expect(describedBy).toMatch(/_additional-info/);
+      expect(describedBy).toMatch(/_prompt/);
+    });
+
+    it('sets aria-describedby with correct IDs for partially interactive list item with title, subtitle, value, subvalue, prompt and additionalInfo', () => {
+      render(
+        <ListItem
+          title="Title"
+          subtitle="Subtitle"
+          valueTitle="100"
+          valueSubtitle="200"
+          control={<ListItem.Button partiallyInteractive>Hello</ListItem.Button>}
+          additionalInfo={<ListItem.AdditionalInfo>Additional Info</ListItem.AdditionalInfo>}
+          prompt={<ListItem.Prompt sentiment="negative">Hello</ListItem.Prompt>}
+        />,
+      );
+      const item = screen.getByRole('button');
+      const describedBy = item.getAttribute('aria-describedby') || '';
+      expect(describedBy).toMatch(/_additional-info/);
+      expect(describedBy).toMatch(/_prompt/);
+      expect(describedBy).toMatch(/_title/);
+      expect(describedBy).toMatch(/_subtitle/);
+      expect(describedBy).toMatch(/_value/);
+      expect(describedBy).toMatch(/_value-subtitle/);
+    });
+
+    it('sets aria-disabled when 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>
+              }
+            />,
+          );
+
+          const control = screen.getByRole('button');
+          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.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          const control = screen.getByRole('button');
+          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.IconButton onClick={cb}>
+                  <Edit />
+                </ListItem.IconButton>
+              }
+            />,
+          );
+
+          const control = screen.getByRole('button');
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
+          expect(control).toHaveAccessibleDescription(`${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')).toHaveAccessibleName(title);
+          });
+
+          it('title and subtitle', () => {
+            render(
+              <ListItem
+                title={title}
+                subtitle={subtitle}
+                control={
+                  <ListItem.IconButton partiallyInteractive 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 partiallyInteractive 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 partiallyInteractive 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 partiallyInteractive 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 partiallyInteractive onClick={cb}>
+                    <Edit />
+                  </ListItem.IconButton>
+                }
+              />,
+            );
+
+            expect(screen.getByRole('button')).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(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>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(
+              `${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>
+                }
+              />,
+            );
+
+            const control = screen.getAllByRole('button')[0];
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(
+              `${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>
+                }
+              />,
+            );
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(`${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>
+                }
+              />,
+            );
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(screen.getByRole('button')).toHaveAccessibleDescription(
+              `${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>
+                }
+              />,
+            );
+
+            const control = screen.getAllByRole('button')[0];
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(
+              `${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>
+                }
+              />,
+            );
+
+            const control = screen.getByRole('button');
+            expect(control).toHaveAccessibleName(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
+            expect(control).toHaveAccessibleDescription(`${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>
+                }
+              />,
+            );
+
+            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', () => {
+    it('only fully interactive variant can have spotlight:active', () => {
+      render(<ListItem title="Test Title" spotlight="active" control={<ListItem.Navigation />} />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+    });
+
+    it('only fully interactive variant can have spotlight:inactive', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          spotlight="inactive"
+          control={<ListItem.Switch onClick={cb} />}
+        />,
+      );
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+    });
+
+    it('non interactive variant can have spotlight', () => {
+      render(<ListItem title="Test Title" spotlight="inactive" />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-non-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+    });
+  });
+});