@takagaki/cortex-decisions-viewer 0.4.60 → 0.4.62

package/dist/render.js

@@ -1708,7 +1708,10 @@ ${capabilityState.toString()}
     m.modal.appendChild(el("div", { class: "modal-actions" }, [
       el("button", { class: "ds-toggle-btn", type: "button", text: "閉じる" }),
     ]));
-    m.modal.querySelector(".modal-actions button").addEventListener("click", m.close);
+    // **close をそのまま渡さない。** ハンドラに渡すと close(MouseEvent) になる。
+    // いまは skipRefresh の判定が厳密比較なので効いているが、truthy 判定に
+    // 緩めた瞬間「閉じる」ボタンだけが黙って取り込まなくなる
+    m.modal.querySelector(".modal-actions button").addEventListener("click", function () { m.close(); });
     m.overlay.appendChild(m.modal);
     showModal(m.overlay, m.modal);
   }
@@ -1842,7 +1845,11 @@ ${capabilityState.toString()}
           col.appendChild(el("span", { class: "ds-inactive-note", text: "未使用（この案件では設定されていません）" }));
         }
         // id は接続マップのノードclickの飛び先（アンカー）
-        var card = el("div", { class: "ds-card" + (inactive ? " ds-inactive" : ""), id: "ds-" + (s.kind || "") }, [
+        // **id は付けない。** #101 以前はこのカードが接続マップの飛び先だったが、
+        // いまはタイルが飛び先。両方に付けると同じ id が2つある不正なHTMLになり、
+        // モーダルの中身がタイルより前に来る変更が入った瞬間、getElementById が
+        // 「開いていないモーダルの中」を指して黙って無反応になる
+        var card = el("div", { class: "ds-card" + (inactive ? " ds-inactive" : "") }, [
           el("div", { class: "ds-card-main" }, [
             el("span", { class: "ds-icon", text: DS_KIND_ICON[s.kind] || "📁" }),
             el("span", { class: "ds-type", text: s.kind || "" }),
@@ -1873,15 +1880,10 @@ ${capabilityState.toString()}
       });
       var UNIT = { "slack": "チャンネル", "github-issues": "リポジトリ", "github-discussions": "リポジトリ" };
       // チャット未使用: Slackグループの位置（先頭）に「存在するが未設定」のグレー行を出す
-      if (chatOff) pushCap("チャット", inactiveSourceRow("💬", "チャット", "ds-チャット"));
-      var chatAnchored = chatOff;
-      var devAnchored = devOff;
+      // **アンカーは渡さない**（タイルが飛び先。同 §id の重複を作らない）
+      if (chatOff) pushCap("チャット", inactiveSourceRow("💬", "チャット", null));
       groups.forEach(function (g) {
         var meta = DS_TYPE[g.type] || { icon: "🔗", label: g.type || "その他" };
-        // 接続マップのノードclickの飛び先（アンカー）。チャット=Slack群の先頭・開発=GitHub群の先頭
-        var anchorId = null;
-        if (g.type === "slack" && !chatAnchored) { anchorId = "ds-チャット"; chatAnchored = true; }
-        if (g.type.indexOf("github") === 0 && !devAnchored) { anchorId = "ds-開発"; devAnchored = true; }
         var cards = el("div", { class: "ds-list" });
         g.items.forEach(function (s) { cards.appendChild(extSourceCard(s, meta)); });
         if (g.items.length >= 4) {
@@ -1906,10 +1908,8 @@ ${capabilityState.toString()}
                   : "⚠️ " + bad + "件に問題" }),
           ]);
           var det = el("details", { class: "ds-group" }, [sum, cards]);
-          if (anchorId) det.id = anchorId;
           pushCap(capOf(g.type), det);
         } else {
-          if (anchorId && cards.firstChild) cards.firstChild.id = anchorId;
           // **appendChild と違い pushCap はノードを動かさない。** firstChild を条件にすると
           // 永久に真のままになる（実際に無限ループを作った）。先に配列へ取り出す。
           var kids = [];
@@ -1919,7 +1919,7 @@ ${capabilityState.toString()}
       });
     }
     // 開発未使用: グレー行も能力の受け皿へ
-    if (devOff) pushCap("開発", inactiveSourceRow("🐙", "GitHub", "ds-開発"));
+    if (devOff) pushCap("開発", inactiveSourceRow("🐙", "GitHub", null));
 
     // **追加フォームはグループの外に置く。** グループは0件だと描かれず、4件以上だと
     // 畳まれる（既定は閉）。中に入れると**新規案件（0件）＝一番追加したい場面**で消える。
@@ -3243,15 +3243,14 @@ ${capabilityState.toString()}
     // ノード**で、掴んでいる一覧も古い。作り直すと、下のタイルは「2リポジトリ」・
     // 上のモーダルは「1リポジトリ」という食い違いになる。
     // 取り込みは**最後の1枚を閉じたとき**に行えば足りる
+    // **戻り先は畳む前に取る。** 既存の close() が前のタイルへフォーカスを戻すので、
+    // 後で取ると押し替え後に閉じたとき「1枚目に開いたタイル」へ戻ってしまう
+    var returnTo = document.activeElement;
     var existing = app.querySelector(".modal-overlay");
     if (existing) {
       if (existing.__close) existing.__close(true);
       else if (existing.parentNode) existing.parentNode.removeChild(existing);
     }
