fix(tooltip): deprecate the label property due to the description com…

…ing from the component's content (#7247) **Related Issue:** #6329 ## Summary - Deprecates the `label` property. - The already provided `aria-describedby` attribute is sufficient for accessibility. - Setting aria attributes on the component is not recommended. - Can still be set by user so no breaking changes. - Set to optional by default so its no longer required. - Update tests - Update Storybook - Update HTML
Esri · Jun 30, 2023 · 7934d75 · 7934d75
1 parent fe2fffc
commit 7934d75
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 73 deletions.
diff --git 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
@@ -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
@@ -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. Overrides the context of the component's description, which could confuse assistive technology users.
+   */
+  @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
@@ -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.