From 75fea5d440eb5e72de044076c24242b3813fddf1 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 25 Nov 2024 14:45:39 -0500 Subject: [PATCH 01/21] feat(tooltip): add ESC to close functionality --- elements/rh-tooltip/rh-tooltip.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 280d1e3c44..62e8764617 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -61,6 +61,7 @@ export class RhTooltip extends LitElement { super.connectedCallback(); ENTER_EVENTS.forEach(evt => this.addEventListener(evt, this.show)); EXIT_EVENTS.forEach(evt => this.addEventListener(evt, this.hide)); + document.addEventListener('keydown', this.#onKeydown); } override render() { @@ -100,6 +101,12 @@ export class RhTooltip extends LitElement { async hide() { await this.#float.hide(); } + + #onKeydown = (event: KeyboardEvent): void => { + if (event.key === 'Escape') { + this.hide(); + } + }; } declare global { From ee1ffe35261b3169de684cf3d133a2db598256f4 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 25 Nov 2024 14:55:49 -0500 Subject: [PATCH 02/21] refactor(tooltip): rename CSS class --- elements/rh-tooltip/rh-tooltip.css | 2 +- elements/rh-tooltip/rh-tooltip.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/elements/rh-tooltip/rh-tooltip.css b/elements/rh-tooltip/rh-tooltip.css index 96abe54af2..c8ab6780bd 100644 --- a/elements/rh-tooltip/rh-tooltip.css +++ b/elements/rh-tooltip/rh-tooltip.css @@ -77,7 +77,7 @@ var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))); } -.c { +.display-c { display: contents; } diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 62e8764617..3012fbfdef 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -76,10 +76,10 @@ export class RhTooltip extends LitElement { [on]: !!on, [anchor]: !!anchor, [alignment]: !!alignment })}"> - `; @@ -110,69 +107,6 @@ export class RhTooltip extends LitElement { this.hide(); } }; - - #handleInvokerSlotChange(): void { - const invokerSlot = this.shadowRoot?.querySelector('#invoker'); - if (!invokerSlot) { - return; - } - - const assignedNodes = invokerSlot.assignedElements({ flatten: true }); - - const focusableSelector = ` - a[href]:not([inert]):not([inert] *):not([tabindex^="-"]), - input:not([type="hidden"]):not([type="radio"]):not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled), - input[type="radio"]:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled), - select:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled), - textarea:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled), - button:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled) - `; - - const findFocusableElement = (node: Element): HTMLElement | null => { - if (node.matches(focusableSelector)) { - return node as HTMLElement; - } - - if (node.tagName.toLowerCase().startsWith('rh-')) { - setTimeout(() => { - const shadowFocusable = node.shadowRoot?.querySelector(focusableSelector); - shadowFocusable?.setAttribute('aria-describedby', this.#tooltipContentID); - return; - }, 50); - } - - return null; - }; - - let invokerElement: HTMLElement | undefined; - - for (const node of assignedNodes) { - const focusableElement = findFocusableElement(node); - if (focusableElement) { - invokerElement = focusableElement; - break; - } - } - - if (invokerElement) { - invokerElement.setAttribute('aria-describedby', this.#tooltipContentID); - } - } - - #handleTooltipSlotChange(): void { - const tooltipSlot = this.shadowRoot?.querySelector('#tooltip'); - if (!tooltipSlot) { - return; - } - - const assignedNodes = tooltipSlot.assignedElements({ flatten: true }); - const tooltipContent = assignedNodes[0] as HTMLElement | undefined; - - if (tooltipContent) { - tooltipContent.setAttribute('id', this.#tooltipContentID); - tooltipContent.setAttribute('role', 'tooltip'); - } - } } declare global { From d9a66f95780b33c8e89f9cdad883daa3f4ee5e38 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 2 Dec 2024 17:08:20 -0500 Subject: [PATCH 06/21] fix(tooltip): use native ` + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. diff --git a/elements/rh-tooltip/demo/color-context.html b/elements/rh-tooltip/demo/color-context.html index d68677edb3..2790e42407 100644 --- a/elements/rh-tooltip/demo/color-context.html +++ b/elements/rh-tooltip/demo/color-context.html @@ -1,7 +1,7 @@ - Tooltip - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. diff --git a/elements/rh-tooltip/demo/left.html b/elements/rh-tooltip/demo/left.html index 322f5a9abc..c883304eab 100644 --- a/elements/rh-tooltip/demo/left.html +++ b/elements/rh-tooltip/demo/left.html @@ -4,8 +4,8 @@

- עם ישראל חי - + + בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי. לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. diff --git a/elements/rh-tooltip/demo/rh-tooltip.html b/elements/rh-tooltip/demo/rh-tooltip.html index a1a6f2c7ea..79caf9aa8e 100644 --- a/elements/rh-tooltip/demo/rh-tooltip.html +++ b/elements/rh-tooltip/demo/rh-tooltip.html @@ -1,6 +1,6 @@ - Tooltip - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. @@ -8,4 +8,3 @@ import '@rhds/elements/rh-button/rh-button.js'; import '@rhds/elements/rh-tooltip/rh-tooltip.js'; - diff --git a/elements/rh-tooltip/demo/right.html b/elements/rh-tooltip/demo/right.html index 297b67f614..705ddfabc8 100644 --- a/elements/rh-tooltip/demo/right.html +++ b/elements/rh-tooltip/demo/right.html @@ -1,6 +1,6 @@ - Right Tooltip - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. diff --git a/elements/rh-tooltip/demo/top.html b/elements/rh-tooltip/demo/top.html index b261b57c54..b298ad4331 100644 --- a/elements/rh-tooltip/demo/top.html +++ b/elements/rh-tooltip/demo/top.html @@ -1,6 +1,6 @@ - Top Tooltip - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. From dfe4fdbfeb20c5a4ada95924b500e8ad71664d32 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 2 Dec 2024 17:08:57 -0500 Subject: [PATCH 07/21] docs(tooltip): add a11y markup guidance around ` - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + Tooltip + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. + + + + Tooltip + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. diff --git a/elements/rh-tooltip/rh-tooltip.css b/elements/rh-tooltip/rh-tooltip.css index c8ab6780bd..6bc61624c7 100644 --- a/elements/rh-tooltip/rh-tooltip.css +++ b/elements/rh-tooltip/rh-tooltip.css @@ -85,6 +85,18 @@ opacity: 1; } +.visually-hidden { + border: 0 !important; + clip: rect(0, 0, 0, 0) !important; + block-size: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + inline-size: 1px !important; +} + /* PLAIN */ .left #tooltip:after { inset-inline-start: calc(-0.5 * var(--_floating-arrow-size)); } .top #tooltip:after { inset-block-start: calc(100% - 0.5 * var(--_floating-arrow-size)); } diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index c978af82a2..93a624b36c 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -70,6 +70,17 @@ export class RhTooltip extends LitElement { #initialized = false; + get #content() { + if (!this.#float.open || isServer) { + return ''; + } else { + return this.content || (this.shadowRoot + ?.getElementById('content') as HTMLSlotElement) + ?.assignedNodes().map(x => x.textContent ?? '') + ?.join(' '); + } + } + override connectedCallback(): void { super.connectedCallback(); ENTER_EVENTS.forEach(evt => this.addEventListener(evt, this.show)); @@ -85,17 +96,18 @@ export class RhTooltip extends LitElement {

-
- +
+
-
- ${this.content} +
+ ${this.content}
+ `; } From 2fa8d8e3b217fa8238ca4f03c6154c0e98f5c0b2 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Dec 2024 10:02:44 +0200 Subject: [PATCH 10/21] fix(tooltip): global announcer --- elements/rh-tooltip/rh-tooltip.css | 12 ------------ elements/rh-tooltip/rh-tooltip.ts | 25 ++++++++++++++++++++++++- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/elements/rh-tooltip/rh-tooltip.css b/elements/rh-tooltip/rh-tooltip.css index 6bc61624c7..c8ab6780bd 100644 --- a/elements/rh-tooltip/rh-tooltip.css +++ b/elements/rh-tooltip/rh-tooltip.css @@ -85,18 +85,6 @@ opacity: 1; } -.visually-hidden { - border: 0 !important; - clip: rect(0, 0, 0, 0) !important; - block-size: 1px !important; - margin: -1px !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - inline-size: 1px !important; -} - /* PLAIN */ .left #tooltip:after { inset-inline-start: calc(-0.5 * var(--_floating-arrow-size)); } .top #tooltip:after { inset-block-start: calc(100% - 0.5 * var(--_floating-arrow-size)); } diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 93a624b36c..0ce2d35f45 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -53,9 +53,31 @@ export class RhTooltip extends LitElement { instance.#onKeydown(event); } }); + this.initAnnouncer(); } } + private static announcer: HTMLElement; + + private static announce(message: string) { + this.announcer.innerText = message; + } + + private static initAnnouncer() { + this.announcer = document.createElement('div'); + // equivalent to aria-live="polite" + this.announcer.role = 'status'; + // apply `.visually-hidden` styles + this.announcer.style.position = 'fixed'; + this.announcer.style.insetInlineStart = '0'; + this.announcer.style.insetBlockStart = '0'; + this.announcer.style.overflow = 'hidden'; + this.announcer.style.clip = 'rect(0,0,0,0)'; + this.announcer.style.whiteSpace = 'nowrap'; + this.announcer.style.border = '0'; + document.body.append(this.announcer); + } + /** The position of the tooltip, relative to the invoking content */ @property() position: Placement = 'top'; @@ -107,7 +129,6 @@ export class RhTooltip extends LitElement { ${this.content}
- `; } @@ -120,11 +141,13 @@ export class RhTooltip extends LitElement { : { mainAxis: 15, alignmentAxis: -4 }; await this.#float.show({ offset, placement }); this.#initialized ||= true; + RhTooltip.announce(this.#content); } /** Hide the tooltip */ async hide() { await this.#float.hide(); + RhTooltip.announcer.innerText = ''; } #onKeydown = (event: KeyboardEvent): void => { From 91d1e55b067f9a13f757e33a01d6ca5f37049b11 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Dec 2024 10:13:37 +0200 Subject: [PATCH 11/21] test(tooltip): ax queries --- elements/rh-tooltip/test/rh-tooltip.spec.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/elements/rh-tooltip/test/rh-tooltip.spec.ts b/elements/rh-tooltip/test/rh-tooltip.spec.ts index ed74e16c89..35ce88b46e 100644 --- a/elements/rh-tooltip/test/rh-tooltip.spec.ts +++ b/elements/rh-tooltip/test/rh-tooltip.spec.ts @@ -56,10 +56,8 @@ describe('', function() { beforeEach(() => sendMouseToTooltip(element)); it('content should be available to assistive technology', async function() { await sendMouseToTooltip(element); - const snapshot = await a11ySnapshot(); - expect(snapshot.children?.length).to.equal(1); - expect(snapshot.children?.at(0)?.role).to.equal('text'); - expect(snapshot.children?.at(0)?.name).to.equal(content); + expect(await a11ySnapshot()) + .to.have.axQuery({ role: 'text', name: content }); }); }); }); From 97206902a65b7d311f70619ca2178ddd39906444 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Dec 2024 10:18:40 +0200 Subject: [PATCH 12/21] fix(tooltip): surrender to compilers --- elements/rh-tooltip/rh-tooltip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 0ce2d35f45..fbba4aedcd 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -53,7 +53,7 @@ export class RhTooltip extends LitElement { instance.#onKeydown(event); } }); - this.initAnnouncer(); + RhTooltip.initAnnouncer(); } } From e684697029de3a3d203b91fb36d4a292155e3dfe Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Dec 2024 10:36:45 +0200 Subject: [PATCH 13/21] fix(tooltip): crossbrowser aria --- elements/rh-tooltip/rh-tooltip.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index fbba4aedcd..2c95cc58c7 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -53,7 +53,7 @@ export class RhTooltip extends LitElement { instance.#onKeydown(event); } }); - RhTooltip.initAnnouncer(); + this.initAnnouncer(); } } @@ -65,8 +65,7 @@ export class RhTooltip extends LitElement { private static initAnnouncer() { this.announcer = document.createElement('div'); - // equivalent to aria-live="polite" - this.announcer.role = 'status'; + this.announcer.setAttribute('aria-live', 'polite'); // apply `.visually-hidden` styles this.announcer.style.position = 'fixed'; this.announcer.style.insetInlineStart = '0'; From be61a0652c2fff664e332e62eea68e6ea36cb863 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Dec 2024 10:55:28 +0200 Subject: [PATCH 14/21] docs(tooltip): remove test icon --- elements/rh-tooltip/demo/rh-tooltip.html | 7 ------- 1 file changed, 7 deletions(-) diff --git a/elements/rh-tooltip/demo/rh-tooltip.html b/elements/rh-tooltip/demo/rh-tooltip.html index 7417e46cc2..435d4f1d2f 100644 --- a/elements/rh-tooltip/demo/rh-tooltip.html +++ b/elements/rh-tooltip/demo/rh-tooltip.html @@ -1,9 +1,3 @@ - - Tooltip - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. - - Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut @@ -12,6 +6,5 @@ From b33e509524fb492e6854480737182b0650d029fc Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Dec 2024 11:24:32 +0200 Subject: [PATCH 15/21] fix(tooltip): revert regression --- elements/rh-tooltip/rh-tooltip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 2c95cc58c7..4525c3ac59 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -53,7 +53,7 @@ export class RhTooltip extends LitElement { instance.#onKeydown(event); } }); - this.initAnnouncer(); + RhTooltip.initAnnouncer(); } } From 5dfe77257d4037374d67cb5b907281b006224b96 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Dec 2024 14:52:08 +0200 Subject: [PATCH 16/21] perf(tooltip): shave bytes --- elements/rh-tooltip/rh-tooltip.ts | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 4525c3ac59..386130db66 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -64,17 +64,18 @@ export class RhTooltip extends LitElement { } private static initAnnouncer() { - this.announcer = document.createElement('div'); - this.announcer.setAttribute('aria-live', 'polite'); - // apply `.visually-hidden` styles - this.announcer.style.position = 'fixed'; - this.announcer.style.insetInlineStart = '0'; - this.announcer.style.insetBlockStart = '0'; - this.announcer.style.overflow = 'hidden'; - this.announcer.style.clip = 'rect(0,0,0,0)'; - this.announcer.style.whiteSpace = 'nowrap'; - this.announcer.style.border = '0'; - document.body.append(this.announcer); + document.body.append((this.announcer = Object.assign(document.createElement('div'), { + ariaLive: 'polite', + // apply `.visually-hidden` styles + style: /* css */` + position: fixed; + top: 0; + left: 0; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + border: 0;`, + }))); } /** The position of the tooltip, relative to the invoking content */ From 357d4a1c2805919a3c2b4a517f464d4b24935076 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 17 Dec 2024 11:35:10 -0500 Subject: [PATCH 17/21] fix(tooltip): use logical properties for announcer --- elements/rh-tooltip/rh-tooltip.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 386130db66..d8ab3e43a4 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -69,8 +69,8 @@ export class RhTooltip extends LitElement { // apply `.visually-hidden` styles style: /* css */` position: fixed; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; From e24478e1d2af0d3e4f01e78693d4f8a5c946ce72 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 17 Dec 2024 11:37:38 -0500 Subject: [PATCH 18/21] docs(tooltip): remove outdated a11y docs --- elements/rh-tooltip/docs/40-accessibility.md | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/elements/rh-tooltip/docs/40-accessibility.md b/elements/rh-tooltip/docs/40-accessibility.md index 228a35d158..fdc57c0f6b 100644 --- a/elements/rh-tooltip/docs/40-accessibility.md +++ b/elements/rh-tooltip/docs/40-accessibility.md @@ -1,21 +1,3 @@ -## Markup Guidance - -In order to create accessible tooltips, the trigger must have an `aria-describedby` attribute and the tooltip content must have a corresponding [IDREF](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). See the [demos](/elements/tooltip/demos/) for further implementation details. - -### Should implementors use `` with ``? - -Implementors may want to use `` with ``. Unfortunately, that results in inaccessible tooltips for the following reasons: - - * In order to be accessible, the `aria-describedby` must exist on a native interactive element (eg: ` - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + Bottom Tooltip + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. diff --git a/elements/rh-tooltip/demo/color-context.html b/elements/rh-tooltip/demo/color-context.html index 2790e42407..d68677edb3 100644 --- a/elements/rh-tooltip/demo/color-context.html +++ b/elements/rh-tooltip/demo/color-context.html @@ -1,7 +1,7 @@ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + Tooltip + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. diff --git a/elements/rh-tooltip/demo/left.html b/elements/rh-tooltip/demo/left.html index c883304eab..322f5a9abc 100644 --- a/elements/rh-tooltip/demo/left.html +++ b/elements/rh-tooltip/demo/left.html @@ -4,8 +4,8 @@

