@pie-players/pie-tool-answer-eliminator 0.2.9 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-tool-answer-eliminator",
-	"version": "0.2.9",
+	"version": "0.2.11",
 	"type": "module",
 	"description": "Answer eliminator tool for PIE assessment player - supports process-of-elimination test-taking strategy",
 	"repository": {
@@ -49,9 +49,9 @@
 	"unpkg": "./dist/tool-answer-eliminator.js",
 	"jsdelivr": "./dist/tool-answer-eliminator.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.2.9",
-		"@pie-players/pie-context": "0.1.1",
-		"@pie-players/pie-players-shared": "0.2.5",
+		"@pie-players/pie-assessment-toolkit": "0.2.11",
+		"@pie-players/pie-context": "0.1.3",
+		"@pie-players/pie-players-shared": "0.2.7",
 		"daisyui": "^5.5.18"
 	},
 	"types": "./dist/index.d.ts",

package/strategies/mask-strategy.ts

@@ -5,6 +5,15 @@ import type { EliminationStrategy } from "./elimination-strategy.js";
  * Partially hides/grays eliminated choices
  */
 export class MaskStrategy implements EliminationStrategy {
+	private static readonly HIGHLIGHT_STYLE_PREFIX =
+		"pie-answer-eliminator-mask-highlight-";
+	private static readonly HIGHLIGHT_NAME_PREFIX = "pie-answer-masked-";
+	private static readonly FALLBACK_CLASS = "pie-answer-masked-fallback";
+	private static readonly CHOICE_HOOK_ATTR =
+		"data-pie-answer-eliminator-choice";
+	private static readonly ELIMINATED_ATTR = "data-pie-answer-eliminated";
+	private static readonly ELIMINATED_ID_ATTR = "data-pie-answer-eliminated-id";
+
 	readonly name = "mask";
 
 	private highlights = new Map<string, Highlight>();
@@ -12,12 +21,11 @@ export class MaskStrategy implements EliminationStrategy {
 	private fallbackContainers = new Map<string, HTMLElement>();
 
 	initialize(): void {
-		this.injectCSS();
+		// No-op: shared fallback styles are owned by @pie-players/pie-theme/components.css.
 	}
 
 	destroy(): void {
 		this.clearAll();
-		this.removeCSS();
 	}
 
 	apply(choiceId: string, range: Range): void {
@@ -30,7 +38,10 @@ export class MaskStrategy implements EliminationStrategy {
 		this.injectHighlightCSS(choiceId);
 
 		const highlight = new Highlight(range);
-		CSS.highlights.set(`answer-masked-${choiceId}`, highlight);
+		CSS.highlights.set(
+			`${MaskStrategy.HIGHLIGHT_NAME_PREFIX}${choiceId}`,
+			highlight,
+		);
 
 		this.highlights.set(choiceId, highlight);
 		this.ranges.set(choiceId, range);
@@ -44,7 +55,7 @@ export class MaskStrategy implements EliminationStrategy {
 			return;
 		}
 
-		CSS.highlights.delete(`answer-masked-${choiceId}`);
+		CSS.highlights.delete(`${MaskStrategy.HIGHLIGHT_NAME_PREFIX}${choiceId}`);
 
 		// Remove CSS for this specific highlight
 		this.removeHighlightCSS(choiceId);
@@ -78,33 +89,14 @@ export class MaskStrategy implements EliminationStrategy {
 		return typeof CSS !== "undefined" && "highlights" in CSS;
 	}
 
-	private injectCSS(): void {
-		const styleId = "answer-eliminator-mask-styles";
-		if (document.getElementById(styleId)) return;
-
-		const style = document.createElement("style");
-		style.id = styleId;
-		// CSS Custom Highlight API: Each registered highlight gets its own ::highlight() selector
-		// We inject choice-specific styles dynamically in injectHighlightCSS()
-		style.textContent = `
-      /* Fallback */
-      .answer-masked-fallback {
-        opacity: 0.2;
-        filter: blur(2px);
-      }
-    `;
-
-		document.head.appendChild(style);
-	}
-
 	private injectHighlightCSS(choiceId: string): void {
-		const styleId = `answer-eliminator-mask-highlight-${choiceId}`;
+		const styleId = `${MaskStrategy.HIGHLIGHT_STYLE_PREFIX}${choiceId}`;
 		if (document.getElementById(styleId)) return;
 
 		const style = document.createElement("style");
 		style.id = styleId;
 		style.textContent = `
-      ::highlight(answer-masked-${choiceId}) {
+      ::highlight(pie-answer-masked-${choiceId}) {
         opacity: 0.2;
         filter: blur(2px);
       }
@@ -114,19 +106,15 @@ export class MaskStrategy implements EliminationStrategy {
 
 	private removeHighlightCSS(choiceId: string): void {
 		document
-			.getElementById(`answer-eliminator-mask-highlight-${choiceId}`)
+			.getElementById(`${MaskStrategy.HIGHLIGHT_STYLE_PREFIX}${choiceId}`)
 			?.remove();
 	}
 
-	private removeCSS(): void {
-		document.getElementById("answer-eliminator-mask-styles")?.remove();
-	}
-
 	private addAriaAttributes(range: Range): void {
 		const container = this.findChoiceContainer(range);
 		if (!container) return;
 
-		container.setAttribute("data-eliminated", "true");
+		container.setAttribute(MaskStrategy.ELIMINATED_ATTR, "true");
 		container.setAttribute("aria-hidden", "true");
 	}
 
@@ -134,7 +122,7 @@ export class MaskStrategy implements EliminationStrategy {
 		const container = this.findChoiceContainer(range);
 		if (!container) return;
 
-		container.removeAttribute("data-eliminated");
+		container.removeAttribute(MaskStrategy.ELIMINATED_ATTR);
 		container.removeAttribute("aria-hidden");
 	}
 
@@ -147,7 +135,7 @@ export class MaskStrategy implements EliminationStrategy {
 		}
 
 		while (element && element !== document.body) {
-			if (element.classList?.contains("choice-input")) {
+			if (element.getAttribute(MaskStrategy.CHOICE_HOOK_ATTR) === "true") {
 				return element;
 			}
 			element = element.parentElement;
@@ -160,9 +148,9 @@ export class MaskStrategy implements EliminationStrategy {
 		const container = this.findChoiceContainer(range);
 		if (!container) return;
 
-		container.classList.add("answer-masked-fallback");
-		container.setAttribute("data-eliminated", "true");
-		container.setAttribute("data-eliminated-id", choiceId);
+		container.classList.add(MaskStrategy.FALLBACK_CLASS);
+		container.setAttribute(MaskStrategy.ELIMINATED_ATTR, "true");
+		container.setAttribute(MaskStrategy.ELIMINATED_ID_ATTR, choiceId);
 		this.fallbackContainers.set(choiceId, container);
 		this.addAriaAttributes(range);
 	}
@@ -171,9 +159,9 @@ export class MaskStrategy implements EliminationStrategy {
 		const container = this.fallbackContainers.get(choiceId);
 		if (!container) return;
 
-		container.classList.remove("answer-masked-fallback");
-		container.removeAttribute("data-eliminated");
-		container.removeAttribute("data-eliminated-id");
+		container.classList.remove(MaskStrategy.FALLBACK_CLASS);
+		container.removeAttribute(MaskStrategy.ELIMINATED_ATTR);
+		container.removeAttribute(MaskStrategy.ELIMINATED_ID_ATTR);
 
 		const range = document.createRange();
 		range.selectNodeContents(container);

package/strategies/strikethrough-strategy.ts

@@ -8,6 +8,18 @@ import type { EliminationStrategy } from "./elimination-strategy.js";
  * WCAG Compliance: Maintains info structure (1.3.1), no layout shift (2.4.3)
  */
 export class StrikethroughStrategy implements EliminationStrategy {
+	private static readonly HIGHLIGHT_STYLE_PREFIX =
+		"pie-answer-eliminator-highlight-";
+	private static readonly HIGHLIGHT_NAME_PREFIX = "pie-answer-eliminated-";
+	private static readonly FALLBACK_CLASS =
+		"pie-answer-eliminator-eliminated-fallback";
+	private static readonly SR_CLASS = "pie-answer-eliminator-sr-announcement";
+	private static readonly CHOICE_HOOK_ATTR =
+		"data-pie-answer-eliminator-choice";
+	private static readonly LABEL_HOOK_ATTR = "data-pie-answer-eliminator-label";
+	private static readonly ELIMINATED_ATTR = "data-pie-answer-eliminated";
+	private static readonly ELIMINATED_ID_ATTR = "data-pie-answer-eliminated-id";
+
 	readonly name = "strikethrough";
 
 	private highlights = new Map<string, Highlight>();
@@ -18,16 +30,11 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		// Check browser support
 		if (!this.isSupported()) {
 			console.warn("CSS Custom Highlight API not supported, using fallback");
-			return;
 		}
-
-		// Inject CSS for highlight styling
-		this.injectCSS();
 	}
 
 	destroy(): void {
 		this.clearAll();
-		this.removeCSS();
 	}
 
 	apply(choiceId: string, range: Range): void {
@@ -43,7 +50,10 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		const highlight = new Highlight(range);
 
 		// Register in CSS.highlights with unique name
-		CSS.highlights.set(`answer-eliminated-${choiceId}`, highlight);
+		CSS.highlights.set(
+			`${StrikethroughStrategy.HIGHLIGHT_NAME_PREFIX}${choiceId}`,
+			highlight,
+		);
 
 		// Track internally
 		this.highlights.set(choiceId, highlight);
@@ -60,7 +70,9 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		}
 
 		// Remove from CSS.highlights
-		CSS.highlights.delete(`answer-eliminated-${choiceId}`);
+		CSS.highlights.delete(
+			`${StrikethroughStrategy.HIGHLIGHT_NAME_PREFIX}${choiceId}`,
+		);
 
 		// Remove CSS for this specific highlight
 		this.removeHighlightCSS(choiceId);
@@ -96,48 +108,14 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		return typeof CSS !== "undefined" && "highlights" in CSS;
 	}
 
-	private injectCSS(): void {
-		const styleId = "answer-eliminator-strikethrough-styles";
-
-		// Don't inject if already exists
-		if (document.getElementById(styleId)) return;
-
-		const style = document.createElement("style");
-		style.id = styleId;
-		// CSS Custom Highlight API: Each registered highlight gets its own ::highlight() selector
-		// Since we register highlights with names like 'answer-eliminated-{choiceId}',
-		// we need to inject CSS for each one dynamically, OR use a shared attribute approach.
-		// For performance, we inject a base style and add choice-specific styles dynamically.
-		style.textContent = `
-      /* Fallback for browsers without CSS Highlight API */
-      .answer-eliminated-fallback {
-        text-decoration: line-through;
-        text-decoration-thickness: 2px;
-        text-decoration-color: var(--pie-incorrect, #ff9800);
-        opacity: 0.6;
-      }
-
-      /* Screen reader only text */
-      .sr-announcement {
-        position: absolute;
-        left: -10000px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-      }
-    `;
-
-		document.head.appendChild(style);
-	}
-
 	private injectHighlightCSS(choiceId: string): void {
-		const styleId = `answer-eliminator-highlight-${choiceId}`;
+		const styleId = `${StrikethroughStrategy.HIGHLIGHT_STYLE_PREFIX}${choiceId}`;
 		if (document.getElementById(styleId)) return;
 
 		const style = document.createElement("style");
 		style.id = styleId;
 		style.textContent = `
-      ::highlight(answer-eliminated-${choiceId}) {
+      ::highlight(pie-answer-eliminated-${choiceId}) {
         text-decoration: line-through;
         text-decoration-thickness: 2px;
         text-decoration-color: var(--pie-incorrect, #ff9800);
@@ -149,30 +127,25 @@ export class StrikethroughStrategy implements EliminationStrategy {
 
 	private removeHighlightCSS(choiceId: string): void {
 		document
-			.getElementById(`answer-eliminator-highlight-${choiceId}`)
+			.getElementById(
+				`${StrikethroughStrategy.HIGHLIGHT_STYLE_PREFIX}${choiceId}`,
+			)
 			?.remove();
 	}
 
-	private removeCSS(): void {
-		const style = document.getElementById(
-			"answer-eliminator-strikethrough-styles",
-		);
-		style?.remove();
-	}
-
 	private addAriaAttributes(range: Range): void {
 		// Find the choice container element
 		const container = this.findChoiceContainer(range);
 		if (!container) return;
 
-		container.setAttribute("data-eliminated", "true");
+		container.setAttribute(StrikethroughStrategy.ELIMINATED_ATTR, "true");
 		container.setAttribute("aria-disabled", "true");
 
 		// Add screen reader announcement
-		const label = container.querySelector(".label");
-		if (label && !label.querySelector(".sr-announcement")) {
+		const label = this.resolveLabelElement(container);
+		if (label && !label.querySelector(`.${StrikethroughStrategy.SR_CLASS}`)) {
 			const announcement = document.createElement("span");
-			announcement.className = "sr-announcement";
+			announcement.className = StrikethroughStrategy.SR_CLASS;
 			announcement.textContent = " (eliminated)";
 			label.appendChild(announcement);
 		}
@@ -182,11 +155,13 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		const container = this.findChoiceContainer(range);
 		if (!container) return;
 
-		container.removeAttribute("data-eliminated");
+		container.removeAttribute(StrikethroughStrategy.ELIMINATED_ATTR);
 		container.removeAttribute("aria-disabled");
 
 		// Remove screen reader announcement
-		const announcement = container.querySelector(".sr-announcement");
+		const announcement = container.querySelector(
+			`.${StrikethroughStrategy.SR_CLASS}`,
+		);
 		announcement?.remove();
 	}
 
@@ -201,9 +176,7 @@ export class StrikethroughStrategy implements EliminationStrategy {
 
 		while (element && element !== document.body) {
 			if (
-				element.classList?.contains("choice-input") ||
-				element.classList?.contains("corespring-checkbox") ||
-				element.classList?.contains("corespring-radio-button")
+				element.getAttribute(StrikethroughStrategy.CHOICE_HOOK_ATTR) === "true"
 			) {
 				return element;
 			}
@@ -218,9 +191,9 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		const container = this.findChoiceContainer(range);
 		if (!container) return;
 
-		container.classList.add("answer-eliminated-fallback");
-		container.setAttribute("data-eliminated", "true");
-		container.setAttribute("data-eliminated-id", choiceId);
+		container.classList.add(StrikethroughStrategy.FALLBACK_CLASS);
+		container.setAttribute(StrikethroughStrategy.ELIMINATED_ATTR, "true");
+		container.setAttribute(StrikethroughStrategy.ELIMINATED_ID_ATTR, choiceId);
 		this.fallbackContainers.set(choiceId, container);
 		this.addAriaAttributes(range);
 	}
@@ -229,9 +202,9 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		const container = this.fallbackContainers.get(choiceId);
 		if (!container) return;
 
-		container.classList.remove("answer-eliminated-fallback");
-		container.removeAttribute("data-eliminated");
-		container.removeAttribute("data-eliminated-id");
+		container.classList.remove(StrikethroughStrategy.FALLBACK_CLASS);
+		container.removeAttribute(StrikethroughStrategy.ELIMINATED_ATTR);
+		container.removeAttribute(StrikethroughStrategy.ELIMINATED_ID_ATTR);
 
 		// Create fake range for aria removal
 		const range = document.createRange();
@@ -239,4 +212,12 @@ export class StrikethroughStrategy implements EliminationStrategy {
 		this.removeAriaAttributes(range);
 		this.fallbackContainers.delete(choiceId);
 	}
+
+	private resolveLabelElement(container: HTMLElement): HTMLElement | null {
+		return (
+			container.querySelector<HTMLElement>(
+				`[${StrikethroughStrategy.LABEL_HOOK_ATTR}="true"]`,
+			) || container.querySelector<HTMLElement>("label")
+		);
+	}
 }