From 49644913539edb5734f064b87a4dcd677474f626 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 16 Jan 2024 15:01:30 -0800
Subject: [PATCH] feat(list-item): Add tooltip for expanding and collapsing
 (#8612)

**Related Issue:** #8613

## Summary

- Adds tooltip for expand/collapse button.
---
 .../list-item/assets/list-item/t9n/messages.json       |  4 +++-
 .../list-item/assets/list-item/t9n/messages_en.json    |  4 +++-
 .../src/components/list-item/list-item.tsx             | 10 ++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages.json b/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages.json
index 0c5bb0e5a1c..992d666ebb0 100644
--- a/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages.json
+++ b/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages.json
@@ -1,3 +1,5 @@
 {
-  "close": "Close"
+  "close": "Close",
+  "expand": "Expand",
+  "collapse": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages_en.json b/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages_en.json
index 0c5bb0e5a1c..992d666ebb0 100644
--- a/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages_en.json
+++ b/packages/calcite-components/src/components/list-item/assets/list-item/t9n/messages_en.json
@@ -1,3 +1,5 @@
 {
-  "close": "Close"
+  "close": "Close",
+  "expand": "Expand",
+  "collapse": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index dab6d4f0e3c..bae7dae2e8d 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -471,12 +471,18 @@ export class ListItem
   }
 
   renderOpen(): VNode {
-    const { el, open, openable } = this;
+    const { el, open, openable, messages } = this;
     const dir = getElementDir(el);
     const icon = open ? ICONS.open : dir === "rtl" ? ICONS.closedRTL : ICONS.closedLTR;
+    const tooltip = open ? messages.collapse : messages.expand;
 
     return openable ? (
-      <td class={CSS.openContainer} key="open-container" onClick={this.handleToggleClick}>
+      <td
+        class={CSS.openContainer}
+        key="open-container"
+        onClick={this.handleToggleClick}
+        title={tooltip}
+      >
         <calcite-icon icon={icon} key={icon} scale="s" />
       </td>
     ) : null;