@transferwise/components 0.0.0-experimental-751dc12 → 0.0.0-experimental-4341b9c

package/src/listItem/ListItem.spec.tsx

@@ -1,1496 +0,0 @@
-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 custom role on the container', () => {
-      render(<ListItem title={title} role="button" />);
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('sets aria-labelledby when provided', () => {
-      render(<ListItem title={title} aria-labelledby="Accessible label" />);
-      expect(screen.getByRole('listitem')).toHaveAttribute('aria-labelledby', 'Accessible label');
-    });
-
-    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>
-              }
-            />,
-          );
-
-          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', () => {
-    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');
-    });
-  });
-});