diff --git a/.changeset/brown-fans-poke.md b/.changeset/brown-fans-poke.md new file mode 100644 index 0000000000..6d6d51b0ba --- /dev/null +++ b/.changeset/brown-fans-poke.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: make tooltip content available to assistive technology diff --git a/elements/rh-tooltip/demo/content-attributes.html b/elements/rh-tooltip/demo/content-attributes.html new file mode 100644 index 0000000000..2a44c6d5c0 --- /dev/null +++ b/elements/rh-tooltip/demo/content-attributes.html @@ -0,0 +1,9 @@ + + Tooltip + + + diff --git a/elements/rh-tooltip/demo/rh-tooltip.html b/elements/rh-tooltip/demo/rh-tooltip.html index a1a6f2c7ea..435d4f1d2f 100644 --- a/elements/rh-tooltip/demo/rh-tooltip.html +++ b/elements/rh-tooltip/demo/rh-tooltip.html @@ -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/rh-tooltip.css b/elements/rh-tooltip/rh-tooltip.css index 96abe54af2..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))); } -.c { - display: contents; -} - .open #tooltip { opacity: 1; } diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts index 280d1e3c44..5daaea516c 100644 --- a/elements/rh-tooltip/rh-tooltip.ts +++ b/elements/rh-tooltip/rh-tooltip.ts @@ -1,4 +1,4 @@ -import { html, LitElement } from 'lit'; +import { html, LitElement, isServer } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -43,6 +43,41 @@ export class RhTooltip extends LitElement { static readonly styles = [styles]; + private static instances = new Set(); + + static { + if (!isServer) { + globalThis.addEventListener('keydown', (event: KeyboardEvent) => { + const { instances } = RhTooltip; + for (const instance of instances) { + instance.#onKeydown(event); + } + }); + RhTooltip.initAnnouncer(); + } + } + + private static announcer: HTMLElement; + + private static announce(message: string) { + this.announcer.innerText = message; + } + + private static initAnnouncer() { + document.body.append((this.announcer = Object.assign(document.createElement('div'), { + role: 'status', + // apply `.visually-hidden` styles + style: /* css */` + position: fixed; + inset-block-start: 0; + inset-inline-start: 0; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + border: 0;`, + }))); + } + /** The position of the tooltip, relative to the invoking content */ @property() position: Placement = 'top'; @@ -57,10 +92,22 @@ 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)); EXIT_EVENTS.forEach(evt => this.addEventListener(evt, this.hide)); + RhTooltip.instances.add(this); } override render() { @@ -71,15 +118,15 @@ export class RhTooltip extends LitElement {
-