@livenetworks/ashlar 1.5.1 → 1.6.0

package/js/ln-confirm/src/ln-confirm.js

@@ -8,18 +8,39 @@ import { registerComponent, dispatch } from '../../ln-core';
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
+	function _log(...args) {
+		const isDebug = document.documentElement.hasAttribute('data-ln-debug') ||
+			(document.body && document.body.hasAttribute('data-ln-debug'));
+		if (isDebug) {
+			console.warn('[ln-confirm]', ...args);
+		}
+	}
+
 	// ─── Component ─────────────────────────────────────────────
 
 	function _component(dom) {
+		_log('constructor called on', dom);
 		this.dom = dom;
 		this.confirming = false;
-		this.originalText = dom.textContent.trim();
-		this.confirmText = dom.getAttribute(DOM_SELECTOR) || 'Confirm?';
 		this.revertTimer = null;
 		this._submitted = false;
 
+		// Detect two-element mode
+		this.idleEl = dom.querySelector('[data-ln-confirm-idle]');
+		this.activeEl = dom.querySelector('[data-ln-confirm-active]');
+		this.isTwoElementMode = !!(this.idleEl || this.activeEl);
+
+		if (this.isTwoElementMode) {
+			this.originalText = '';
+			this.confirmText = '';
+		} else {
+			this.originalText = dom.textContent.trim();
+			this.confirmText = dom.getAttribute(DOM_SELECTOR) || 'Confirm?';
+		}
+
 		const self = this;
 		this._onClick = function (e) {
+			_log('click handler, confirming:', self.confirming, 'submitted:', self._submitted, 'target:', e.target);
 			if (!self.confirming) {
 				e.preventDefault();
 				e.stopImmediatePropagation();
@@ -45,26 +66,31 @@ import { registerComponent, dispatch } from '../../ln-core';
 		this.confirming = true;
 		this.dom.setAttribute('data-confirming', 'true');
 
-		var iconUse = this.dom.querySelector('svg.ln-icon use');
-		if (iconUse && this.originalText === '') {
-			this.isIconButton = true;
-			this.originalIconHref = iconUse.getAttribute('href');
-			iconUse.setAttribute('href', '#ln-check');
-			this.dom.classList.add('ln-confirm-tooltip');
-			this.dom.setAttribute('data-tooltip-text', this.confirmText);
-			// Accessibility — swap aria-label so the new accessible name
-			// matches the prompt, and append a transient role="alert"
-			// announcer so AT speaks the prompt immediately (aria-label
-			// mutation alone is not announced on a focused element).
-			this.originalAriaLabel = this.dom.getAttribute('aria-label');
-			this.dom.setAttribute('aria-label', this.confirmText);
-			this.alertNode = document.createElement('span');
-			this.alertNode.className = 'sr-only';
-			this.alertNode.setAttribute('role', 'alert');
-			this.alertNode.textContent = this.confirmText;
-			this.dom.appendChild(this.alertNode);
+		this.originalAriaLabel = this.dom.getAttribute('aria-label');
+		this.originalAriaLive = this.dom.getAttribute('aria-live');
+
+		if (this.isTwoElementMode) {
+			if (this.idleEl) this.idleEl.setAttribute('hidden', 'true');
+			if (this.activeEl) this.activeEl.removeAttribute('hidden');
+
+			const promptText = this.activeEl ? this.activeEl.textContent.trim() : '';
+			if (promptText) {
+				this.dom.setAttribute('aria-label', promptText);
+				this.dom.setAttribute('aria-live', 'polite');
+			}
 		} else {
-			this.dom.textContent = this.confirmText;
+			var iconUse = this.dom.querySelector('svg.ln-icon use');
+			if (iconUse && this.originalText === '') {
+				this.isIconButton = true;
+				this.originalIconHref = iconUse.getAttribute('href');
+				iconUse.setAttribute('href', '#ln-icon-check');
+				this.dom.classList.add('ln-confirm-tooltip');
+				this.dom.setAttribute('data-tooltip-text', this.confirmText);
+				this.dom.setAttribute('aria-label', this.confirmText);
+				this.dom.setAttribute('aria-live', 'polite');
+			} else {
+				this.dom.textContent = this.confirmText;
+			}
 		}
 
 		this._startTimer();
@@ -88,29 +114,38 @@ import { registerComponent, dispatch } from '../../ln-core';
 		this.confirming = false;
 		this.dom.removeAttribute('data-confirming');
 
-		if (this.isIconButton) {
-			var iconUse = this.dom.querySelector('svg.ln-icon use');
-			if (iconUse && this.originalIconHref) {
-				iconUse.setAttribute('href', this.originalIconHref);
-			}
-			this.dom.classList.remove('ln-confirm-tooltip');
-			this.dom.removeAttribute('data-tooltip-text');
-			// Accessibility — restore aria-label and remove the announcer.
-			if (this.originalAriaLabel !== null && this.originalAriaLabel !== undefined) {
-				this.dom.setAttribute('aria-label', this.originalAriaLabel);
+		if (this.isTwoElementMode) {
+			if (this.idleEl) this.idleEl.removeAttribute('hidden');
+			if (this.activeEl) this.activeEl.setAttribute('hidden', 'true');
+		} else {
+			if (this.isIconButton) {
+				var iconUse = this.dom.querySelector('svg.ln-icon use');
+				if (iconUse && this.originalIconHref) {
+					iconUse.setAttribute('href', this.originalIconHref);
+				}
+				this.dom.classList.remove('ln-confirm-tooltip');
+				this.dom.removeAttribute('data-tooltip-text');
+				this.isIconButton = false;
+				this.originalIconHref = null;
 			} else {
-				this.dom.removeAttribute('aria-label');
-			}
-			this.originalAriaLabel = null;
-			if (this.alertNode && this.alertNode.parentNode === this.dom) {
-				this.dom.removeChild(this.alertNode);
+				this.dom.textContent = this.originalText;
 			}
-			this.alertNode = null;
-			this.isIconButton = false;
-			this.originalIconHref = null;
+		}
+
+		// Restore Accessibility Attributes directly on host button
+		if (this.originalAriaLabel !== null && this.originalAriaLabel !== undefined) {
+			this.dom.setAttribute('aria-label', this.originalAriaLabel);
+		} else {
+			this.dom.removeAttribute('aria-label');
+		}
+		this.originalAriaLabel = null;
+
+		if (this.originalAriaLive !== null && this.originalAriaLive !== undefined) {
+			this.dom.setAttribute('aria-live', this.originalAriaLive);
 		} else {
-			this.dom.textContent = this.originalText;
+			this.dom.removeAttribute('aria-live');
 		}
+		this.originalAriaLive = null;
 
 		if (this.revertTimer) {
 			clearTimeout(this.revertTimer);
@@ -119,8 +154,9 @@ import { registerComponent, dispatch } from '../../ln-core';
 	};
 
 	_component.prototype.destroy = function () {
+		_log('destroy called on', this.dom);
 		if (!this.dom[DOM_ATTRIBUTE]) return;
-		this._reset();
+		if (this.confirming) this._reset();
 		this.dom.removeEventListener('click', this._onClick);
 		delete this.dom[DOM_ATTRIBUTE];
 	};