@profpowell/vb-project-planning 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@profpowell/vb-project-planning",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Project- and UX-planning Web Components for Vanilla Breeze: personas, stories, journeys, empathy maps, impact/effort and quadrant grids, risk and traceability matrices, burndown, roadmap, kanban, story map, gantt, review surface, work items, ADRs, iron triangle, capacity plans, quality targets, and requirement cards.",
   "license": "MIT",
   "author": "Thomas A. Powell",

package/src/web-components/iron-triangle/_capacity.js

@@ -40,7 +40,7 @@ export function defaultFormulaText(time, cost, focusFactor) {
 
 /**
  * FNV-1a (32-bit) hash over a stable JSON serialization of the triangle.
- * Used for drift detection by downstream consumers (notably <nfr-compass>'s
+ * Used for drift detection by downstream consumers (notably <quality-target>'s
  * ironTriangleHash field).
  *
  * Matches the fnv1a in src/web-components/color-picker/_color-utils.js so

package/src/web-components/iron-triangle/_triangle-geometry.js

@@ -172,7 +172,7 @@ export function buildTriangleSvg({
   center.setAttribute('role', 'button');
   center.setAttribute(
     'aria-label',
-    `Quality — ${formatQualitySummary(qualitySummary)}. Activate to open the NFR compass.`,
+    `Quality — ${formatQualitySummary(qualitySummary)}. Activate to open the quality decision.`,
   );
 
   // Backdrop circle — sits behind the text, masks the polygon stroke.

package/src/web-components/iron-triangle/api.json

@@ -13,8 +13,8 @@
     { "name": "data-min-capacity",     "kind": "data",     "purpose": "config",         "type": "number",  "default": "1",        "description": "Floor for capacityPoints" },
     { "name": "data-quality-href",     "kind": "data",     "purpose": "config",         "type": "string",  "description": "Navigation fallback when iron-triangle:open-quality isn't preventDefault-ed" },
     { "name": "data-quality-summary",  "kind": "data",     "purpose": "config",         "type": "string",  "description": "Short summary text shown in the center's native tooltip + aria-label (e.g. '3 critical: perf, sec, a11y')" },
-    { "name": "disabled",              "kind": "native",   "purpose": "config",         "type": "boolean", "description": "All inputs disabled" },
-    { "name": "locked",                "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped vectors" }
+    { "name": "disabled",              "kind": "native",   "purpose": "config",         "type": "boolean", "description": "Fully off: vertex and centre Quality targets leave the tab order (aria-disabled), openEditor() is a no-op, the mode switch and all dialog controls are disabled. setManual() / setFormula() / revise() still work for the host." },
+    { "name": "locked",                "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped shapes: the same editing lock as disabled, but the centre Quality target still opens the quality decision (iron-triangle:open-quality / data-quality-href)" }
   ],
   "slots": [],
   "events": [

package/src/web-components/iron-triangle/logic.js

@@ -25,7 +25,7 @@
  *     is never colour-only.
  *
  * Optional: pass a `data-quality-summary` attribute or set the
- * `qualitySummary` property to surface the bound NFR compass's
+ * `qualitySummary` property to surface the bound quality-target's
  * decision on hover (e.g. "3 critical: perf, sec, a11y").
  */
 
@@ -171,7 +171,7 @@ class IronTriangle extends VBElement {
 
   /** Imperatively open a vertex editor. */
   openEditor(axis) {
-    if (!SECTIONS.includes(axis)) return;
+    if (!SECTIONS.includes(axis) || this.#inert) return;
     const dialog = this.#ensureDialog(axis);
     if (typeof dialog.showModal === 'function') dialog.showModal();
     else dialog.setAttribute('open', '');
@@ -235,7 +235,7 @@ class IronTriangle extends VBElement {
     const center = event.target.closest?.('.center[data-target="quality"]');
     if (center && this.contains(center)) {
       event.preventDefault();
-      this.#fireQualityOpen();
+      if (!this.hasAttribute('disabled')) this.#fireQualityOpen();
     }
   }
 
@@ -250,7 +250,7 @@ class IronTriangle extends VBElement {
     const center = event.target.closest?.('.center[data-target="quality"]');
     if (center && this.contains(center)) {
       event.preventDefault();
-      this.#fireQualityOpen();
+      if (!this.hasAttribute('disabled')) this.#fireQualityOpen();
     }
   }
 
@@ -314,6 +314,7 @@ class IronTriangle extends VBElement {
       this.#recompute({ source: 'dialog', field: axis });
     });
 
+    this.#syncDisabledLocked();
     return dialog;
   }
 
@@ -399,6 +400,7 @@ class IronTriangle extends VBElement {
     const existing = this.querySelector(':scope > svg');
     if (existing) existing.replaceWith(svg);
     else this.prepend(svg);
+    this.#syncHitTargetsInert();
     this.dataset.capacityPoints = String(this.#value.capacityPoints);
     this.dataset.capacitySource = this.#value.capacitySource;
   }
@@ -422,12 +424,40 @@ class IronTriangle extends VBElement {
     } catch { /* older Safari */ }
   }
 
+  get #inert() { return this.hasAttribute('disabled') || this.hasAttribute('locked'); }
+
+  /**
+   * disabled / locked: no editing path stays open. styles.css already sets
+   * pointer-events: none; this closes the keyboard and programmatic paths
+   * (vertex targets leave the tab order, openEditor() is a no-op) and
+   * disables the mode switch and every dialog control, including dialogs
+   * built later.
+   *
+   * The centre Quality target is navigation, not editing, so under `locked`
+   * it stays focusable and clickable (styles.css re-enables its pointer).
+   * Under `disabled` it goes inert too: browsers suppress mouse events
+   * inside a disabled form-associated element, so keeping only its
+   * keyboard path alive would be inconsistent.
+   */
   #syncDisabledLocked() {
-    const off = this.hasAttribute('disabled') || this.hasAttribute('locked');
+    const off = this.#inert;
     if (this.#modeButton) this.#modeButton.disabled = off;
     for (const dialog of Object.values(this.#dialogs)) {
       for (const el of dialog.querySelectorAll('input, select, textarea, button')) /** @type {any} */ (el).disabled = off;
     }
+    this.#syncHitTargetsInert();
+  }
+
+  /** Hit targets follow disabled / locked across re-renders. */
+  #syncHitTargetsInert() {
+    const editingOff = this.#inert;
+    const navOff = this.hasAttribute('disabled');
+    for (const target of this.querySelectorAll(':scope > svg [role="button"][tabindex]')) {
+      const off = target.matches('.center[data-target="quality"]') ? navOff : editingOff;
+      target.setAttribute('tabindex', off ? '-1' : '0');
+      if (off) target.setAttribute('aria-disabled', 'true');
+      else target.removeAttribute('aria-disabled');
+    }
   }
 
   // ── Internal: status strip (a11y hooks) ──────────────────────────
@@ -448,7 +478,9 @@ class IronTriangle extends VBElement {
 
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'iron-triangle-mode';
+    // VB's `ghost` variant keeps the switch secondary to the triangle;
+    // styles.css trims it further to sit inside the small status strip.
+    button.className = 'iron-triangle-mode ghost';
     button.setAttribute('aria-pressed', 'false');
     button.textContent = 'Manual capacity';
     button.addEventListener('click', () => this.#openCapacityDialog());
@@ -486,9 +518,14 @@ class IronTriangle extends VBElement {
 
     if (this.#modeButton) {
       this.#modeButton.setAttribute('aria-pressed', manual ? 'true' : 'false');
-      this.#modeButton.setAttribute('aria-label',
-        manual ? `Manual capacity: ${capacityPoints} points. Activate to edit or return to the formula.`
-               : 'Manual capacity. Activate to override the formula with a fixed number.');
+      // Pressed state is carried by the visible text too, not only by the
+      // underline. The aria-label starts with that visible text so voice
+      // users can say what they see (WCAG 2.5.3 Label in Name).
+      const label = manual && capacityPoints > 0 ? `Manual capacity: ${capacityPoints} pts` : 'Manual capacity';
+      if (this.#modeButton.textContent !== label) this.#modeButton.textContent = label;
+      this.#modeButton.setAttribute('aria-label', manual
+        ? `${label}. Activate to edit or return to the formula.`
+        : `${label}. Activate to override the formula with a fixed number.`);
     }
     if (this.#deadlineWarning) {
       this.#deadlineWarning.textContent = overDeadline ? `Deadline has passed (${deadline})` : '';
@@ -566,6 +603,7 @@ class IronTriangle extends VBElement {
       if (Number.isFinite(n) && n > 0) this.setManual(n);
     });
 
+    this.#syncDisabledLocked();
     return dialog;
   }
 

package/src/web-components/iron-triangle/styles.css

@@ -150,13 +150,27 @@ iron-triangle > .iron-triangle-status .iron-triangle-readout {
   border: 0;
 }
 
+/* Quiet, secondary switch: ghost button, compact, muted until hovered or
+   pressed. VB's touch-target minimum block size is kept. Pressed adds an underline (plus the "Manual capacity: N pts" label) so
+   the state never rests on colour alone. */
 iron-triangle > .iron-triangle-status .iron-triangle-mode {
   font-size: inherit;
+  font-weight: var(--font-weight-normal, 400);
+  padding-block: 0;
+  padding-inline: var(--size-xs, 0.5rem);
+  border-color: transparent;
+  color: var(--color-text-muted);
+}
+
+iron-triangle > .iron-triangle-status .iron-triangle-mode:hover {
+  color: var(--color-text);
 }
 
 iron-triangle > .iron-triangle-status .iron-triangle-mode[aria-pressed="true"] {
-  border-color: var(--color-interactive);
   color: var(--color-interactive);
+  text-decoration: underline;
+  text-decoration-thickness: var(--border-width-medium, 2px);
+  text-underline-offset: 0.25em;
 }
 
 /* Visible, text-bearing warning — never colour-only. */
@@ -193,6 +207,13 @@ iron-triangle[locked] {
   pointer-events: none;
 }
 
+/* The centre Quality target navigates to the quality decision rather than
+   editing the shape, so it keeps working on a locked (read-only) triangle.
+   A disabled triangle stays fully off, like any disabled control. */
+iron-triangle[locked]:not([disabled]) svg .center[data-target="quality"] {
+  pointer-events: auto;
+}
+
 /* ── Dialog chrome ────────────────────────────────────────────── */
 
 iron-triangle > dialog.iron-triangle-dialog {

package/src/web-components/quality-target/api.json

@@ -13,13 +13,12 @@
     { "name": "data-capacity-points",       "kind": "data",     "purpose": "config",         "type": "number",  "description": "Literal capacity fallback when no triangle is bound" },
     { "name": "data-cost-weights",          "kind": "data",     "purpose": "config",         "type": "string",  "description": "JSON object overriding default per-ility cost weights" },
     { "name": "data-radius",                "kind": "data",     "purpose": "config",         "type": "number",  "default": "100", "description": "Base radius in SVG units" },
-    { "name": "data-show-envelope",         "kind": "data",     "purpose": "visual-variant", "type": "boolean", "description": "Show the capacity envelope polygon (default true; set to \"false\" to hide)" },
     { "name": "data-min-rationale",         "kind": "data",     "purpose": "config",         "type": "number",  "default": "10",  "description": "Min characters for a Critical row's rationale" },
     { "name": "data-max-rationale",         "kind": "data",     "purpose": "config",         "type": "number",  "default": "200", "description": "Max characters for the rationale textarea" },
     { "name": "data-min-overrun-rationale", "kind": "data",     "purpose": "config",         "type": "number",  "default": "10",  "description": "Min characters for overrunRationale" },
     { "name": "data-max-overrun-rationale", "kind": "data",     "purpose": "config",         "type": "number",  "default": "400", "description": "Max characters for overrunRationale" },
-    { "name": "disabled",                   "kind": "native",   "purpose": "config",         "type": "boolean", "description": "All inputs disabled" },
-    { "name": "locked",                     "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped vectors" }
+    { "name": "disabled",                   "kind": "native",   "purpose": "config",         "type": "boolean", "description": "No editing: axes leave the tab order, openEditor() is a no-op, dialog and footer controls are disabled; also bars the element from form validation" },
+    { "name": "locked",                     "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped vectors; same editing lock as disabled, but the value still submits and validates" }
   ],
   "slots": [],
   "events": [

package/src/web-components/quality-target/logic.js

@@ -4,9 +4,10 @@
  * One component, two roles. The radar polygon IS the picker: each
  * axis is a clickable hit-target that opens a per-ility <dialog>
  * editor (level radio group + rationale textarea). The same SVG
- * also visualizes the chosen vector against the project's capacity
- * envelope (read from a paired <iron-triangle> via data-bind-to or
- * supplied via data-capacity-points).
+ * also shows the Critical spend against the project's capacity in a
+ * centre readout ("5 / of 4"), with capacity read from a paired
+ * <iron-triangle> via data-bind-to or supplied via data-capacity-points.
+ * There is no envelope polygon: three level rings are the only backdrop.
  *
  * Replaces both <nfr-compass> and <nfr-radar> from earlier rounds.
  *
@@ -37,12 +38,14 @@ import {
   buildTargetSvg,
 } from './_quality-utils.js';
 
+let instanceCount = 0;
+
 class QualityTarget extends VBElement {
   static formAssociated = true;
   static get observedAttributes() {
     return [
       'data-bind-to', 'data-capacity-points', 'data-cost-weights',
-      'data-radius', 'data-show-envelope',
+      'data-radius',
       'data-min-rationale', 'data-max-rationale',
       'data-min-overrun-rationale', 'data-max-overrun-rationale',
       'disabled', 'locked',
@@ -71,6 +74,9 @@ class QualityTarget extends VBElement {
   #dialogs = {};
   /** @type {HTMLElement | null} */
   #footer = null;
+  /** Per-instance prefix so generated label/control ids never collide
+   *  when a page holds more than one target. */
+  #uid = `quality-target-${++instanceCount}`;
 
   constructor() {
     super();
@@ -83,6 +89,7 @@ class QualityTarget extends VBElement {
     this.#bindToTriangle();
     this.#renderViz();
     this.#ensureFooter();
+    this.#publishFormValue();
 
     this.listen(this, 'click', (e) => this.#onClick(e));
     this.listen(this, 'keydown', (e) => this.#onKeydown(e));
@@ -104,8 +111,11 @@ class QualityTarget extends VBElement {
     } else if (name === 'data-cost-weights') {
       this.#refreshCostWeights();
       this.#renderViz();
-    } else if (name === 'data-radius' || name === 'data-show-envelope') {
+    } else if (name === 'data-radius') {
       this.#renderViz();
+    } else if (name === 'data-min-overrun-rationale' || name === 'data-max-overrun-rationale') {
+      this.#updateFooter();
+      this.#publishFormValue();
     } else if (name === 'disabled' || name === 'locked') {
       this.#syncDisabledLocked();
     }
@@ -153,7 +163,7 @@ class QualityTarget extends VBElement {
 
   /** Imperatively open one axis's editor. */
   openEditor(ility) {
-    if (!this.#ilities.includes(ility)) return;
+    if (!this.#ilities.includes(ility) || this.#inert) return;
     const dialog = this.#ensureDialog(ility);
     if (typeof dialog.showModal === 'function') dialog.showModal();
     else dialog.setAttribute('open', '');
@@ -244,10 +254,10 @@ class QualityTarget extends VBElement {
     // Rationale form-field (required when Critical).
     const ff = document.createElement('form-field');
     const rl = document.createElement('label');
-    rl.setAttribute('for', `quality-${ility}-rationale`);
+    rl.setAttribute('for', `${this.#uid}-${ility}-rationale`);
     rl.textContent = 'Rationale (required when Critical)';
     const ta = document.createElement('textarea');
-    ta.id = `quality-${ility}-rationale`;
+    ta.id = `${this.#uid}-${ility}-rationale`;
     ta.name = 'rationale';
     ta.rows = 3;
     ta.minLength = this.#minRationale();
@@ -304,6 +314,7 @@ class QualityTarget extends VBElement {
     });
 
     this.#syncDialogFromState(ility);
+    this.#syncDisabledLocked();
     return dialog;
   }
 
@@ -338,8 +349,8 @@ class QualityTarget extends VBElement {
       <strong>Over budget — explain why.</strong>
       <small data-overrun-prompt></small>
       <form-field>
-        <label for="quality-overrun">Overrun rationale (≥ ${this.#minOverrunRationale()} chars)</label>
-        <textarea id="quality-overrun" name="overrunRationale"
+        <label for="${this.#uid}-overrun">Overrun rationale (≥ ${this.#minOverrunRationale()} chars)</label>
+        <textarea id="${this.#uid}-overrun" name="overrunRationale"
                   minlength="${this.#minOverrunRationale()}"
                   maxlength="${this.#maxOverrunRationale()}"
                   rows="3"></textarea>
@@ -355,6 +366,7 @@ class QualityTarget extends VBElement {
 
     this.append(footer);
     this.#footer = footer;
+    this.#syncDisabledLocked();
   }
 
   #updateFooter() {
@@ -366,9 +378,19 @@ class QualityTarget extends VBElement {
     if (overrun) {
       overrun.hidden = !isOver;
       const prompt = overrun.querySelector('[data-overrun-prompt]');
-      if (prompt && Number.isFinite(cap)) {
-        prompt.textContent = `You're over budget by ${sum - cap} points (${sum}/${cap}).`;
+      if (prompt) {
+        const over = sum - cap;
+        prompt.textContent = isOver
+          ? `You're over budget by ${over} ${over === 1 ? 'point' : 'points'} (${sum}/${cap}).`
+          : '';
       }
+      // Keep the label and limits in step with the data-*-overrun-rationale
+      // attributes, which may change after the footer was built.
+      const min = this.#minOverrunRationale();
+      const label = overrun.querySelector('label');
+      if (label) label.textContent = `Overrun rationale (≥ ${min} chars)`;
+      const ta = /** @type {HTMLTextAreaElement | null} */ (overrun.querySelector('textarea'));
+      if (ta) { ta.minLength = min; ta.maxLength = this.#maxOverrunRationale(); }
     }
   }
 
@@ -461,6 +483,7 @@ class QualityTarget extends VBElement {
     const existing = this.querySelector(':scope > svg');
     if (existing) existing.replaceWith(svg);
     else this.prepend(svg);
+    this.#syncAxesInert();
   }
 
   #publish(source, field) {
@@ -490,15 +513,64 @@ class QualityTarget extends VBElement {
     try {
       this.#internals.setFormValue(JSON.stringify(this.value));
     } catch { /* older Safari */ }
+    this.#syncValidity();
   }
 
+  /**
+   * Mirror validateVector() into ElementInternals so a parent <form>'s
+   * checkValidity() / submit is blocked too, not just this element's own
+   * checkValidity() method. The overrun textarea anchors the message when
+   * the overrun rationale is the problem.
+   */
+  #syncValidity() {
+    if (typeof this.#internals.setValidity !== 'function') return;
+    const { valid, errors } = validateVector({
+      vector: this.#vector,
+      rationales: this.#rationales,
+      costWeights: this.#costWeights,
+      capacityPoints: this.#resolveCapacity(),
+      overrunRationale: this.#overrunRationale,
+      minRationale: this.#minRationale(),
+      minOverrunRationale: this.#minOverrunRationale(),
+    });
+    if (valid) { this.#internals.setValidity({}); return; }
+    const overrunTa = /** @type {HTMLElement | null} */ (
+      this.overBudget ? this.querySelector('[data-quality-overrun] textarea') : null);
+    try {
+      this.#internals.setValidity({ customError: true }, errors.join(' '), overrunTa ?? undefined);
+    } catch { /* anchor not yet connected */
+      this.#internals.setValidity({ customError: true }, errors.join(' '));
+    }
+  }
+
+  get #inert() { return this.hasAttribute('disabled') || this.hasAttribute('locked'); }
+
+  /**
+   * disabled / locked: no editing path stays open. styles.css already sets
+   * pointer-events: none; this closes the keyboard and programmatic paths
+   * (axes leave the tab order, openEditor() is a no-op) and disables every
+   * dialog and footer control, including dialogs built later.
+   */
   #syncDisabledLocked() {
-    const off = this.hasAttribute('disabled') || this.hasAttribute('locked');
+    const off = this.#inert;
     for (const dialog of Object.values(this.#dialogs)) {
       for (const el of dialog.querySelectorAll('input, textarea, select, button')) {
         /** @type {HTMLInputElement} */ (el).disabled = off;
       }
     }
+    for (const el of this.#footer?.querySelectorAll('textarea') ?? []) {
+      /** @type {HTMLTextAreaElement} */ (el).disabled = off;
+    }
+    this.#syncAxesInert();
+  }
+
+  #syncAxesInert() {
+    const off = this.#inert;
+    for (const axis of this.querySelectorAll(':scope > svg .axis[data-ility]')) {
+      axis.setAttribute('tabindex', off ? '-1' : '0');
+      if (off) axis.setAttribute('aria-disabled', 'true');
+      else axis.removeAttribute('aria-disabled');
+    }
   }
 
   // ── Internal: config readers ──────────────────────────────────────

package/src/web-components/requirement-card/api.json

@@ -2,7 +2,7 @@
   "$schema": "../../../schemas/api.schema.json",
   "element": "requirement-card",
   "type": "web-component",
-  "description": "Display-only card for ONE NFR ility row. Renders priority + rationale + optional conflict flag for status dashboards and ADR appendices. The prioritization decision itself lives in <nfr-compass>.",
+  "description": "Display-only card for ONE NFR ility row. Renders priority + rationale + optional conflict flag for status dashboards and ADR appendices. The prioritization decision itself lives in <quality-target>.",
   "htmlvalidate": {
     "flow": true,
     "permittedContent": ["@flow"]

package/src/web-components/requirement-card/logic.js

@@ -1,11 +1,11 @@
 /**
  * <requirement-card> — Display atom for ONE NFR ility row.
  *
- * Display-only. The prioritization decision lives in <nfr-compass>;
+ * Display-only. The prioritization decision lives in <quality-target>;
  * this component just renders one row's worth of state — name +
  * category badge + priority pill + rationale + (optional) conflict flag —
  * for use on status dashboards, ADR appendices, or anywhere a project
- * wants to surface a single ility outside the compass.
+ * wants to surface a single ility outside the target.
  *
  * Slots:
  *   name           — ility label (e.g. "Performance")
@@ -24,6 +24,8 @@
  *   requirement-card:click — bubbles a structured detail when the card
  *                            is activated (mouse, keyboard, or touch);
  *                            parent components can wire navigation.
+ *                            Inside an <a>/<button> wrapper, the
+ *                            wrapper's own keyboard activation counts.
  *
  * Pattern reference: matches the shadow-DOM + slot conventions from
  * <score-card> (also a single-row dashboard atom).
@@ -58,6 +60,9 @@ const TEMPLATE = `
 `;
 
 class RequirementCard extends VBElement {
+  /** True when this element added role="button" itself (so it may remove it). */
+  #ownsRole = false;
+
   static get observedAttributes() {
     return ['data-priority', 'data-conflict', 'tabindex'];
   }
@@ -82,6 +87,15 @@ class RequirementCard extends VBElement {
     this.#syncInteractive();
 
     this.listen(this, 'click', (e) => this.#onActivate(e));
+    // Keyboard activation of a wrapping <a>/<button> fires `click` on the
+    // wrapper itself, which never reaches the card's own listener. Clicks
+    // that started inside the card are already handled above.
+    const wrapper = this.closest('a[href], button');
+    if (wrapper) {
+      this.listen(wrapper, 'click', (e) => {
+        if (!this.contains(/** @type {Node} */ (e.target))) this.#onActivate(e);
+      });
+    }
     this.listen(this, 'keydown', (e) => {
       const ke = /** @type {KeyboardEvent} */ (e);
       if ((ke.key === 'Enter' || ke.key === ' ') && this.#interactive) {
@@ -146,6 +160,16 @@ class RequirementCard extends VBElement {
 
   #syncInteractive() {
     this.setState('interactive', !!this.#interactive);
+    // A focusable card that is not inside a native control needs a role
+    // so assistive tech announces it as activatable. Author roles win.
+    const needsRole = this.hasAttribute('tabindex') && !this.closest('a[href], button');
+    if (needsRole && !this.hasAttribute('role')) {
+      this.setAttribute('role', 'button');
+      this.#ownsRole = true;
+    } else if (!needsRole && this.#ownsRole) {
+      this.removeAttribute('role');
+      this.#ownsRole = false;
+    }
   }
 
   #onActivate(event) {

package/src/web-components/requirement-card/static.html

@@ -8,7 +8,7 @@
 <body>
   <!--
     Display-only card for ONE NFR ility row. The prioritization
-    decision lives in <nfr-compass>; this is the visual atom.
+    decision lives in <quality-target>; this is the visual atom.
     Pre-upgrade, the card renders as a plain article — no JS needed
     for it to be readable.
   -->