@daoyi/nmtl-ui 2.0.1-beta.136 → 2.0.1-beta.138

package/lib/components/Breadcrumbs.js

@@ -51,7 +51,7 @@ BreadcrumbItem.propTypes = {
   onClick: PropTypes.func
 };
 
-var css_248z = ".breadcrumbs__link {\n  cursor: pointer;\n  text-decoration: none !important;\n}";
+var css_248z = "@charset \"UTF-8\";\n.breadcrumbs__link {\n  cursor: pointer;\n  text-decoration: none !important;\n  /* WCAG 2.4.7（2026-10-08 人工測試回饋）：連結內是 Typography span > div.breadcrumbItem（flex），\n     inline 的 <a> 自己沒有文字列，Chrome 的虛線焦點框沿空的行框畫，畫面上看不到。\n     改為 inline-flex，焦點框才會包住整個項目 */\n  display: inline-flex;\n}";
 styleInject(css_248z);
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -69,48 +69,61 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     var icon = _ref2.icon,
       text = _ref2.text,
       href = _ref2.href,
-      onClick = _ref2.onClick;
+      _onClick = _ref2.onClick;
     var lastLink = i === links.length - 1;
 
-    /* 尾巴＝目前所在頁：aria-current="page" 標在這裡（WCAG 4.1.2，數位部人工檢測 GN1410200E，2026-10-07） */
+    /* 尾巴＝目前所在頁：aria-current="page" 標在這裡（WCAG 4.1.2，數位部人工檢測 GN1410200E，2026-10-07）。
+       目前頁不是互動元件：不掛 onClick（原本滑鼠點得到、鍵盤卻聚焦不到，2026-10-08 人工測試回饋） */
     if (lastLink) return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: i.toString(),
       lastItem: true,
       current: true,
       icon: icon,
-      text: text,
-      onClick: onClick
+      text: text
     });
 
-    /* 頭、中間用 Link 而不是 NavLink：NavLink 沒加 exact 時，「首頁」的 /zh-tw/ 是所有網址的開頭，
+    /* 頭、中間有網址：用 Link 而不是 NavLink。NavLink 沒加 exact 時，「首頁」的 /zh-tw/ 是所有網址的開頭，
        會被自動標成 aria-current="page"＋active，讀屏誤報首頁為目前頁（GN1410200E） */
-    if (i === 0) {
+    if (href || i === 0 && !_onClick) {
       return /*#__PURE__*/React__default.createElement(Link, {
         className: "breadcrumbs__link",
         key: i.toString(),
         to: href || '/',
-        onClick: onClick
+        onClick: _onClick
       }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
         icon: icon,
         text: text
       }));
     }
 
-    /* 中間 */
-    return href ? /*#__PURE__*/React__default.createElement(Link, {
-      className: "breadcrumbs__link",
-      key: i.toString(),
-      to: href,
-      onClick: onClick
-    }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
-      icon: icon,
-      text: text
-    })) : /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+    /* 只有 onClick（程式導頁）：原本渲染成純文字，滑鼠點得到但鍵盤無法聚焦（WCAG 2.1.1，2026-10-08 人工測試回饋）。
+       作用是前往其他頁，語意是連結 → <a href="#">，可 Tab 聚焦、Enter 啟動，焦點框沿用各站 :focus-visible */
+    if (_onClick) {
+      return (
+        /*#__PURE__*/
+        /* 點下去確實會換頁（由呼叫端的 onClick 導頁），不是按鈕 */
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        React__default.createElement("a", {
+          className: "breadcrumbs__link",
+          key: i.toString(),
+          href: "#",
+          onClick: function onClick(e) {
+            e.preventDefault();
+            _onClick(e);
+          }
+        }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+          icon: icon,
+          text: text
+        }))
+      );
+    }
+
+    /* 中間沒有網址也沒有動作：純文字 */
+    return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: i.toString(),
       lastItem: true,
       icon: icon,
-      text: text,
-      onClick: onClick
+      text: text
     });
   }));
 };

package/lib/components/{ContactModal-19979528.js → ContactModal-af7fa280.js}

@@ -8,7 +8,7 @@ import '@material-ui/styles';
 import { u as useTheme } from './useTheme-98b6cf17.js';
 import './withTheme-3486f38b.js';
 import axios from 'axios';
