diff --git a/.changeset/green-glasses-exist.md b/.changeset/green-glasses-exist.md new file mode 100644 index 0000000000..e0246bb6ea --- /dev/null +++ b/.changeset/green-glasses-exist.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +Make `ToolTipElement` `for` an observed attribute diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts index 1f991fadc1..f9a3748b27 100644 --- a/app/components/primer/alpha/tool_tip.ts +++ b/app/components/primer/alpha/tool_tip.ts @@ -234,28 +234,7 @@ class ToolTipElement extends HTMLElement { this.#update(false) this.#allowUpdatePosition = true - if (!this.control) return - - this.setAttribute('role', 'tooltip') - - this.#abortController?.abort() - this.#abortController = new AbortController() - const {signal} = this.#abortController - - this.addEventListener('mouseleave', this, {signal}) - this.addEventListener('toggle', this, {signal}) - this.control.addEventListener('mouseenter', this, {signal}) - this.control.addEventListener('mouseleave', this, {signal}) - this.control.addEventListener('focus', this, {signal}) - this.control.addEventListener('mousedown', this, {signal}) - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore popoverTargetElement is not in the type definition - this.control.popoverTargetElement?.addEventListener('beforetoggle', this, { - signal, - }) - this.ownerDocument.addEventListener('focusout', focusOutListener) - this.ownerDocument.addEventListener('focusin', focusInListener) - this.ownerDocument.addEventListener('keydown', this, {signal, capture: true}) + this.#updateControl() } disconnectedCallback() { @@ -303,7 +282,7 @@ class ToolTipElement extends HTMLElement { } } - static observedAttributes = ['data-type', 'data-direction', 'id'] + static observedAttributes = ['data-type', 'data-direction', 'id', 'for'] #update(isOpen: boolean) { if (isOpen) { @@ -321,13 +300,40 @@ class ToolTipElement extends HTMLElement { attributeChangedCallback(name: string) { if (!this.isConnected) return - if (name === 'id' || name === 'data-type') { + if (name === 'for') { + this.#updateControl() + } else if (name === 'id' || name === 'data-type') { this.#updateControlReference() } else if (name === 'data-direction') { this.#updateDirection() } } + #updateControl() { + if (!this.control) return + + this.setAttribute('role', 'tooltip') + + this.#abortController?.abort() + this.#abortController = new AbortController() + const {signal} = this.#abortController + + this.addEventListener('mouseleave', this, {signal}) + this.addEventListener('toggle', this, {signal}) + this.control.addEventListener('mouseenter', this, {signal}) + this.control.addEventListener('mouseleave', this, {signal}) + this.control.addEventListener('focus', this, {signal}) + this.control.addEventListener('mousedown', this, {signal}) + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore popoverTargetElement is not in the type definition + this.control.popoverTargetElement?.addEventListener('beforetoggle', this, { + signal, + }) + this.ownerDocument.addEventListener('focusout', focusOutListener) + this.ownerDocument.addEventListener('focusin', focusInListener) + this.ownerDocument.addEventListener('keydown', this, {signal, capture: true}) + } + #updateControlReference() { if (!this.id || !this.control) return if (this.type === 'label') {