- - + עם ישראל חי + בְּאֶרֶץ-יִשְׂרָאֵל קָם הָעָם הַיְּהוּדִי, בָּהּ עֻצְּבָה דְּמוּתוֹ הָרוּחָנִית, הַדָּתִית וְהַמְּדִינִית, בָּהּ חַי חַיֵּי קוֹמְמִיּוּת מַמְלַכְתִּית, בָּהּ יָצַר נִכְסֵי תַּרְבּוּת לְאֻמִּיִּים וּכְלַל-אֱנוֹשִׁיִּים וְהוֹרִישׁ לָעוֹלָם כֻּלּוֹ אֶת סֵפֶר הַסְּפָרִים הַנִּצְחִי. לְאַחַר שֶׁהֻגְלָה הָעָם מֵאַרְצוֹ בְּכֹחַ הַזְּרוֹעַ שָׁמַר לָהּ אֱמוּנִים בְּכָל אַרְצוֹת פְּזוּרָיו, וְלֹא חָדַל מִתְּפִלָּה וּמִתִּקְוָה לָשׁוּב לְאַרְצוֹ וּלְחַדֵּשׁ בְּתוֹכָהּ אֶת חֵרוּתוֹ הַמְּדִינִית. diff --git a/elements/rh-tooltip/demo/right.html b/elements/rh-tooltip/demo/right.html index 705ddfabc8..297b67f614 100644 --- a/elements/rh-tooltip/demo/right.html +++ b/elements/rh-tooltip/demo/right.html @@ -1,6 +1,6 @@ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + Right Tooltip + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. diff --git a/elements/rh-tooltip/demo/top.html b/elements/rh-tooltip/demo/top.html index b298ad4331..b261b57c54 100644 --- a/elements/rh-tooltip/demo/top.html +++ b/elements/rh-tooltip/demo/top.html @@ -1,6 +1,6 @@ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + Top Tooltip + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices. From ee2bdea2f414ed63038027a99ef2d7b07816b42f Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 18 Dec 2024 13:44:26 -0500 Subject: [PATCH 20/21] fix(tooltip): prune unused class --- elements/rh-tooltip/rh-tooltip.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/elements/rh-tooltip/rh-tooltip.css b/elements/rh-tooltip/rh-tooltip.css index c8ab6780bd..7036b691d5 100644 --- a/elements/rh-tooltip/rh-tooltip.css +++ b/elements/rh-tooltip/rh-tooltip.css @@ -77,10 +77,6 @@ var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))); } -.display-c { - display: contents; -} - .open #tooltip { opacity: 1; } From cea398a0c419d16dbcc76015bb6443a37072972a Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 18 Dec 2024 13:54:18 -0500 Subject: [PATCH 21/21] fix(tooltip): change `aria-live` to `role: status` --- elements/rh-tooltip/rh-tooltip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index d8ab3e43a4..5daaea516c 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -65,7 +65,7 @@ export class RhTooltip extends LitElement { private static initAnnouncer() { document.body.append((this.announcer = Object.assign(document.createElement('div'), { - ariaLive: 'polite', + role: 'status', // apply `.visually-hidden` styles style: /* css */` position: fixed;