@transferwise/components 0.0.0-experimental-c239b44 → 0.0.0-experimental-e0993c8

package/src/listItem/ListItem.spec.tsx

@@ -9,8 +9,8 @@ describe('ListItem', () => {
   const cb = () => {};
   const title = '__title__';
   const subtitle = '__subtitle__';
-  const value = '__value__';
-  const subvalue = '__subvalue__';
+  const valueTitle = '__valueTitle__';
+  const valueSubtitle = '__valueSubtitle__';
   const additionalInfo = '__additionalInfo__';
   const additionalInfoAction = '__infoAction__';
   const prompt = '__prompt__';
@@ -58,8 +58,8 @@ describe('ListItem', () => {
         <ListItem
           title="Title"
           subtitle="Subtitle"
-          value="100"
-          subvalue="200"
+          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>}
@@ -72,7 +72,7 @@ describe('ListItem', () => {
       expect(describedBy).toMatch(/_title/);
       expect(describedBy).toMatch(/_subtitle/);
       expect(describedBy).toMatch(/_value/);
-      expect(describedBy).toMatch(/_subvalue/);
+      expect(describedBy).toMatch(/_value-subtitle/);
     });
 
     it('sets aria-disabled when disabled', () => {
@@ -100,75 +100,79 @@ describe('ListItem', () => {
           expect(screen.getByRole('switch')).toHaveAccessibleName(`${title} ${subtitle}`);
         });
 
-        it('title, subtitle, and value', () => {
+        it('title, subtitle, and valueTitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
+              valueTitle={valueTitle}
               control={<ListItem.Switch onClick={cb} />}
             />,
           );
 
-          expect(screen.getByRole('switch')).toHaveAccessibleName(`${title} ${subtitle} ${value}`);
+          expect(screen.getByRole('switch')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
         });
 
-        it('title, subtitle, value, and subvalue', () => {
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               control={<ListItem.Switch onClick={cb} />}
             />,
           );
 
           expect(screen.getByRole('switch')).toHaveAccessibleName(
-            `${title} ${subtitle} ${value} ${subvalue}`,
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               inverted
               control={<ListItem.Switch onClick={cb} />}
             />,
           );
 
           expect(screen.getByRole('switch')).toHaveAccessibleName(
-            `${subtitle} ${title} ${subvalue} ${value}`,
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              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} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(additionalInfo);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               control={<ListItem.Switch onClick={cb} />}
@@ -176,17 +180,19 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('switch');
-          expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               inverted
@@ -196,7 +202,7 @@ describe('ListItem', () => {
 
           const control = screen.getByRole('switch');
           expect(screen.getByRole('switch')).toHaveAccessibleName(
-            `${subtitle} ${title} ${subvalue} ${value}`,
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
           );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
@@ -228,76 +234,80 @@ describe('ListItem', () => {
           expect(screen.getByRole('radio')).toHaveAccessibleName(`${title} ${subtitle}`);
         });
 
-        it('title, subtitle, and value', () => {
+        it('title, subtitle, and valueTitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
+              valueTitle={valueTitle}
               control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
             />,
           );
 
-          expect(screen.getByRole('radio')).toHaveAccessibleName(`${title} ${subtitle} ${value}`);
+          expect(screen.getByRole('radio')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
         });
 
-        it('title, subtitle, value, and subvalue', () => {
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
             />,
           );
 
           expect(screen.getByRole('radio')).toHaveAccessibleName(
-            `${title} ${subtitle} ${value} ${subvalue}`,
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               inverted
               control={<ListItem.Radio name="payment" value="card" onChange={cb} />}
             />,
           );
 
           expect(screen.getByRole('radio')).toHaveAccessibleName(
-            `${subtitle} ${title} ${subvalue} ${value}`,
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              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} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(additionalInfo);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              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} />}
@@ -305,17 +315,19 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('radio');
-          expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               inverted
@@ -324,7 +336,9 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('radio');
-          expect(control).toHaveAccessibleName(`${subtitle} ${title} ${subvalue} ${value}`);
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
       });
@@ -350,76 +364,80 @@ describe('ListItem', () => {
           expect(screen.getByRole('link')).toHaveAccessibleName(`${title} ${subtitle}`);
         });
 
-        it('title, subtitle, and value', () => {
+        it('title, subtitle, and valueTitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
+              valueTitle={valueTitle}
               control={<ListItem.Navigation href="/settings" />}
             />,
           );
 
-          expect(screen.getByRole('link')).toHaveAccessibleName(`${title} ${subtitle} ${value}`);
+          expect(screen.getByRole('link')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
         });
 
-        it('title, subtitle, value, and subvalue', () => {
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               control={<ListItem.Navigation href="/settings" />}
             />,
           );
 
           expect(screen.getByRole('link')).toHaveAccessibleName(
-            `${title} ${subtitle} ${value} ${subvalue}`,
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               inverted
               control={<ListItem.Navigation href="/settings" />}
             />,
           );
 
           expect(screen.getByRole('link')).toHaveAccessibleName(
-            `${subtitle} ${title} ${subvalue} ${value}`,
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              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} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(additionalInfo);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               control={<ListItem.Navigation href="/settings" />}
@@ -427,17 +445,19 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('link');
-          expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               inverted
@@ -446,7 +466,9 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('link');
-          expect(control).toHaveAccessibleName(`${subtitle} ${title} ${subvalue} ${value}`);
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
       });
@@ -472,78 +494,80 @@ describe('ListItem', () => {
           expect(screen.getByRole('checkbox')).toHaveAccessibleName(`${title} ${subtitle}`);
         });
 
-        it('title, subtitle, and value', () => {
+        it('title, subtitle, and valueTitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
+              valueTitle={valueTitle}
               control={<ListItem.Checkbox onChange={cb} />}
             />,
           );
 
           expect(screen.getByRole('checkbox')).toHaveAccessibleName(
-            `${title} ${subtitle} ${value}`,
+            `${title} ${subtitle} ${valueTitle}`,
           );
         });
 
-        it('title, subtitle, value, and subvalue', () => {
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               control={<ListItem.Checkbox onChange={cb} />}
             />,
           );
 
           expect(screen.getByRole('checkbox')).toHaveAccessibleName(
-            `${title} ${subtitle} ${value} ${subvalue}`,
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               inverted
               control={<ListItem.Checkbox onChange={cb} />}
             />,
           );
 
           expect(screen.getByRole('checkbox')).toHaveAccessibleName(
-            `${subtitle} ${title} ${subvalue} ${value}`,
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              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} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(additionalInfo);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               control={<ListItem.Checkbox onChange={cb} />}
@@ -551,17 +575,19 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('checkbox');
-          expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               inverted
@@ -570,7 +596,9 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('checkbox');
-          expect(control).toHaveAccessibleName(`${subtitle} ${title} ${subvalue} ${value}`);
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
       });
@@ -609,12 +637,12 @@ describe('ListItem', () => {
           expect(screen.getByRole('button')).toHaveAccessibleName(`${title} ${subtitle}`);
         });
 
-        it('title, subtitle, and value', () => {
+        it('title, subtitle, and valueTitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
+              valueTitle={valueTitle}
               control={
                 <ListItem.IconButton onClick={cb}>
                   <Edit />
@@ -623,16 +651,18 @@ describe('ListItem', () => {
             />,
           );
 
-          expect(screen.getByRole('button')).toHaveAccessibleName(`${title} ${subtitle} ${value}`);
+          expect(screen.getByRole('button')).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle}`,
+          );
         });
 
-        it('title, subtitle, value, and subvalue', () => {
+        it('title, subtitle, valueTitle, and valueSubtitle', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               control={
                 <ListItem.IconButton onClick={cb}>
                   <Edit />
@@ -642,17 +672,17 @@ describe('ListItem', () => {
           );
 
           expect(screen.getByRole('button')).toHaveAccessibleName(
-            `${title} ${subtitle} ${value} ${subvalue}`,
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               inverted
               control={
                 <ListItem.IconButton onClick={cb}>
@@ -663,17 +693,17 @@ describe('ListItem', () => {
           );
 
           expect(screen.getByRole('button')).toHaveAccessibleName(
-            `${subtitle} ${title} ${subvalue} ${value}`,
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
           );
         });
 
-        it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               control={
                 <ListItem.IconButton onClick={cb}>
@@ -684,17 +714,19 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('button');
-          expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(additionalInfo);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               control={
@@ -706,17 +738,19 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('button');
-          expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+          expect(control).toHaveAccessibleName(
+            `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
 
-        it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+        it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
           render(
             <ListItem
               title={title}
               subtitle={subtitle}
-              value={value}
-              subvalue={subvalue}
+              valueTitle={valueTitle}
+              valueSubtitle={valueSubtitle}
               additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
               prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
               inverted
@@ -729,7 +763,9 @@ describe('ListItem', () => {
           );
 
           const control = screen.getByRole('button');
-          expect(control).toHaveAccessibleName(`${subtitle} ${title} ${subvalue} ${value}`);
+          expect(control).toHaveAccessibleName(
+            `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+          );
           expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
         });
       });
@@ -767,12 +803,12 @@ describe('ListItem', () => {
             expect(screen.getByRole('button')).toHaveAccessibleName(`${title} ${subtitle}`);
           });
 
-          it('title, subtitle, and value', () => {
+          it('title, subtitle, and valueTitle', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
+                valueTitle={valueTitle}
                 control={
                   <ListItem.IconButton partiallyInteractive onClick={cb}>
                     <Edit />
@@ -782,17 +818,17 @@ describe('ListItem', () => {
             );
 
             expect(screen.getByRole('button')).toHaveAccessibleName(
-              `${title} ${subtitle} ${value}`,
+              `${title} ${subtitle} ${valueTitle}`,
             );
           });
 
-          it('title, subtitle, value, and subvalue', () => {
+          it('title, subtitle, valueTitle, and valueSubtitle', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 control={
                   <ListItem.IconButton partiallyInteractive onClick={cb}>
                     <Edit />
@@ -802,17 +838,17 @@ describe('ListItem', () => {
             );
 
             expect(screen.getByRole('button')).toHaveAccessibleName(
-              `${title} ${subtitle} ${value} ${subvalue}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
             );
           });
 
-          it('title, subtitle, value, subvalue and inverted layout', () => {
+          it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 inverted
                 control={
                   <ListItem.IconButton partiallyInteractive onClick={cb}>
@@ -823,17 +859,17 @@ describe('ListItem', () => {
             );
 
             expect(screen.getByRole('button')).toHaveAccessibleName(
-              `${subtitle} ${title} ${subvalue} ${value}`,
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 control={
                   <ListItem.IconButton partiallyInteractive onClick={cb}>
@@ -844,18 +880,18 @@ describe('ListItem', () => {
             );
 
             expect(screen.getByRole('button')).toHaveAccessibleName(
-              `${title} ${subtitle} ${value} ${subvalue}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
             );
             expect(screen.getByRole('button')).toHaveAccessibleDescription(additionalInfo);
           });
 
-          it('title, subtitle, value, subvalue, and additionalInfo with link action', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with link action', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={
                   <ListItem.AdditionalInfo
                     action={{
@@ -875,19 +911,21 @@ describe('ListItem', () => {
             );
 
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(control).toHaveAccessibleDescription(
               `${additionalInfo} ${additionalInfoAction}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, and additionalInfo with button action', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with button action', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={
                   <ListItem.AdditionalInfo action={{ label: additionalInfoAction, onClick: cb }}>
                     {additionalInfo}
@@ -902,19 +940,21 @@ describe('ListItem', () => {
             );
 
             const control = screen.getAllByRole('button')[0];
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(control).toHaveAccessibleDescription(
               `${additionalInfo} ${additionalInfoAction}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
                 control={
@@ -925,17 +965,19 @@ describe('ListItem', () => {
               />,
             );
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt with inline link', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline link', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{promptWithLink}</ListItem.Prompt>}
                 control={
@@ -946,19 +988,21 @@ describe('ListItem', () => {
               />,
             );
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(screen.getByRole('button')).toHaveAccessibleDescription(
               `${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt with inline button', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline button', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{promptWithButton}</ListItem.Prompt>}
                 control={
@@ -970,19 +1014,21 @@ describe('ListItem', () => {
             );
 
             const control = screen.getAllByRole('button')[0];
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(control).toHaveAccessibleDescription(
               `${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
                 inverted
@@ -995,7 +1041,9 @@ describe('ListItem', () => {
             );
 
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${subtitle} ${title} ${subvalue} ${value}`);
+            expect(control).toHaveAccessibleName(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
             expect(control).toHaveAccessibleDescription(`${additionalInfo} ${prompt}`);
           });
         });
@@ -1032,78 +1080,84 @@ describe('ListItem', () => {
             expect(control).toHaveAccessibleDescription(`Save`);
           });
 
-          it('title, subtitle, and value', () => {
+          it('title, subtitle, and valueTitle', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
+                valueTitle={valueTitle}
                 control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
               />,
             );
 
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value}`);
+            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${valueTitle}`);
             expect(control).toHaveAccessibleDescription(`Save`);
           });
 
-          it('title, subtitle, value, and subvalue', () => {
+          it('title, subtitle, valueTitle, and valueSubtitle', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
               />,
             );
 
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(control).toHaveAccessibleDescription(`Save`);
           });
 
-          it('title, subtitle, value, subvalue and inverted layout', () => {
+          it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 inverted
                 control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
               />,
             );
 
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${subtitle} ${title} ${subvalue} ${value}`);
+            expect(control).toHaveAccessibleName(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
             expect(control).toHaveAccessibleDescription(`Save`);
           });
 
-          it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                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} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(control).toHaveAccessibleDescription(`Save ${additionalInfo}`);
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
                 control={<ListItem.Button onClick={cb}>Save</ListItem.Button>}
@@ -1111,17 +1165,19 @@ describe('ListItem', () => {
             );
 
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${title} ${subtitle} ${value} ${subvalue}`);
+            expect(control).toHaveAccessibleName(
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
+            );
             expect(control).toHaveAccessibleDescription(`Save ${additionalInfo} ${prompt}`);
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
                 inverted
@@ -1130,7 +1186,9 @@ describe('ListItem', () => {
             );
 
             const control = screen.getByRole('button');
-            expect(control).toHaveAccessibleName(`${subtitle} ${title} ${subvalue} ${value}`);
+            expect(control).toHaveAccessibleName(
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
+            );
             expect(control).toHaveAccessibleDescription(`Save ${additionalInfo} ${prompt}`);
           });
         });
@@ -1173,12 +1231,12 @@ describe('ListItem', () => {
             expect(control).toHaveAccessibleDescription(`${title} ${subtitle}`);
           });
 
-          it('title, subtitle, and value', () => {
+          it('title, subtitle, and valueTitle', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
+                valueTitle={valueTitle}
                 control={
                   <ListItem.Button partiallyInteractive onClick={cb}>
                     Save
@@ -1189,16 +1247,16 @@ describe('ListItem', () => {
 
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
-            expect(control).toHaveAccessibleDescription(`${title} ${subtitle} ${value}`);
+            expect(control).toHaveAccessibleDescription(`${title} ${subtitle} ${valueTitle}`);
           });
 
-          it('title, subtitle, value, and subvalue', () => {
+          it('title, subtitle, valueTitle, and valueSubtitle', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 control={
                   <ListItem.Button partiallyInteractive onClick={cb}>
                     Save
@@ -1210,17 +1268,17 @@ describe('ListItem', () => {
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${title} ${subtitle} ${value} ${subvalue}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle}`,
             );
           });
 
-          it('title, subtitle, value, subvalue and inverted layout', () => {
+          it('title, subtitle, valueTitle, valueSubtitle and inverted layout', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 inverted
                 control={
                   <ListItem.Button partiallyInteractive onClick={cb}>
@@ -1233,17 +1291,17 @@ describe('ListItem', () => {
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${subtitle} ${title} ${subvalue} ${value}`,
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, and non-interactive additionalInfo', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, and non-interactive additionalInfo', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 control={
                   <ListItem.Button partiallyInteractive onClick={cb}>
@@ -1256,17 +1314,17 @@ describe('ListItem', () => {
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${title} ${subtitle} ${value} ${subvalue} ${additionalInfo}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, and additionalInfo with link action', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with link action', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={
                   <ListItem.AdditionalInfo
                     action={{
@@ -1288,17 +1346,17 @@ describe('ListItem', () => {
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${title} ${subtitle} ${value} ${subvalue} ${additionalInfo} ${additionalInfoAction}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${additionalInfoAction}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, and additionalInfo with button action', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, and additionalInfo with button action', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={
                   <ListItem.AdditionalInfo action={{ label: additionalInfoAction, onClick: cb }}>
                     {additionalInfo}
@@ -1315,17 +1373,17 @@ describe('ListItem', () => {
             const control = screen.getAllByRole('button')[0];
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${title} ${subtitle} ${value} ${subvalue} ${additionalInfo} ${additionalInfoAction}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${additionalInfoAction}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
                 control={
@@ -1339,17 +1397,17 @@ describe('ListItem', () => {
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${title} ${subtitle} ${value} ${subvalue} ${additionalInfo} ${prompt}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt with inline link', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline link', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{promptWithLink}</ListItem.Prompt>}
                 control={
@@ -1363,17 +1421,17 @@ describe('ListItem', () => {
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${title} ${subtitle} ${value} ${subvalue} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, and prompt with inline button', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, and prompt with inline button', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{promptWithButton}</ListItem.Prompt>}
                 control={
@@ -1387,17 +1445,17 @@ describe('ListItem', () => {
             const control = screen.getAllByRole('button')[0];
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${title} ${subtitle} ${value} ${subvalue} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
+              `${title} ${subtitle} ${valueTitle} ${valueSubtitle} ${additionalInfo} ${prompt} ${promptAction} ${prompt}`,
             );
           });
 
-          it('title, subtitle, value, subvalue, non-interactive additionalInfo, prompt, and inverted layout', () => {
+          it('title, subtitle, valueTitle, valueSubtitle, non-interactive additionalInfo, prompt, and inverted layout', () => {
             render(
               <ListItem
                 title={title}
                 subtitle={subtitle}
-                value={value}
-                subvalue={subvalue}
+                valueTitle={valueTitle}
+                valueSubtitle={valueSubtitle}
                 additionalInfo={<ListItem.AdditionalInfo>{additionalInfo}</ListItem.AdditionalInfo>}
                 prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
                 inverted
@@ -1412,7 +1470,7 @@ describe('ListItem', () => {
             const control = screen.getByRole('button');
             expect(control).toHaveAccessibleName(`Save`);
             expect(control).toHaveAccessibleDescription(
-              `${subtitle} ${title} ${subvalue} ${value} ${additionalInfo} ${prompt}`,
+              `${subtitle} ${title} ${valueSubtitle} ${valueTitle} ${additionalInfo} ${prompt}`,
             );
           });
         });