-import { M as Modal } from './Modal-b984f381.js';
+import { M as Modal } from './Modal-aa77d4d8.js';
 import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { c as classNames } from './index-c33afcb5.js';
 import { Input, IconButton, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';

package/lib/components/ContactModal.js

@@ -1,4 +1,4 @@
-export { C as default } from './ContactModal-19979528.js';
+export { C as default } from './ContactModal-af7fa280.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
@@ -9,7 +9,7 @@ import '@material-ui/styles';
 import './useTheme-98b6cf17.js';
 import './withTheme-3486f38b.js';
 import 'axios';
-import './Modal-b984f381.js';
+import './Modal-aa77d4d8.js';
 import './index-c33afcb5.js';
 import '@material-ui/core';
 import '@material-ui/icons';

package/lib/components/Footer.js

@@ -3,7 +3,7 @@ import React__default, { useState, useEffect } from 'react';
 import { c as classNames } from './index-c33afcb5.js';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { C as ContactModal } from './ContactModal-19979528.js';
+import { C as ContactModal } from './ContactModal-af7fa280.js';
 import { S as Spin } from './Spin-07679812.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
@@ -13,7 +13,7 @@ import './defaultTheme-c5dd0f64.js';
 import '@material-ui/styles';
 import './useTheme-98b6cf17.js';
 import './withTheme-3486f38b.js';
-import './Modal-b984f381.js';
+import './Modal-aa77d4d8.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-8cf35bc0.js';

package/lib/components/Header.js

@@ -3,7 +3,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-c33afcb5.js';
 import { d as debounce_1 } from './debounce-127da66c.js';
-import { useHistory, useRouteMatch, NavLink } from 'react-router-dom';
+import { useHistory, useRouteMatch, useLocation, NavLink } from 'react-router-dom';
 import { Typography, IconButton } from '@material-ui/core';
 import { SearchOutlined } from '@material-ui/icons';
 import { K as KeywordSearch } from './KeywordSearch-4e621ded.js';
@@ -33,6 +33,7 @@ styleInject(css_248z);
 var showDarkModeSwitch = false;
 var Header = function Header(props) {
   var title = props.title,
+    siteName = props.siteName,
     logo = props.logo,
     locale = props.locale,
     supportLanguages = props.supportLanguages,
@@ -53,6 +54,33 @@ var Header = function Header(props) {
   var search = history.location.search;
   var _useRouteMatch = useRouteMatch(),
     url = _useRouteMatch.url;
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+
+  /* 首頁的 logo 不該念「回首頁」（2026-10-08 人工測試回饋）：在首頁時念「{站名}，目前在首頁」並標 aria-current，
+     其他頁念「{站名}，回首頁」。站名優先用 siteName（只供報讀、依語系），沒有才用畫面上的 title。
+     首頁：主站 /{locale}/main/home、子站 /{locale}/home，也含 / 與 /{locale} */
+  var isHome = new RegExp("^(/".concat(locale, ")?(/main)?(/home)?/?$")).test(pathname);
+  var logoName = siteName || title;
+  var intl = getIntl();
+  var logoLabel;
+  if (isHome) {
+    logoLabel = logoName ? intl.formatMessage({
+      id: 'aria.header.logoCurrentHomeWithTitle'
+    }, {
+      title: logoName
+    }) : intl.formatMessage({
+      id: 'aria.header.logoCurrentHome'
+    });
+  } else {
+    logoLabel = logoName ? intl.formatMessage({
+      id: 'aria.header.logoHomeWithTitle'
+    }, {
+      title: logoName
+    }) : intl.formatMessage({
+      id: 'aria.header.logoHome'
+    });
+  }
   // const { keyword } = queryString.parse(search);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -86,13 +114,11 @@ var Header = function Header(props) {
   }, /*#__PURE__*/React__default.createElement(NavLink, {
     to: "/".concat(locale, "/main/home"),
     className: "header__logo",
-    "aria-label": title ? getIntl().formatMessage({
-      id: 'aria.header.logoHomeWithTitle'
-    }, {
-      title: title
-    }) : getIntl().formatMessage({
-      id: 'aria.header.logoHome'
-    })
+    "aria-label": logoLabel
+    /* aria-current 由是否在首頁決定（子站首頁不是 /main/home，不能靠 NavLink 自動比對） */,
+    isActive: function isActive() {
+      return isHome;
+    }
   }, logo && /*#__PURE__*/React__default.createElement("div", {
     className: "header__logo__img"
   }, logo), !menuOpen && title && /*#__PURE__*/React__default.createElement(Typography, {
@@ -182,6 +208,7 @@ var Header = function Header(props) {
 Header.defaultProps = {
   className: undefined,
   title: undefined,
+  siteName: undefined,
   logo: undefined,
   locale: undefined,
   supportLanguages: defaultSupportLanguage,
@@ -202,6 +229,8 @@ Header.propTypes = {
   className: PropTypes.string,
   /** 標題(通常為網站名稱) */
   title: PropTypes.string,
+  /** 站名，只用於 logo 連結的可及名稱（依語系；不顯示在畫面上）。未提供時用 title */
+  siteName: PropTypes.string,
   /** 網站Logo */
   logo: PropTypes.node,
   /** 語系 */

package/lib/components/Keywords.js

@@ -2,7 +2,7 @@ import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-c33afcb5.js';
-import { M as Modal } from './Modal-b984f381.js';
+import { M as Modal } from './Modal-aa77d4d8.js';
 import { Typography } from '@material-ui/core';
 import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-370e163a.js';
 import { getIntl } from './globalConfig';

package/lib/components/{Modal-b984f381.js → Modal-aa77d4d8.js}

@@ -13,6 +13,28 @@ styleInject(css_248z);
 
 /* 每個 Modal 實例需要唯一 id，才能把標題和 role="dialog" 綁起來 */
 var modalSeq = 0;
+
+/* WCAG 2.4.3 對話框關閉後，焦點要回到開啟它的按鈕。MUI Dialog 會還給「開啟當下」的那個 DOM 元素，
+   但開啟期間若頁面資料才回來、版面重排，觸發按鈕會被換成新的元素（例：主站版本頁「我要補充資料」
+   依有無書影放在不同位置），舊元素已不在頁面上，焦點就掉回 body。
+   因此開啟時記下觸發元素的特徵，關閉後若舊元素已脫離頁面，找特徵相同且看得到的元素補還焦點。 */
+var describeTrigger = function describeTrigger(el) {
+  if (!el || el === document.body || el === document.documentElement) return null;
+  return {
+    el: el,
+    tag: el.tagName,
+    label: el.getAttribute('aria-label'),
+    text: (el.textContent || '').trim()
+  };
+};
+var findTrigger = function findTrigger(trigger) {
+  if (!trigger) return null;
+  if (trigger.el.isConnected) return trigger.el;
+  var candidates = Array.from(document.getElementsByTagName(trigger.tag));
+  return candidates.find(function (el) {
+    return el.offsetParent !== null && el.getAttribute('aria-label') === trigger.label && (el.textContent || '').trim() === trigger.text;
+  }) || null;
+};
 var Modal = function Modal(props) {
   var className = props.className,
     title = props.title,
@@ -40,6 +62,25 @@ var Modal = function Modal(props) {
     titleIdRef.current = "nmtl-modal-".concat(modalSeq, "-title");
   }
   var titleId = titleIdRef.current;
+
+  /* 在 render 階段（MUI 把焦點移進對話框之前）記下觸發元素 */
+  var triggerRef = useRef(null);
+  var wasVisibleRef = useRef(false);
+  if (visible && !wasVisibleRef.current && typeof document !== 'undefined') {
+    triggerRef.current = describeTrigger(document.activeElement);
+  }
+  wasVisibleRef.current = Boolean(visible);
+
+  /* onExited 觸發時對話框還沒卸載、焦點仍在對話框內；等下一輪卸載後再判斷焦點是否掉回 body */
+  var restoreFocus = function restoreFocus() {
+    setTimeout(function () {
+      var active = document.activeElement;
+      /* MUI 已成功還原（焦點不在 body）就不動 */
+      if (active && active !== document.body) return;
+      var target = findTrigger(triggerRef.current);
+      if (target) target.focus();
+    }, 0);
+  };
   return /*#__PURE__*/React__default.createElement(Dialog, {
     className: classNames('modal', {
       'modal--transparent': transparent
@@ -49,7 +90,10 @@ var Modal = function Modal(props) {
     onClose: function onClose() {
       return closable && onCancel();
     },
-    "aria-labelledby": title ? titleId : undefined
+    "aria-labelledby": title ? titleId : undefined,
+    TransitionProps: {
+      onExited: restoreFocus
+    }
   }, /*#__PURE__*/React__default.createElement(DialogTitle, {
     className: "modal__title"
   }, /*#__PURE__*/React__default.createElement("span", {

package/lib/components/Modal.js

@@ -1,4 +1,4 @@
-export { M as default } from './Modal-b984f381.js';
+export { M as default } from './Modal-aa77d4d8.js';
 import 'react';
 import './index-c33afcb5.js';
 import 'prop-types';

package/lib/components/globalConfig.js

@@ -64,6 +64,8 @@ var zhtw = {
 	"aria.header.menuClose": "關閉主選單",
 	"header.language": "語言",
 	"aria.breadcrumbs": "麵包屑",
+	"aria.header.logoCurrentHome": "目前在首頁",
+	"aria.header.logoCurrentHomeWithTitle": "{title}，目前在首頁",
 	"aria.header.logoHome": "回首頁",
 	"aria.header.logoHomeWithTitle": "{title}，回首頁",
 	"aria.header.navigation": "主選單",
@@ -71,8 +73,13 @@ var zhtw = {
 	"aria.autocomplete.search": "執行搜尋",
 	"aria.loading": "載入中",
 	"aria.modal.close": "關閉視窗",
-	"chronology.videoThumbnail": "{title}影片截圖",
-	"chronology.watchVideo": "觀看影片",
+	"chronology.slideAnnounce": "第 {index} 張，共 {total} 張：{date} {title}",
+	"chronology.eventsLabel": "大事年表事件（方向鍵切換）",
+	"chronology.zoomIn": "放大時間刻度",
+	"chronology.zoomOut": "縮小時間刻度",
+	"chronology.backToStart": "回到第一張",
+	"chronology.driveImage": "{title}相關圖片",
+	"chronology.openDriveFile": "在 Google 雲端硬碟檢視原始檔案",
 	"aria.newWindow": "（另開新視窗）",
 	"aria.vcode.image": "驗證碼圖片，如無法辨識可刷新驗證碼",
 	"aria.vcode.refresh": "刷新驗證碼",
@@ -196,6 +203,8 @@ var zhcn = {
 	"aria.header.menuClose": "关闭主选单",
 	"header.language": "语言",
 	"aria.breadcrumbs": "面包屑",
+	"aria.header.logoCurrentHome": "目前在首页",
+	"aria.header.logoCurrentHomeWithTitle": "{title}，目前在首页",
 	"aria.header.logoHome": "回首页",
 	"aria.header.logoHomeWithTitle": "{title}，回首页",
 	"aria.header.navigation": "主选单",
@@ -203,8 +212,13 @@ var zhcn = {
 	"aria.autocomplete.search": "执行搜寻",
 	"aria.loading": "载入中",
 	"aria.modal.close": "关闭视窗",
-	"chronology.videoThumbnail": "{title}影片截图",
-	"chronology.watchVideo": "观看影片",
+	"chronology.slideAnnounce": "第 {index} 张，共 {total} 张：{date} {title}",
+	"chronology.eventsLabel": "大事年表事件（方向键切换）",
+	"chronology.zoomIn": "放大时间刻度",
+	"chronology.zoomOut": "缩小时间刻度",
+	"chronology.backToStart": "回到第一张",
+	"chronology.driveImage": "{title}相关图片",
+	"chronology.openDriveFile": "在 Google 云端硬盘查看原始文件",
 	"aria.newWindow": "（另开新视窗）",
 	"aria.vcode.image": "验证码图片，如无法辨识可刷新验证码",
 	"aria.vcode.refresh": "刷新验证码",
@@ -330,6 +344,8 @@ var enus = {
 	"aria.header.menuClose": "Close main menu",
 	"header.language": "Language",
 	"aria.breadcrumbs": "Breadcrumb",
+	"aria.header.logoCurrentHome": "You are on the home page",
+	"aria.header.logoCurrentHomeWithTitle": "{title}, you are on the home page",
 	"aria.header.logoHome": "Back to home",
 	"aria.header.logoHomeWithTitle": "{title}, back to home",
 	"aria.header.navigation": "Main menu",
@@ -337,8 +353,13 @@ var enus = {
 	"aria.autocomplete.search": "Search",
 	"aria.loading": "Loading",
 	"aria.modal.close": "Close dialog",
-	"chronology.videoThumbnail": "Screenshot of the video: {title}",
-	"chronology.watchVideo": "Watch the video",
+	"chronology.slideAnnounce": "Slide {index} of {total}: {date} {title}",
+	"chronology.eventsLabel": "Timeline events (use arrow keys)",
+	"chronology.zoomIn": "Zoom in the timeline",
+	"chronology.zoomOut": "Zoom out the timeline",
+	"chronology.backToStart": "Back to the first slide",
+	"chronology.driveImage": "Image related to {title}",
+	"chronology.openDriveFile": "View the original file on Google Drive",
 	"aria.newWindow": " (opens in new window)",
 	"aria.vcode.image": "CAPTCHA image, refresh if unreadable",
 	"aria.vcode.refresh": "Refresh CAPTCHA",

package/lib/utils/prepareTimelineData.js

@@ -33,22 +33,24 @@ var prepareMedia = function prepareMedia(media, headline) {
     id = _match[1];
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
-  var alt = formatMessage({
-    id: 'chronology.videoThumbnail'
+  /* 雲端硬碟的檔案多半是圖片、少數是影片，無法從網址判斷 → 用詞不限定影片（2026-10-08 人工測試回饋）。
+     縮圖就是檔案內容本身：alt 優先用圖說（通常是圖片的說明與來源），沒有圖說才用「{標題}相關圖片」 */
+  var alt = stripTags(media.caption) || formatMessage({
+    id: 'chronology.driveImage'
   }, {
     title: stripTags(headline)
   });
-  var watch = "<a href=\"".concat(driveView(id), "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(formatMessage({
-    id: 'chronology.watchVideo'
+  var open = "<a href=\"".concat(driveView(id), "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(formatMessage({
+    id: 'chronology.openDriveFile'
   }), "<span class=\"").concat(TIMELINE_HINT_CLASS, "\">").concat(newWindowHintText(), "</span></a>");
   return _objectSpread2(_objectSpread2({}, media), {}, {
     url: driveThumbnail(id),
     thumbnail: driveThumbnail(id),
     alt: alt,
-    /* 套件沒有 title 時拿圖說當圖片 title，會變成「觀看影片…」，但圖片本身不是連結 */
+    /* 套件沒有 title 時拿圖說當圖片 title，會帶進連結文字，但圖片本身不是連結 */
     title: alt,
     /* 連結放在圖說，不包在圖片上：同一個目的地只留一個連結，文字也看得到 */
-    caption: [watch, hint(media.caption)].filter(Boolean).join('<br />'),
+    caption: [open, hint(media.caption)].filter(Boolean).join('<br />'),
     link: undefined
   });
 };

package/lib/utils/syncTimelineA11y.js

@@ -1,11 +1,23 @@
-import { n as newWindowHintText } from './newWindowHint-db113a69.js';
-import '../components/globalConfig';
+import { b as _slicedToArray } from './_rollupPluginBabelHelpers-9802e640.js';
+import { getIntl } from '../components/globalConfig';
 
-/*
- * TimelineJS 建立後的焦點與名稱整理（數位部人工檢測退回 2026-10-07，主站 nmtl-web 同步），回傳解除監聽的函式：
+/* 視覺隱藏的播報區（不依賴各站的 .visually-hidden） */
+var VISUALLY_HIDDEN = 'position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;';
+var MENU_BUTTON_LABELS = [['.tl-icon-zoom-in', 'chronology.zoomIn'], ['.tl-icon-zoom-out', 'chronology.zoomOut'], ['.tl-icon-goback', 'chronology.backToStart']];
+
+/**
+ * 建立後的鍵盤與報讀整理（數位部人工檢測退回 2026-10-07、人工測試回饋 2026-10-08；主站 nmtl-web timelineA11y.js 同步），回傳解除的函式：
  *  1. 只有目前這張投影片可以被 Tab 走到：其餘投影片加 inert
- *     （原本 Tab 會穿過所有畫面外的投影片；讀屏也不會讀到畫面外的內容）
- *  2. 箭頭的 aria-label 是套件用相鄰投影片標題組的，拿掉標題連結上的「（另開新視窗）」（箭頭本身不會另開）
+ *  2. 箭頭的 aria-label 拿掉標題連結上的「（另開新視窗）」（箭頭本身不會另開）
+ *  3. 焦點順序與畫面一致：上一張 → 投影片內容 → 下一張（套件 DOM 是 內容 → 下一張 → 上一張）
+ *  4. 換頁時以 aria-live 播報「第 x 張，共 y 張：年份 標題」（原本焦點留在箭頭上，報讀軟體聽不到換到哪一張）
+ *  5. 下方時間刻度的事件標記：原本只能滑鼠點選。改為 tablist／tab（只有目前事件可 Tab 到），
+ *     方向鍵／Home／End／PageUp／PageDown 換到對應事件
+ *  6. 放大、縮小、回到第一張：原本是沒有名稱的 span，補 role="button"、tabindex、名稱，Enter／空白鍵可操作
+ *  7. 套件在 document 上監聽左右鍵換頁（每建一次就多綁一個、從不移除），焦點在頁籤、搜尋框等時間軸外的元件時
+ *     按左右鍵也會換投影片 → 只有焦點在這個時間軸的箭頭上才讓它生效
+ * @param {object} timeline new Timeline(...) 的實例
+ * @param {HTMLElement} root 時間軸容器
  *
  * 用法：
  *   const timeline = new Timeline('timeline-embed', prepareTimelineData(data), options);
@@ -13,40 +25,251 @@ import '../components/globalConfig';
  */
 var syncTimelineA11y = function syncTimelineA11y(timeline, root) {
   if (!timeline || !root) return function () {};
-  var hint = newWindowHintText();
-  var syncInert = function syncInert() {
-    /* 剛載入時 Timeline 的 current_id 可能還是空的，退回讀 storyslider 的；
-       兩者都沒有就先不動，避免把畫面上的這張也設成 inert */
-    // eslint-disable-next-line no-underscore-dangle
-    var currentId = timeline.current_id || timeline._storyslider && timeline._storyslider.current_id;
-    if (!currentId) return;
+  var t = function t(id, values) {
+    return getIntl().formatMessage({
+      id: id
+    }, values);
+  };
+  var hint = t('aria.newWindow');
+  var text = function text(el) {
+    return el ? el.textContent.split(hint).join('').replace(/\s+/g, ' ').trim() : '';
+  };
+  // eslint-disable-next-line no-underscore-dangle
+  var currentIdOf = function currentIdOf() {
+    return timeline.current_id || timeline._storyslider && timeline._storyslider.current_id;
+  };
+  var slides = function slides() {
+    return Array.from(root.querySelectorAll('.tl-slide')).filter(function (s) {
+      return !s.classList.contains('tl-slide-titleslide');
+    });
+  };
+  var syncInert = function syncInert(currentId) {
     root.querySelectorAll('.tl-slide').forEach(function (slide) {
       if (slide.id === currentId) slide.removeAttribute('inert');else slide.setAttribute('inert', '');
     });
   };
   var syncNavLabels = function syncNavLabels() {
-    if (!hint) return;
     root.querySelectorAll('.tl-slidenav-previous, .tl-slidenav-next').forEach(function (nav) {
       var label = nav.getAttribute('aria-label');
       if (label && label.indexOf(hint) !== -1) nav.setAttribute('aria-label', label.split(hint).join(''));
+      /* 箭頭的預覽區（aria-hidden）會複製相鄰投影片的標題，標題裡的站內連結（span role="link" tabindex="0"）
+         跟著進來，變成「按鈕裡又一個可聚焦的連結」→ 移出 Tab 順序 */
+      var previewFocusables = nav.querySelectorAll('.tl-slidenav-content-container a, .tl-slidenav-content-container [tabindex]');
+      previewFocusables.forEach(function (el) {
+        return el.setAttribute('tabindex', '-1');
+      });
+    });
+  };
+  /* 3. 「上一張」移到投影片內容之前；兩個箭頭都是絕對定位，畫面不變 */
+  var orderNav = function orderNav() {
+    var prev = root.querySelector('.tl-slidenav-previous');
+    var mask = root.querySelector('.tl-slider-container-mask');
+    if (prev && mask && mask.parentNode === prev.parentNode && prev.nextElementSibling !== mask) {
+      mask.parentNode.insertBefore(prev, mask);
+    }
+  };
+
+  /* 4. 換頁播報：播報區放在時間軸容器外面（套件重建內容時會清掉容器內不認得的節點） */
+  var live = root.nextElementSibling && root.nextElementSibling.classList.contains('tl-a11y-live') ? root.nextElementSibling : null;
+  if (!live) {
+    live = document.createElement('div');
+    live.className = 'tl-a11y-live';
+    live.setAttribute('role', 'status');
+    live.setAttribute('aria-live', 'polite');
+    live.setAttribute('style', VISUALLY_HIDDEN);
+    root.parentNode.insertBefore(live, root.nextSibling);
+  }
+  /* 只在使用者剛操作過時間軸（按鍵、點擊）之後播報：套件初次載入也會觸發 change，不能一進頁面就念 */
+  var lastUserAction = 0;
+  var markUserAction = function markUserAction() {
+    lastUserAction = Date.now();
+  };
+  var announce = function announce(currentId) {
+    if (Date.now() - lastUserAction > 2000) return;
+    var list = slides();
+    var index = list.findIndex(function (s) {
+      return s.id === currentId;
+    });
+    if (index === -1) return;
+    var slide = list[index];
+    live.textContent = t('chronology.slideAnnounce', {
+      index: index + 1,
+      total: list.length,
+      date: text(slide.querySelector('.tl-headline-date')),
+      title: text(slide.querySelector('.tl-headline:not(.tl-headline-date)'))
+    });
+  };
+
+  /* 5. 時間刻度標記：tablist／tab */
+  var markerContainer = function markerContainer() {
+    return root.querySelector('.tl-timenav-item-container');
+  };
+  var markers = function markers() {
+    return Array.from(root.querySelectorAll('.tl-timemarker'));
+  };
+  var slideIdOf = function slideIdOf(marker) {
+    return marker.id.replace(/-marker$/, '');
+  };
+  var syncMarkers = function syncMarkers(currentId) {
+    var container = markerContainer();
+    if (!container) return;
+    container.setAttribute('role', 'tablist');
+    container.setAttribute('aria-label', t('chronology.eventsLabel'));
+    markers().forEach(function (marker) {
+      var slide = document.getElementById(slideIdOf(marker));
+      var selected = slideIdOf(marker) === currentId;
+      marker.setAttribute('role', 'tab');
+      marker.setAttribute('aria-selected', String(selected));
+      marker.setAttribute('aria-controls', slideIdOf(marker));
+      marker.setAttribute('tabindex', selected ? '0' : '-1');
+      var label = [text(slide && slide.querySelector('.tl-headline-date')), text(marker.querySelector('.tl-headline'))].filter(Boolean).join(' ');
+      if (label) marker.setAttribute('aria-label', label);
+      /* 標記內的標題常是連結：標記已是 tab，裡面的連結不再各自佔一個 Tab 停點 */
+      marker.querySelectorAll('a, button, [tabindex]').forEach(function (el) {
+        return el.setAttribute('tabindex', '-1');
+      });
+    });
+  };
+  var focusMarkerAfterChange = false;
+  var onMarkerKeyDown = function onMarkerKeyDown(e) {
+    var marker = e.target.closest && e.target.closest('.tl-timemarker');
+    if (!marker) return;
+    var list = markers();
+    var index = list.indexOf(marker);
+    var last = list.length - 1;
+    var target = {
+      ArrowRight: Math.min(index + 1, last),
+      ArrowLeft: Math.max(index - 1, 0),
+      Home: 0,
+      End: last,
+      PageDown: Math.min(index + 10, last),
+      PageUp: Math.max(index - 10, 0)
+    }[e.key];
+    if (target === undefined) return;
+    e.preventDefault();
+    if (target === index) return;
+    focusMarkerAfterChange = true;
+    timeline.goToId(slideIdOf(list[target]));
+  };
+
+  /* 6. 放大／縮小／回到第一張 */
+  var syncMenuButtons = function syncMenuButtons() {
+    MENU_BUTTON_LABELS.forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        iconSelector = _ref2[0],
+        id = _ref2[1];
+      var icon = root.querySelector(".tl-menubar-button ".concat(iconSelector));
+      var button = icon && icon.closest('.tl-menubar-button');
+      if (!button) return;
+      button.setAttribute('role', 'button');
+      button.tabIndex = 0;
+      button.setAttribute('aria-label', t(id));
+      button.setAttribute('aria-disabled', String(button.classList.contains('tl-menubar-button-inactive')));
+      icon.setAttribute('aria-hidden', 'true');
     });
   };
+  var onMenuKeyDown = function onMenuKeyDown(e) {
+    var button = e.target.closest && e.target.closest('.tl-menubar-button');
+    if (!button || e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    button.click();
+    setTimeout(syncMenuButtons, 0);
+  };
+
+  /* 7. 套件的全域左右鍵：焦點不在本時間軸的箭頭上就不換頁（時間刻度標記由 5. 自己處理） */
+  var blockKeyNav = false;
+  /* 套件每建一次時間軸就多綁一個 document 監聽器、從不移除；元件卸載或重建後，舊實例仍會被左右鍵觸發 →
+     解除時不還原 goToNext／goToPrev，而是讓舊實例永久停用 */
+  var disposed = false;
+  var onKeyCapture = function onKeyCapture(e) {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    var onArrow = root.contains(e.target) && e.target.closest('.tl-slidenav-previous, .tl-slidenav-next');
+    blockKeyNav = !onArrow;
+  };
+  var onKeyBubble = function onKeyBubble() {
+    blockKeyNav = false;
+  };
+  var originalNext = timeline.goToNext;
+  var originalPrev = timeline.goToPrev;
+  /* 套件的監聽器是匿名函式、拿不到也移除不了，只能在它呼叫的 goToNext／goToPrev 上把關 */
+  /* eslint-disable no-param-reassign */
+  timeline.goToNext = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return blockKeyNav || disposed ? undefined : originalNext.apply(timeline, args);
+  };
+  timeline.goToPrev = function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return blockKeyNav || disposed ? undefined : originalPrev.apply(timeline, args);
+  };
+  /* eslint-enable no-param-reassign */
+  window.addEventListener('keydown', onKeyCapture, true);
+  window.addEventListener('keydown', onKeyBubble);
+  root.addEventListener('keydown', onMarkerKeyDown);
+  root.addEventListener('keydown', onMenuKeyDown);
   var timer;
-  var apply = function apply() {
-    syncInert();
+  /* changed：只有真正換頁（change 事件）才播報，初次載入與重建不播 */
+  var apply = function apply(changed) {
+    orderNav();
+    syncMenuButtons();
+    var currentId = currentIdOf();
+    /* 剛載入時 current_id 可能還是空的：先不動 inert，避免把畫面上的這張也設成 inert */
+    if (currentId) {
+      syncInert(currentId);
+      syncMarkers(currentId);
+      if (changed === true) announce(currentId);
+      if (focusMarkerAfterChange) {
+        focusMarkerAfterChange = false;
+        var marker = document.getElementById("".concat(currentId, "-marker"));
+        if (marker) marker.focus({
+          preventScroll: true
+        });
+      }
+    }
     syncNavLabels();
     /* 套件在同一輪事件裡才更新箭頭標題，下一輪再整理一次 */
     clearTimeout(timer);
     timer = setTimeout(syncNavLabels, 0);
   };
   /* 投影片是套件非同步建出來的：建好（loaded）與每次換頁（change）都重新套用 */
+  var onChange = function onChange() {
+    return apply(true);
+  };
   timeline.on('loaded', apply);
-  timeline.on('change', apply);
+  timeline.on('change', onChange);
+  root.addEventListener('keydown', markUserAction, true);
+  root.addEventListener('click', markUserAction, true);
+  /* 套件是非同步分批建出投影片、時間刻度、工具列的（loaded 事件時工具列還沒建好）：
+     結構有變動就再整理一次（不播報）。自己做的 setAttribute 不會觸發 childList */
+  var frame;
+  var observer = new MutationObserver(function () {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(function () {
+      return apply(false);
+    });
+  });
+  observer.observe(root, {
+    childList: true,
+    subtree: true
+  });
   apply();
   return function () {
     clearTimeout(timer);
     timeline.off('loaded', apply);
-    timeline.off('change', apply);
+    timeline.off('change', onChange);
+    observer.disconnect();
+    cancelAnimationFrame(frame);
+    root.removeEventListener('keydown', markUserAction, true);
+    root.removeEventListener('click', markUserAction, true);
+    disposed = true;
+    window.removeEventListener('keydown', onKeyCapture, true);
+    window.removeEventListener('keydown', onKeyBubble);
+    root.removeEventListener('keydown', onMarkerKeyDown);
+    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.136",
+	"version": "2.0.1-beta.138",
 	"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",