From 47cb417f89936e4bcb9ad37b0758c3de3e437f11 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 29 Jun 2023 10:49:10 -0700
Subject: [PATCH 1/4] fix(tooltip): deprecate the label property and make it
 optional. #6329

---
 .../src/components/tooltip/tooltip.e2e.ts     | 10 +-
 .../src/components/tooltip/tooltip.stories.ts |  2 +-
 .../src/components/tooltip/tooltip.tsx        |  8 +-
 .../calcite-components/src/demos/tooltip.html | 94 ++++++-------------
 4 files changed, 41 insertions(+), 73 deletions(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
index 5e536df33aa..a62583b2952 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -46,11 +46,15 @@ describe("calcite-tooltip", () => {
   });
 
   describe("accessible when closed", () => {
-    accessible(`<calcite-tooltip label="test" reference-element="ref"></calcite-tooltip><div id="ref">😄</div>`);
+    accessible(
+      `<calcite-tooltip reference-element="ref">Hello World!</calcite-tooltip><div id="ref">Tooltip Reference</div>`
+    );
   });
 
   describe("accessible when open", () => {
-    accessible(`<calcite-tooltip label="test" open reference-element="ref"></calcite-tooltip><div id="ref">😄</div>`);
+    accessible(
+      `<calcite-tooltip open reference-element="ref">Hello World!</calcite-tooltip><div id="ref">Tooltip Reference</div>`
+    );
   });
 
   describe("honors hidden attribute", () => {
@@ -853,7 +857,7 @@ describe("calcite-tooltip", () => {
           {
             name: "shadow-component-a",
             html: `<button id="tooltip-button">Data disclaimer</button>
-        <calcite-tooltip label="Data disclaimer" reference-element="tooltip-button">
+        <calcite-tooltip reference-element="tooltip-button">
           <span>This data was collected over a 24 hour period</span>
         </calcite-tooltip>`
           },
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index 0852bcabce9..2525c1a2d47 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -68,7 +68,7 @@ darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const rightAligned_TestOnly = (): string => html`<div style="text-align: right">
   <a href="#" id="tooltip-button">Hover for Tooltip</a>
-  <calcite-tooltip open label="Example label" reference-element="tooltip-button">
+  <calcite-tooltip open reference-element="tooltip-button">
     <span>Tooltip content lorem ipsum</span>
   </calcite-tooltip>
 </div>`;
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 9687b241b55..f6ef5cf0508 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -56,8 +56,12 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   /** Closes the component when the `referenceElement` is clicked. */
   @Prop({ reflect: true }) closeOnClick = false;
 
-  /** Accessible name for the component. */
-  @Prop() label!: string;
+  /**
+   * Accessible name for the component.
+   *
+   * @deprecated No longer necessary.
+   */
+  @Prop() label: string;
 
   /**
    * Offset the position of the component away from the `referenceElement`.
diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html
index 4a140c4c1a2..dae9be1f990 100644
--- a/packages/calcite-components/src/demos/tooltip.html
+++ b/packages/calcite-components/src/demos/tooltip.html
@@ -190,179 +190,139 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
 
       <!-- containers to hold the tooltip -->
       <div>
-        <calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-ref">
+        <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref">
           <p>placement: auto</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - auto-start" placement="auto-start" reference-element="tooltip-auto-start-ref">
+        <calcite-tooltip placement="auto-start" reference-element="tooltip-auto-start-ref">
           <p>placement: auto-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - auto-end" placement="auto-end" reference-element="tooltip-auto-end-ref">
+        <calcite-tooltip placement="auto-end" reference-element="tooltip-auto-end-ref">
           <p>placement: auto-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - top" placement="top" reference-element="tooltip-top-ref">
+        <calcite-tooltip placement="top" reference-element="tooltip-top-ref">
           <p>placement: top</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - bottom" placement="bottom" reference-element="tooltip-bottom-ref">
+        <calcite-tooltip placement="bottom" reference-element="tooltip-bottom-ref">
           <p>placement: bottom</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - right" placement="right" reference-element="tooltip-right-ref">
+        <calcite-tooltip placement="right" reference-element="tooltip-right-ref">
           <p>placement: right</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - left" placement="left" reference-element="tooltip-left-ref">
+        <calcite-tooltip placement="left" reference-element="tooltip-left-ref">
           <p>placement: left</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - top-start" placement="top-start" reference-element="tooltip-top-start-ref">
+        <calcite-tooltip placement="top-start" reference-element="tooltip-top-start-ref">
           <p>placement: top-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - top-end" placement="top-end" reference-element="tooltip-top-end-ref">
+        <calcite-tooltip placement="top-end" reference-element="tooltip-top-end-ref">
           <p>placement: top-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - bottom-start"
-          placement="bottom-start"
-          reference-element="tooltip-bottom-start-ref"
-        >
+        <calcite-tooltip placement="bottom-start" reference-element="tooltip-bottom-start-ref">
           <p>placement: bottom-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - bottom-end" placement="bottom-end" reference-element="tooltip-bottom-end-ref">
+        <calcite-tooltip placement="bottom-end" reference-element="tooltip-bottom-end-ref">
           <p>placement: bottom-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - right-start"
-          placement="right-start"
-          reference-element="tooltip-right-start-ref"
-        >
+        <calcite-tooltip placement="right-start" reference-element="tooltip-right-start-ref">
           <p>placement: right-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - right-end" placement="right-end" reference-element="tooltip-right-end-ref">
+        <calcite-tooltip placement="right-end" reference-element="tooltip-right-end-ref">
           <p>placement: right-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - left-start" placement="left-start" reference-element="tooltip-left-start-ref">
+        <calcite-tooltip placement="left-start" reference-element="tooltip-left-start-ref">
           <p>placement: left-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - left-end" placement="left-end" reference-element="tooltip-left-end-ref">
+        <calcite-tooltip placement="left-end" reference-element="tooltip-left-end-ref">
           <p>placement: left-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - leading-start"
-          placement="leading-start"
-          reference-element="tooltip-leading-start-ref"
-        >
+        <calcite-tooltip placement="leading-start" reference-element="tooltip-leading-start-ref">
           <p>placement: leading-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - leading" placement="leading" reference-element="tooltip-leading-ref">
+        <calcite-tooltip placement="leading" reference-element="tooltip-leading-ref">
           <p>placement: leading</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - leading-end"
-          placement="leading-end"
-          reference-element="tooltip-leading-end-ref"
-        >
+        <calcite-tooltip placement="leading-end" reference-element="tooltip-leading-end-ref">
           <p>placement: leading-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - trailing-end"
-          placement="trailing-end"
-          reference-element="tooltip-trailing-end-ref"
-        >
+        <calcite-tooltip placement="trailing-end" reference-element="tooltip-trailing-end-ref">
           <p>placement: trailing-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip label="tooltip - trailing" placement="trailing" reference-element="tooltip-trailing-ref">
+        <calcite-tooltip placement="trailing" reference-element="tooltip-trailing-ref">
           <p>placement: trailing</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - trailing-start"
-          placement="trailing-start"
-          reference-element="tooltip-trailing-start-ref"
-        >
+        <calcite-tooltip placement="trailing-start" reference-element="tooltip-trailing-start-ref">
           <p>placement: trailing-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
 
-        <calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-disabled-ref">
+        <calcite-tooltip placement="auto" reference-element="tooltip-auto-disabled-ref">
           <p>placement: auto</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - auto-start"
-          placement="auto-start"
-          reference-element="tooltip-auto-start-disabled-ref"
-        >
+        <calcite-tooltip placement="auto-start" reference-element="tooltip-auto-start-disabled-ref">
           <p>placement: auto-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - auto-end"
-          placement="auto-end"
-          reference-element="tooltip-auto-end-disabled-ref"
-        >
+        <calcite-tooltip placement="auto-end" reference-element="tooltip-auto-end-disabled-ref">
           <p>placement: auto-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
 
-        <calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-disabled-native-ref">
+        <calcite-tooltip placement="auto" reference-element="tooltip-auto-disabled-native-ref">
           <p>placement: auto</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - auto-start"
-          placement="auto-start"
-          reference-element="tooltip-auto-start-disabled-native-ref"
-        >
+        <calcite-tooltip placement="auto-start" reference-element="tooltip-auto-start-disabled-native-ref">
           <p>placement: auto-start</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.
         </calcite-tooltip>
-        <calcite-tooltip
-          label="tooltip - auto-end"
-          placement="auto-end"
-          reference-element="tooltip-auto-end-disabled-native-ref"
-        >
+        <calcite-tooltip placement="auto-end" reference-element="tooltip-auto-end-disabled-native-ref">
           <p>placement: auto-end</p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua.

From a184693c364056ed5ee27b50a092a6e57a6a2a12 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 30 Jun 2023 09:50:21 -0700
Subject: [PATCH 2/4] review fixes

---
 packages/calcite-components/src/components/tooltip/tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index f6ef5cf0508..9f6b0f67fac 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -59,7 +59,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   /**
    * Accessible name for the component.
    *
-   * @deprecated No longer necessary.
+   * @deprecated No longer necessary due to the label coming from the component's content. Setting aria attributes on the component is not recommended.
    */
   @Prop() label: string;
 

From 073f3985deca00b6a59719cefcaecdcf8e25ab34 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 30 Jun 2023 09:59:52 -0700
Subject: [PATCH 3/4] wording

---
 packages/calcite-components/src/components/tooltip/tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 9f6b0f67fac..8e4f8b61229 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -59,7 +59,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   /**
    * Accessible name for the component.
    *
-   * @deprecated No longer necessary due to the label coming from the component's content. Setting aria attributes on the component is not recommended.
+   * @deprecated This is no longer necessary because the component's content provides the description.
    */
   @Prop() label: string;
 

From cd146d5803aeaff3e0af79d039ddad4f72823e29 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 30 Jun 2023 10:35:25 -0700
Subject: [PATCH 4/4] wording

---
 packages/calcite-components/src/components/tooltip/tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 8e4f8b61229..4b221917173 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -59,7 +59,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   /**
    * Accessible name for the component.
    *
-   * @deprecated This is no longer necessary because the component's content provides the description.
+   * @deprecated No longer necessary. Overrides the context of the component's description, which could confuse assistive technology users.
    */
   @Prop() label: string;