-
-    // 開く前にフォーカスがどこにあったかを覚え、閉じたら戻す。
-    // 戻さないと、キーボードだけで操作している人は一覧の先頭へ飛ばされる
-    var returnTo = document.activeElement;
     var overlay = el("div", { class: "modal-overlay" });
     var modal = el("div", { class: wide ? "modal modal-wide" : "modal", role: "dialog", "aria-modal": "true" });
     // **dialog に名前を付ける。** 無いとスクリーンリーダは「ダイアログ」としか
@@ -3277,13 +3276,18 @@ ${capabilityState.toString()}
 
     function close(skipRefresh) {
       if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
-      var behind = app.querySelector(".datasources");
-      if (behind) { behind.removeAttribute("inert"); behind.removeAttribute("aria-hidden"); }
+      setBackdropInert(overlay, false);
       document.removeEventListener("keydown", onKey);
-      if (returnTo && typeof returnTo.focus === "function" && returnTo.isConnected !== false) returnTo.focus();
-      // **閉じたら差し替えを試し直す。** 開いている間はライブ値の反映を見送るが、
-      // 見送ったままだと再取得の口が無く、タブを離れて戻るまで古い値のままになる。
+      // **差し替えを先に、フォーカスを戻すのは後。**
+      // isBeingEdited は「節の中にフォーカスがあるか」を見て早期returnする。
+      // 先にタイルへフォーカスを戻すと、直後の refreshDataSources が自分で
+      // 弾かれる——**実ブラウザではクリックでもフォーカスが当たるので必ず起きる**。
+      // jsdom の .click() はフォーカスを当てないので、テストからは見えなかった。
       if (skipRefresh !== true && typeof refreshDataSources === "function") refreshDataSources();
+      // 節ごと差し替わっていると元のノードは切り離されている。同じ id で引き直す
+      var back = returnTo;
+      if (back && back.id && !app.contains(back)) back = document.getElementById(back.id) || back;
+      if (back && typeof back.focus === "function" && app.contains(back)) back.focus();
     }
     function onKey(e) { if (e.key === "Escape") close(); }
     document.addEventListener("keydown", onKey);
@@ -3301,13 +3305,33 @@ ${capabilityState.toString()}
    * もう一度 Enter を押しただけで、確認なしに設定ファイルが書き換わる。
    * 移す先は閉じるボタン——押しても何も壊れないものにする。
    */
+  /**
+   * モーダルの下地を触れなくする（解除は on=false）。
+   *
+   * **.datasources だけでは足りない。** タブ行・接続マップ・ヘッダのリンクが外に残り、
+   * Tab で抜けられる。とくに「決定事項」タブに届くので、押すとモーダルを開いたまま
+   * 画面が切り替わり、close() を通らないので keydown が1本残る。
+   */
+  function setBackdropInert(overlay, on) {
+    var scopes = [app, document.body];
+    for (var i = 0; i < scopes.length; i++) {
+      var kids = scopes[i].children;
+      for (var j = 0; j < kids.length; j++) {
+        var n = kids[j];
+        if (n === overlay || n.contains(overlay) || n.tagName === "SCRIPT" || n.tagName === "STYLE") continue;
+        if (on) { n.setAttribute("inert", ""); n.setAttribute("aria-hidden", "true"); }
+        else { n.removeAttribute("inert"); n.removeAttribute("aria-hidden"); }
+      }
+    }
+  }
+
   function showModal(overlay, modal) {
-    // **下地を触れなくする。** 無いと Tab がモーダルの外へ抜け、読み上げも
-    // 背後の一覧を読み続ける（モーダルを開いた意味が無くなる）
-    var behind = app.querySelector(".datasources");
-    if (behind) { behind.setAttribute("inert", ""); behind.setAttribute("aria-hidden", "true"); }
     app.appendChild(overlay);
-    var safe = modal.querySelector(".modal-actions button, .modal-cancel");
+    setBackdropInert(overlay, true);
+    // **✕ を先に探す。** 「閉じる」は一覧の最後尾にあり、focus() は対象まで
+    // スクロールするので、開いた瞬間にモーダルが最下部まで飛ぶ（見出しも一覧の
+    // 先頭も見えない）。✕ は見出し行＝先頭で、押しても何も壊れない
+    var safe = modal.querySelector(".modal-x, .modal-actions button, .modal-cancel");
     if (!safe) {
       // 閉じるボタンが無い形のモーダル用。見出しに載せて読み上げの起点にする
       modal.setAttribute("tabindex", "-1");
@@ -3393,7 +3417,7 @@ ${capabilityState.toString()}
     nameInput.addEventListener("input", update);
 
     // 閉じる経路（Escape・背景クリック）は makeModal 側に用意されている
-    cancelBtn.addEventListener("click", mk.close);
+    cancelBtn.addEventListener("click", function () { mk.close(); });
     submitBtn.addEventListener("click", function () { submitIntake(kind, selectedFiles, nameInput.value, status, submitBtn); });
   }
   async function submitIntake(kind, files, submitter, status, submitBtn) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.4.60",
+  "version": "0.4.62",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,