Skip to content

Commit 7934d75

Browse files
driskulldriskull
authored
fix(tooltip): deprecate the label property due to the description coming 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
1 parent fe2fffc commit 7934d75

File tree

4 files changed

+41
-73
lines changed

4 files changed

+41
-73
lines changed

‎packages/calcite-components/src/components/tooltip/tooltip.e2e.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,15 @@ describe("calcite-tooltip", () => {
4646
});
4747

4848
describe("accessible when closed", () => {
49-
accessible(`<calcite-tooltip label="test" reference-element="ref"></calcite-tooltip><div id="ref">😄</div>`);
49+
accessible(
50+
`<calcite-tooltip reference-element="ref">Hello World!</calcite-tooltip><div id="ref">Tooltip Reference</div>`
51+
);
5052
});
5153

5254
describe("accessible when open", () => {
53-
accessible(`<calcite-tooltip label="test" open reference-element="ref"></calcite-tooltip><div id="ref">😄</div>`);
55+
accessible(
56+
`<calcite-tooltip open reference-element="ref">Hello World!</calcite-tooltip><div id="ref">Tooltip Reference</div>`
57+
);
5458
});
5559

5660
describe("honors hidden attribute", () => {
@@ -853,7 +857,7 @@ describe("calcite-tooltip", () => {
853857
{
854858
name: "shadow-component-a",
855859
html: `<button id="tooltip-button">Data disclaimer</button>
856-
<calcite-tooltip label="Data disclaimer" reference-element="tooltip-button">
860+
<calcite-tooltip reference-element="tooltip-button">
857861
<span>This data was collected over a 24 hour period</span>
858862
</calcite-tooltip>`
859863
},

‎packages/calcite-components/src/components/tooltip/tooltip.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
6868

6969
export const rightAligned_TestOnly = (): string => html`<div style="text-align: right">
7070
<a href="#" id="tooltip-button">Hover for Tooltip</a>
71-
<calcite-tooltip open label="Example label" reference-element="tooltip-button">
71+
<calcite-tooltip open reference-element="tooltip-button">
7272
<span>Tooltip content lorem ipsum</span>
7373
</calcite-tooltip>
7474
</div>`;

‎packages/calcite-components/src/components/tooltip/tooltip.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,12 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
5656
/** Closes the component when the `referenceElement` is clicked. */
5757
@Prop({ reflect: true }) closeOnClick = false;
5858

59-
/** Accessible name for the component. */
60-
@Prop() label!: string;
59+
/**
60+
* Accessible name for the component.
61+
*
62+
* @deprecated No longer necessary. Overrides the context of the component's description, which could confuse assistive technology users.
63+
*/
64+
@Prop() label: string;
6165

6266
/**
6367
* Offset the position of the component away from the `referenceElement`.

‎packages/calcite-components/src/demos/tooltip.html

Lines changed: 27 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -190,179 +190,139 @@ <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
190190

191191
<!-- containers to hold the tooltip -->
192192
<div>
193-
<calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-ref">
193+
<calcite-tooltip placement="auto" reference-element="tooltip-auto-ref">
194194
<p>placement: auto</p>
195195
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
196196
magna aliqua.
197197
</calcite-tooltip>
198-
<calcite-tooltip label="tooltip - auto-start" placement="auto-start" reference-element="tooltip-auto-start-ref">
198+
<calcite-tooltip placement="auto-start" reference-element="tooltip-auto-start-ref">
199199
<p>placement: auto-start</p>
200200
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
201201
magna aliqua.
202202
</calcite-tooltip>
203-
<calcite-tooltip label="tooltip - auto-end" placement="auto-end" reference-element="tooltip-auto-end-ref">
203+
<calcite-tooltip placement="auto-end" reference-element="tooltip-auto-end-ref">
204204
<p>placement: auto-end</p>
205205
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
206206
magna aliqua.
207207
</calcite-tooltip>
208-
<calcite-tooltip label="tooltip - top" placement="top" reference-element="tooltip-top-ref">
208+
<calcite-tooltip placement="top" reference-element="tooltip-top-ref">
209209
<p>placement: top</p>
210210
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
211211
magna aliqua.
212212
</calcite-tooltip>
213-
<calcite-tooltip label="tooltip - bottom" placement="bottom" reference-element="tooltip-bottom-ref">
213+
<calcite-tooltip placement="bottom" reference-element="tooltip-bottom-ref">
214214
<p>placement: bottom</p>
215215
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
216216
magna aliqua.
217217
</calcite-tooltip>
218-
<calcite-tooltip label="tooltip - right" placement="right" reference-element="tooltip-right-ref">
218+
<calcite-tooltip placement="right" reference-element="tooltip-right-ref">
219219
<p>placement: right</p>
220220
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
221221
magna aliqua.
222222
</calcite-tooltip>
223-
<calcite-tooltip label="tooltip - left" placement="left" reference-element="tooltip-left-ref">
223+
<calcite-tooltip placement="left" reference-element="tooltip-left-ref">
224224
<p>placement: left</p>
225225
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
226226
magna aliqua.
227227
</calcite-tooltip>
228-
<calcite-tooltip label="tooltip - top-start" placement="top-start" reference-element="tooltip-top-start-ref">
228+
<calcite-tooltip placement="top-start" reference-element="tooltip-top-start-ref">
229229
<p>placement: top-start</p>
230230
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
231231
magna aliqua.
232232
</calcite-tooltip>
233-
<calcite-tooltip label="tooltip - top-end" placement="top-end" reference-element="tooltip-top-end-ref">
233+
<calcite-tooltip placement="top-end" reference-element="tooltip-top-end-ref">
234234
<p>placement: top-end</p>
235235
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
236236
magna aliqua.
237237
</calcite-tooltip>
238-
<calcite-tooltip
239-
label="tooltip - bottom-start"
240-
placement="bottom-start"
241-
reference-element="tooltip-bottom-start-ref"
242-
>
238+
<calcite-tooltip placement="bottom-start" reference-element="tooltip-bottom-start-ref">
243239
<p>placement: bottom-start</p>
244240
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
245241
magna aliqua.
246242
</calcite-tooltip>
247-
<calcite-tooltip label="tooltip - bottom-end" placement="bottom-end" reference-element="tooltip-bottom-end-ref">
243+
<calcite-tooltip placement="bottom-end" reference-element="tooltip-bottom-end-ref">
248244
<p>placement: bottom-end</p>
249245
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
250246
magna aliqua.
251247
</calcite-tooltip>
252-
<calcite-tooltip
253-
label="tooltip - right-start"
254-
placement="right-start"
255-
reference-element="tooltip-right-start-ref"
256-
>
248+
<calcite-tooltip placement="right-start" reference-element="tooltip-right-start-ref">
257249
<p>placement: right-start</p>
258250
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
259251
magna aliqua.
260252
</calcite-tooltip>
261-
<calcite-tooltip label="tooltip - right-end" placement="right-end" reference-element="tooltip-right-end-ref">
253+
<calcite-tooltip placement="right-end" reference-element="tooltip-right-end-ref">
262254
<p>placement: right-end</p>
263255
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
264256
magna aliqua.
265257
</calcite-tooltip>
266-
<calcite-tooltip label="tooltip - left-start" placement="left-start" reference-element="tooltip-left-start-ref">
258+
<calcite-tooltip placement="left-start" reference-element="tooltip-left-start-ref">
267259
<p>placement: left-start</p>
268260
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
269261
magna aliqua.
270262
</calcite-tooltip>
271-
<calcite-tooltip label="tooltip - left-end" placement="left-end" reference-element="tooltip-left-end-ref">
263+
<calcite-tooltip placement="left-end" reference-element="tooltip-left-end-ref">
272264
<p>placement: left-end</p>
273265
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
274266
magna aliqua.
275267
</calcite-tooltip>
276-
<calcite-tooltip
277-
label="tooltip - leading-start"
278-
placement="leading-start"
279-
reference-element="tooltip-leading-start-ref"
280-
>
268+
<calcite-tooltip placement="leading-start" reference-element="tooltip-leading-start-ref">
281269
<p>placement: leading-start</p>
282270
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
283271
magna aliqua.
284272
</calcite-tooltip>
285-
<calcite-tooltip label="tooltip - leading" placement="leading" reference-element="tooltip-leading-ref">
273+
<calcite-tooltip placement="leading" reference-element="tooltip-leading-ref">
286274
<p>placement: leading</p>
287275
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
288276
magna aliqua.
289277
</calcite-tooltip>
290-
<calcite-tooltip
291-
label="tooltip - leading-end"
292-
placement="leading-end"
293-
reference-element="tooltip-leading-end-ref"
294-
>
278+
<calcite-tooltip placement="leading-end" reference-element="tooltip-leading-end-ref">
295279
<p>placement: leading-end</p>
296280
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
297281
magna aliqua.
298282
</calcite-tooltip>
299-
<calcite-tooltip
300-
label="tooltip - trailing-end"
301-
placement="trailing-end"
302-
reference-element="tooltip-trailing-end-ref"
303-
>
283+
<calcite-tooltip placement="trailing-end" reference-element="tooltip-trailing-end-ref">
304284
<p>placement: trailing-end</p>
305285
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
306286
magna aliqua.
307287
</calcite-tooltip>
308-
<calcite-tooltip label="tooltip - trailing" placement="trailing" reference-element="tooltip-trailing-ref">
288+
<calcite-tooltip placement="trailing" reference-element="tooltip-trailing-ref">
309289
<p>placement: trailing</p>
310290
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
311291
magna aliqua.
312292
</calcite-tooltip>
313-
<calcite-tooltip
314-
label="tooltip - trailing-start"
315-
placement="trailing-start"
316-
reference-element="tooltip-trailing-start-ref"
317-
>
293+
<calcite-tooltip placement="trailing-start" reference-element="tooltip-trailing-start-ref">
318294
<p>placement: trailing-start</p>
319295
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
320296
magna aliqua.
321297
</calcite-tooltip>
322298

323-
<calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-disabled-ref">
299+
<calcite-tooltip placement="auto" reference-element="tooltip-auto-disabled-ref">
324300
<p>placement: auto</p>
325301
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
326302
magna aliqua.
327303
</calcite-tooltip>
328-
<calcite-tooltip
329-
label="tooltip - auto-start"
330-
placement="auto-start"
331-
reference-element="tooltip-auto-start-disabled-ref"
332-
>
304+
<calcite-tooltip placement="auto-start" reference-element="tooltip-auto-start-disabled-ref">
333305
<p>placement: auto-start</p>
334306
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
335307
magna aliqua.
336308
</calcite-tooltip>
337-
<calcite-tooltip
338-
label="tooltip - auto-end"
339-
placement="auto-end"
340-
reference-element="tooltip-auto-end-disabled-ref"
341-
>
309+
<calcite-tooltip placement="auto-end" reference-element="tooltip-auto-end-disabled-ref">
342310
<p>placement: auto-end</p>
343311
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
344312
magna aliqua.
345313
</calcite-tooltip>
346314

347-
<calcite-tooltip label="tooltip - auto" placement="auto" reference-element="tooltip-auto-disabled-native-ref">
315+
<calcite-tooltip placement="auto" reference-element="tooltip-auto-disabled-native-ref">
348316
<p>placement: auto</p>
349317
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
350318
magna aliqua.
351319
</calcite-tooltip>
352-
<calcite-tooltip
353-
label="tooltip - auto-start"
354-
placement="auto-start"
355-
reference-element="tooltip-auto-start-disabled-native-ref"
356-
>
320+
<calcite-tooltip placement="auto-start" reference-element="tooltip-auto-start-disabled-native-ref">
357321
<p>placement: auto-start</p>
358322
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
359323
magna aliqua.
360324
</calcite-tooltip>
361-
<calcite-tooltip
362-
label="tooltip - auto-end"
363-
placement="auto-end"
364-
reference-element="tooltip-auto-end-disabled-native-ref"
365-
>
325+
<calcite-tooltip placement="auto-end" reference-element="tooltip-auto-end-disabled-native-ref">
366326
<p>placement: auto-end</p>
367327
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
368328
magna aliqua.

0 commit comments

Comments
 (0)