@daoyi/nmtl-ui 2.0.1-beta.140 → 2.0.1-beta.142

package/lib/components/globalConfig.js

@@ -73,6 +73,7 @@ var zhtw = {
 	"aria.autocomplete.search": "執行搜尋",
 	"aria.loading": "載入中",
 	"aria.modal.close": "關閉視窗",
+	"chronology.noteToggle": "，顯示或隱藏資料來源",
 	"chronology.slideAnnounce": "第 {index} 張，共 {total} 張：{date} {title}",
 	"chronology.eventsLabel": "大事年表事件（方向鍵切換）",
 	"chronology.zoomIn": "放大時間刻度",
@@ -212,6 +213,7 @@ var zhcn = {
 	"aria.autocomplete.search": "执行搜寻",
 	"aria.loading": "载入中",
 	"aria.modal.close": "关闭视窗",
+	"chronology.noteToggle": "，显示或隐藏资料来源",
 	"chronology.slideAnnounce": "第 {index} 张，共 {total} 张：{date} {title}",
 	"chronology.eventsLabel": "大事年表事件（方向键切换）",
 	"chronology.zoomIn": "放大时间刻度",
@@ -353,6 +355,7 @@ var enus = {
 	"aria.autocomplete.search": "Search",
 	"aria.loading": "Loading",
 	"aria.modal.close": "Close dialog",
+	"chronology.noteToggle": ", show or hide sources",
 	"chronology.slideAnnounce": "Slide {index} of {total}: {date} {title}",
 	"chronology.eventsLabel": "Timeline events (use arrow keys)",
 	"chronology.zoomIn": "Zoom in the timeline",

package/lib/utils/prepareTimelineData.js

@@ -44,11 +44,50 @@ var prepareMedia = function prepareMedia(media) {
     link: undefined
   });
 };
+
+/* 「註」原本是 span，只能滑鼠 hover 顯示資料來源，鍵盤與報讀軟體讀不到（WCAG 2.1.1／1.4.13，2026-10-08 人工測試回饋）
+   → 改成按鈕（aria-expanded／aria-controls），開關由 syncTimelineA11y 處理 */
+var noteSeq = 0;
+var enhanceNotes = function enhanceNotes(html, toggleHint) {
+  if (typeof html !== 'string' || html.indexOf('remark') === -1 || typeof DOMParser === 'undefined') return html;
+  var doc = new DOMParser().parseFromString("<body>".concat(html, "</body>"), 'text/html');
+  var changed = false;
+  doc.body.querySelectorAll('.tooltip').forEach(function (tip) {
+    var remark = tip.querySelector('span.remark');
+    var text = tip.querySelector('.tooltiptext');
+    if (!remark || !text) return;
+    /* 資料來源是空的（後台沒填）：整個「註」不顯示，避免按下去只有「資料來源：」（2026-10-08） */
+    /* 主站的來源包在 .tooltipsources；子站直接寫「資料來源：…」→ 去掉開頭的標籤（到第一個「：」或「:」）再判斷 */
+    var sources = tip.querySelector('.tooltipsources');
+    var sourceText = sources ? sources.textContent : text.textContent.replace(/^[^：:]*[：:]/, '');
+    if (!sourceText.trim()) {
+      tip.remove();
+      changed = true;
+      return;
+    }
+    noteSeq += 1;
+    var id = "tl-note-".concat(noteSeq);
+    text.id = id;
+    var button = doc.createElement('button');
+    button.type = 'button';
+    button.className = remark.className;
+    button.textContent = remark.textContent;
+    button.setAttribute('aria-expanded', 'false');
+    button.setAttribute('aria-controls', id);
+    button.setAttribute('aria-label', "".concat(remark.textContent.trim()).concat(toggleHint));
+    remark.replaceWith(button);
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : html;
+};
 var prepareSlide = function prepareSlide(slide) {
   if (!slide) return slide;
+  var noteHint = getIntl().formatMessage({
+    id: 'chronology.noteToggle'
+  });
   var text = slide.text ? _objectSpread2(_objectSpread2({}, slide.text), {}, {
     headline: hint(slide.text.headline),
-    text: hint(slide.text.text)
+    text: enhanceNotes(hint(slide.text.text), noteHint)
   }) : slide.text;
   return _objectSpread2(_objectSpread2({}, slide), {}, {
     text: text,

package/lib/utils/syncTimelineA11y.js

@@ -14,6 +14,7 @@ var MENU_BUTTON_LABELS = [['.tl-icon-zoom-in', 'chronology.zoomIn'], ['.tl-icon-
  *  5. 下方時間刻度的事件標記：原本只能滑鼠點選。改為 tablist／tab（只有目前事件可 Tab 到），
  *     方向鍵／Home／End／PageUp／PageDown 換到對應事件
  *  6. 放大、縮小、回到第一張：原本是沒有名稱的 span，補 role="button"、tabindex、名稱，Enter／空白鍵可操作
+ *  9. 「註」按鈕：開關資料來源（aria-expanded），Esc 關閉、換頁收起
  *  8. Google 雲端硬碟預覽器 iframe：tabindex="-1"＋aria-hidden（見 prepareTimelineData 檔頭 GN1210200E）
  *  7. 套件在 document 上監聽左右鍵換頁（每建一次就多綁一個、從不移除），焦點在頁籤、搜尋框等時間軸外的元件時
  *     按左右鍵也會換投影片 → 只有焦點在這個時間軸的箭頭上才讓它生效
@@ -192,6 +193,34 @@ var syncTimelineA11y = function syncTimelineA11y(timeline, root) {
     setTimeout(syncMenuButtons, 0);
   };
 
+  /* 9. 「註」按鈕：點擊／Enter／空白鍵開關資料來源，Esc 關閉；換頁時全部收起 */
+  var closeNotes = function closeNotes(except) {
+    root.querySelectorAll('.tooltip.tooltip--open').forEach(function (tip) {
+      if (tip === except) return;
+      tip.classList.remove('tooltip--open');
+      var button = tip.querySelector('button.remark');
+      if (button) button.setAttribute('aria-expanded', 'false');
+    });
+  };
+  var onNoteClick = function onNoteClick(e) {
+    var button = e.target.closest && e.target.closest('.tooltip button.remark');
+    if (!button) return;
+    var tip = button.closest('.tooltip');
+    var open = !tip.classList.contains('tooltip--open');
+    closeNotes(tip);
+    tip.classList.toggle('tooltip--open', open);
+    button.setAttribute('aria-expanded', String(open));
+  };
+  var onNoteKeyDown = function onNoteKeyDown(e) {
+    if (e.key !== 'Escape') return;
+    var tip = e.target.closest && e.target.closest('.tooltip.tooltip--open');
+    if (!tip) return;
+    e.preventDefault();
+    closeNotes();
+    var button = tip.querySelector('button.remark');
+    if (button) button.focus();
+  };
+
   /* 7. 套件的全域左右鍵：焦點不在本時間軸的箭頭上就不換頁（時間刻度標記由 5. 自己處理） */
   var blockKeyNav = false;
   /* 套件每建一次時間軸就多綁一個 document 監聽器、從不移除；元件卸載或重建後，舊實例仍會被左右鍵觸發 →
@@ -225,6 +254,8 @@ var syncTimelineA11y = function syncTimelineA11y(timeline, root) {
   window.addEventListener('keydown', onKeyCapture, true);
   window.addEventListener('keydown', onKeyBubble);
   root.addEventListener('keydown', onMarkerKeyDown);
+  root.addEventListener('click', onNoteClick);
+  root.addEventListener('keydown', onNoteKeyDown);
   root.addEventListener('keydown', onMenuKeyDown);
   var timer;
   /* changed：只有真正換頁（change 事件）才播報，初次載入與重建不播 */
@@ -253,7 +284,8 @@ var syncTimelineA11y = function syncTimelineA11y(timeline, root) {
   };
   /* 投影片是套件非同步建出來的：建好（loaded）與每次換頁（change）都重新套用 */
   var onChange = function onChange() {
-    return apply(true);
+    closeNotes();
+    apply(true);
   };
   timeline.on('loaded', apply);
   timeline.on('change', onChange);
@@ -285,6 +317,8 @@ var syncTimelineA11y = function syncTimelineA11y(timeline, root) {
     window.removeEventListener('keydown', onKeyCapture, true);
     window.removeEventListener('keydown', onKeyBubble);
     root.removeEventListener('keydown', onMarkerKeyDown);
+    root.removeEventListener('click', onNoteClick);
+    root.removeEventListener('keydown', onNoteKeyDown);
     root.removeEventListener('keydown', onMenuKeyDown);
     if (live.parentNode) live.parentNode.removeChild(live);
   };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@daoyi/nmtl-ui",
 	"packageManager": "pnpm@10.34.5",
-	"version": "2.0.1-beta.140",
+	"version": "2.0.1-beta.142",
 	"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
 	"author": "daoyi",
 	"main": "lib/index.js",