fix(a11y): improve CCRD keyboard and dialog accessibility

Keyboard-operable dynamic controls, ARIA state, modal focus management, and live status semantics. Search/data contracts unchanged.

static/app.js

@@ -64,6 +64,8 @@ let initComplete = false;
 let snippetObserver = null;
 let snippetActive = 0;
 let previewController = null;
+let previewReturnFocus = null;
+let previewReturnFocusSelector = "";
 let keepalivePending = null;
 let lastKeepaliveAt = Date.now();
 const snippetQueue = [];
@@ -321,6 +323,7 @@ function setCachedSearch(key, value) {
 }
 
 function cacheDom() {
+  DOM.header = $("#header");
   DOM.headerTitle = $("#header-title");
   DOM.headerLogo = $("#header-logo");
   DOM.searchInput = $("#search-input");
@@ -336,6 +339,7 @@ function cacheDom() {
   DOM.sidebarTitle = $("#sidebar-title");
   DOM.sidebarContent = $("#sidebar-content");
   DOM.resultCount = $("#result-count");
+  DOM.statusBar = $("#status-bar");
   DOM.resultsContainer = $("#results-container");
   DOM.resultsList = $("#results-list");
   DOM.resultsLoading = $("#results-loading");
@@ -372,6 +376,7 @@ function cacheDom() {
   DOM.multiZipDownload = $("#multi-zip-download");
   DOM.multiSelectedCount = $("#multi-selected-count");
   DOM.randomBookBtn = $("#random-book-btn");
+  DOM.footer = $("#footer");
   DOM.overlay = $("#overlay");
   DOM.toast = $("#toast");
 }
@@ -542,10 +547,10 @@ function renderHistoryDropdown() {
     setHistoryDropdownOpen(false);
     return;
   }
-  DOM.searchHistoryDropdown.innerHTML = items.map((item) => `
-    <div class="history-item" data-query="${escapeHTML(item)}">
-      <span class="history-text">${escapeHTML(item)}</span>
-      <button type="button" class="history-del" data-del="${escapeHTML(item)}" aria-label="删除历史">×</button>
+   DOM.searchHistoryDropdown.innerHTML = items.map((item) => `
+    <div class="history-item">
+      <button type="button" class="history-select" data-query="${escapeHTML(item)}" aria-label="搜索历史：${escapeHTML(item)}"><span class="history-text">${escapeHTML(item)}</span></button>
+      <button type="button" class="history-del" data-del="${escapeHTML(item)}" aria-label="删除历史：${escapeHTML(item)}">×</button>
     </div>`).join("") + '<div class="history-footer"><button type="button" class="history-clear-all">清空历史</button></div>';
   setHistoryDropdownOpen(true);
 }
@@ -591,6 +596,7 @@ function applyMobileMode() {
   if (DOM.mobileToggleIcon) {
     DOM.mobileToggleIcon.className = STATE.isMobile ? "ui-icon ui-icon-phone" : "ui-icon ui-icon-desktop";
   }
+  DOM.mobileToggleBtn.setAttribute("aria-pressed", String(STATE.isMobile));
   if (DOM.sidebarExpandBtn) {
     DOM.sidebarExpandBtn.style.display = (!STATE.isMobile && STATE.source) ? "" : "none";
     if (STATE.isMobile) {
@@ -942,11 +948,11 @@ async function doSearch() {
 
 function resultPathHtml(item) {
   const sourceSeparator = (item.Folder || []).length ? '<span class="path-sep">/</span>' : "";
-  const sourcePrefix = `<span class="path-folder" data-source="${escapeHTML(item.Source)}" data-folder="">${highlightText(item.SourceName, STATE.query)}${sourceSeparator}</span>`;
+  const sourcePrefix = `<span class="path-folder" role="button" tabindex="0" data-source="${escapeHTML(item.Source)}" data-folder="" aria-label="按数据包筛选：${escapeHTML(item.SourceName)}">${highlightText(item.SourceName, STATE.query)}${sourceSeparator}</span>`;
   const rest = (item.Folder || []).map((part, index) => {
     const path = item.Folder.slice(0, index + 1).join("/");
     const separator = index < item.Folder.length - 1 ? '<span class="path-sep">/</span>' : "";
-    return `<span class="path-folder" data-source="${escapeHTML(item.Source)}" data-folder="${escapeHTML(path)}">${highlightText(part, STATE.query)}${separator}</span>`;
+    return `<span class="path-folder" role="button" tabindex="0" data-source="${escapeHTML(item.Source)}" data-folder="${escapeHTML(path)}" aria-label="按文件夹筛选：${escapeHTML(path)}">${highlightText(part, STATE.query)}${separator}</span>`;
   }).join("");
   return sourcePrefix + rest;
 }
@@ -960,8 +966,8 @@ function resultItemHtml(item) {
     : STATE.fulltext ? highlightText(item.snippet, STATE.query, snippetHighlights) : escapeHTML(item.snippet || "");
   const snippetHtml = `<div class="result-snippet" data-snippet-doc-id="${escapeHTML(item.doc_id)}" data-snippet-pending="${pendingSnippet ? "1" : "0"}">${snippet}</div>`;
   return `
-    <div class="result-item" data-doc-id="${escapeHTML(item.doc_id)}">
-      <input type="checkbox" class="result-checkbox" data-doc-id="${escapeHTML(item.doc_id)}" ${STATE.selectedIds.has(item.doc_id) ? "checked" : ""}>
+    <div class="result-item" role="listitem" data-doc-id="${escapeHTML(item.doc_id)}">
+      <input type="checkbox" class="result-checkbox" aria-label="选择文件：${escapeHTML(item.File)}" data-doc-id="${escapeHTML(item.doc_id)}" ${STATE.selectedIds.has(item.doc_id) ? "checked" : ""}>
       <div class="result-file-icon">${ICON_HTML.file}</div>
       <div class="result-info">
         <div class="result-title">${titleHtml}</div>
@@ -969,8 +975,8 @@ function resultItemHtml(item) {
         <div class="result-meta"><span class="result-size">${escapeHTML(formatSize(item.Size))}</span></div>
       </div>
       <div class="result-actions">
-        <button class="result-action-btn" data-action="preview" data-doc-id="${escapeHTML(item.doc_id)}">在线预览</button>
-        <a class="result-action-btn primary" href="/api/download/${encodeURIComponent(item.doc_id)}">下载</a>
+        <button class="result-action-btn" data-action="preview" data-doc-id="${escapeHTML(item.doc_id)}" aria-label="预览：${escapeHTML(item.File)}">在线预览</button>
+        <a class="result-action-btn primary" href="/api/download/${encodeURIComponent(item.doc_id)}" aria-label="下载：${escapeHTML(item.File)}">下载</a>
       </div>
       ${snippetHtml}
     </div>`;
@@ -1096,7 +1102,52 @@ async function loadExactSnippet(task) {
   task.node.innerHTML = highlightText(data.snippet || "", task.query, data.highlights || []);
 }
 
+function previewFocusableElements() {
+  if (!DOM.previewPanel || DOM.previewPanel.hidden) return [];
+  return Array.from(DOM.previewPanel.querySelectorAll("button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])"))
+    .filter((node) => !node.disabled && !node.hidden && node.getClientRects().length);
+}
+
+function setPreviewModalState(open) {
+  const background = [DOM.header, DOM.leftSidebar, DOM.rightSidebar, DOM.statusBar, DOM.resultsContainer, DOM.loadInfo, DOM.footer];
+  for (const node of background) {
+    if (!node) continue;
+    node.inert = open;
+    if (open) node.setAttribute("aria-hidden", "true");
+    else node.removeAttribute("aria-hidden");
+  }
+}
+
+function restorePreviewFocus() {
+  const node = previewReturnFocus;
+  const selector = previewReturnFocusSelector;
+  previewReturnFocus = null;
+  previewReturnFocusSelector = "";
+  requestAnimationFrame(() => {
+    const target = node && node.isConnected ? node : selector ? document.querySelector(selector) : null;
+    if (!target || target.inert) return;
+    target.focus({ preventScroll: true });
+  });
+}
+
+function clearPreviewDom() {
+  DOM.previewPanel.innerHTML = "";
+  DOM.previewPanel.hidden = true;
+  DOM.previewPanel.style.display = "none";
+  DOM.previewPanel.removeAttribute("aria-labelledby");
+  document.body.classList.remove("preview-open");
+  setPreviewModalState(false);
+  updateSidebarVisibility();
+  restorePreviewFocus();
+}
+
 async function openPreview(docId, keyword, options = {}) {
+  if (!STATE.previewDocId && !DOM.previewPanel.contains(document.activeElement)) {
+    previewReturnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (previewReturnFocus && previewReturnFocus.matches("[data-action='preview'][data-doc-id]")) {
+      previewReturnFocusSelector = `[data-action='preview'][data-doc-id="${CSS.escape(previewReturnFocus.dataset.docId)}"]`;
+    }
+  }
   if (options.sync !== false) {
     STATE.previewDocId = docId;
     syncUrl(history.state && history.state.preview === true);
@@ -1132,12 +1183,18 @@ async function openPreview(docId, keyword, options = {}) {
           <button type="button" class="icon-btn-sm preview-theme-btn" data-action="toggle-preview-theme" aria-label="${STATE.isDark ? "切换到白天模式" : "切换到黑夜模式"}" title="${STATE.isDark ? "白天模式" : "黑夜模式"}">${themeIcon(STATE.isDark)}</button>
         </div>
       </div>
-      <pre class="preview-body"></pre>`;
+       <pre class="preview-body"></pre>`;
+    const previewTitle = DOM.previewPanel.querySelector(".preview-title");
+    if (previewTitle) previewTitle.id = "preview-title";
+    DOM.previewPanel.setAttribute("aria-labelledby", "preview-title");
+    DOM.previewPanel.hidden = false;
     const previewBody = DOM.previewPanel.querySelector(".preview-body");
     if (shouldHighlight) previewBody.innerHTML = text;
     else previewBody.textContent = rawText;
     DOM.previewPanel.style.display = STATE.isMobile ? "flex" : "block";
     document.body.classList.add("preview-open");
+    setPreviewModalState(true);
+    requestAnimationFrame(() => DOM.previewPanel.querySelector("[data-action='close-preview']")?.focus({ preventScroll: true }));
     if (motionAllowed()) {
       DOM.previewPanel.classList.remove("preview-enter");
       void DOM.previewPanel.offsetWidth;
@@ -1175,18 +1232,14 @@ function closePreview() {
     return;
   }
   STATE.previewDocId = null;
-  DOM.previewPanel.innerHTML = "";
-  DOM.previewPanel.style.display = "none";
-  document.body.classList.remove("preview-open");
+  clearPreviewDom();
   observeResultSnippets();
   syncUrl();
 }
 
 function restorePreviewFromUrl(options = {}) {
   if (!STATE.previewDocId) {
-    DOM.previewPanel.innerHTML = "";
-    DOM.previewPanel.style.display = "none";
-    document.body.classList.remove("preview-open");
+    clearPreviewDom();
     return;
   }
   openPreview(STATE.previewDocId, STATE.query, { sync: false, scroll: options.scroll === true });
@@ -1386,6 +1439,7 @@ function refreshFolderTreeSelectionState() {
     const collapsed = !!STATE.folderCollapsed[path];
     toggle.classList.toggle("expanded", !collapsed);
     toggle.setAttribute("aria-label", collapsed ? "展开子文件夹" : "收起子文件夹");
+    toggle.setAttribute("aria-expanded", String(!collapsed));
     toggle.setAttribute("title", collapsed ? "展开" : "收起");
   });
 }
@@ -1491,7 +1545,7 @@ function renderFolderNodes(container, nodes, depth) {
     row.className = "filter-folder-item";
     row.dataset.folderPath = node.path;
     row.style.setProperty("--fdepth", itemDepth);
-    row.innerHTML = `${hasChildren ? `<button type="button" class="tree-toggle" data-folder-path="${escapeHTML(node.path)}" aria-label="展开子文件夹" title="展开"><span class="tree-toggle-glyph" aria-hidden="true"></span></button>` : '<span class="tree-toggle-placeholder"></span>'}<input type="checkbox" data-folder-path="${escapeHTML(node.path)}" value="${escapeHTML(node.path)}"><span class="folder-name">${escapeHTML(node.name)}</span><span class="folder-count">${(node.count || 0).toLocaleString()}</span>`;
+    row.innerHTML = `${hasChildren ? `<button type="button" class="tree-toggle" data-folder-path="${escapeHTML(node.path)}" aria-label="展开子文件夹：${escapeHTML(node.name)}" aria-expanded="false" title="展开"><span class="tree-toggle-glyph" aria-hidden="true"></span></button>` : '<span class="tree-toggle-placeholder"></span>'}<input type="checkbox" data-folder-path="${escapeHTML(node.path)}" value="${escapeHTML(node.path)}" aria-label="选择文件夹：${escapeHTML(node.name)}"><span class="folder-name">${escapeHTML(node.name)}</span><span class="folder-count">${(node.count || 0).toLocaleString()}</span>`;
     const toggle = row.querySelector(".tree-toggle");
     if (toggle) {
       toggle.addEventListener("click", (event) => {
@@ -1570,17 +1624,17 @@ function retrySidebar(source, path, routeId, requestSequence) {
 
 function renderSourceListSidebar(sources) {
   DOM.sidebarTitle.textContent = "数据包";
-  DOM.sidebarContent.innerHTML = (sources || []).map((source) => `<div class="repo-list-item" data-source="${escapeHTML(source.slug)}">${ICON_HTML.source}<span class="repo-name">${escapeHTML(source.name)}</span><span class="repo-count">${(source.count || 0).toLocaleString()}</span></div>`).join("");
+  DOM.sidebarContent.innerHTML = (sources || []).map((source) => `<button type="button" class="repo-list-item" data-source="${escapeHTML(source.slug)}" aria-label="打开数据包：${escapeHTML(source.name)}">${ICON_HTML.source}<span class="repo-name">${escapeHTML(source.name)}</span><span class="repo-count">${(source.count || 0).toLocaleString()}</span></button>`).join("");
 }
 
 function browserContentHTML(data, path, includeBreadcrumb) {
   const parts = path ? path.split("/") : [];
-  let html = '<div class="back-to-global" id="back-home">返回全局搜索</div>';
+  let html = '<button type="button" class="back-to-global" id="back-home">返回全局搜索</button>';
   if (includeBreadcrumb) {
-    html += `<div class="sidebar-breadcrumb"><span class="crumb-item" data-folder-nav="">根目录</span>${parts.map((part, index) => `<span class="crumb-sep">/</span><span class="crumb-item" data-folder-nav="${escapeHTML(parts.slice(0, index + 1).join("/"))}">${escapeHTML(part)}</span>`).join("")}</div>`;
+    html += `<div class="sidebar-breadcrumb" aria-label="文件夹路径"><button type="button" class="crumb-item" data-folder-nav="">根目录</button>${parts.map((part, index) => `<span class="crumb-sep" aria-hidden="true">/</span><button type="button" class="crumb-item" data-folder-nav="${escapeHTML(parts.slice(0, index + 1).join("/"))}">${escapeHTML(part)}</button>`).join("")}</div>`;
   }
-  html += (data.folders || []).map((item) => `<div class="browser-item" data-folder-open="${escapeHTML(item.path)}">${ICON_HTML.folder}<span class="browser-name">${escapeHTML(item.name)}</span><span class="browser-count">${(item.count || 0).toLocaleString()}</span></div>`).join("");
-  html += (data.files || []).map((item) => `<div class="browser-item" data-doc-id="${escapeHTML(item.doc_id)}">${ICON_HTML.file}<span class="browser-name">${escapeHTML(item.name)}.txt</span><span class="browser-size">${escapeHTML(formatSize(item.size))}</span></div>`).join("");
+  html += (data.folders || []).map((item) => `<button type="button" class="browser-item" data-folder-open="${escapeHTML(item.path)}" aria-label="打开文件夹：${escapeHTML(item.name)}">${ICON_HTML.folder}<span class="browser-name">${escapeHTML(item.name)}</span><span class="browser-count">${(item.count || 0).toLocaleString()}</span></button>`).join("");
+  html += (data.files || []).map((item) => `<button type="button" class="browser-item" data-doc-id="${escapeHTML(item.doc_id)}" aria-label="预览文件：${escapeHTML(item.name)}.txt">${ICON_HTML.file}<span class="browser-name">${escapeHTML(item.name)}.txt</span><span class="browser-size">${escapeHTML(formatSize(item.size))}</span></button>`).join("");
   return html;
 }
 
@@ -1649,12 +1703,26 @@ async function openFolder(path, routeId = routeRenderId) {
 }
 
 function updateSidebarVisibility() {
+  const modalOpen = Boolean(STATE.previewDocId && DOM.previewPanel && !DOM.previewPanel.hidden);
   DOM.leftSidebar.classList.toggle("collapsed", !STATE.leftSidebarOpen);
   DOM.rightSidebar.classList.toggle("collapsed", !STATE.rightSidebarOpen);
   DOM.leftSidebar.classList.toggle("open", STATE.leftSidebarOpen);
   DOM.rightSidebar.classList.toggle("open", STATE.rightSidebarOpen);
   DOM.overlay.style.display = "";
   DOM.overlay.classList.toggle("open", STATE.isMobile && (STATE.leftSidebarOpen || STATE.rightSidebarOpen));
+  DOM.hamburgerBtn.setAttribute("aria-expanded", String(STATE.leftSidebarOpen));
+  DOM.hamburgerBtn.setAttribute("aria-label", STATE.leftSidebarOpen ? "关闭数据包导航" : "打开数据包导航");
+  DOM.settingsBtn.setAttribute("aria-expanded", String(STATE.rightSidebarOpen));
+  DOM.settingsBtn.setAttribute("aria-label", STATE.rightSidebarOpen ? "关闭搜索过滤" : "打开搜索过滤");
+  DOM.leftSidebar.setAttribute("aria-hidden", String(!STATE.leftSidebarOpen || modalOpen));
+  DOM.rightSidebar.setAttribute("aria-hidden", String(!STATE.rightSidebarOpen || modalOpen));
+  DOM.leftSidebar.inert = !STATE.leftSidebarOpen || modalOpen;
+  DOM.rightSidebar.inert = !STATE.rightSidebarOpen || modalOpen;
+  if (DOM.sidebarExpandBtn) {
+    const expanded = DOM.leftSidebar.classList.contains("expanded-wide");
+    DOM.sidebarExpandBtn.setAttribute("aria-expanded", String(expanded));
+    DOM.sidebarExpandBtn.setAttribute("aria-label", expanded ? "收起数据包导航" : "展开数据包导航");
+  }
 }
 
 function recoverSidebarState() {
@@ -1746,11 +1814,13 @@ function attachEvents() {
     if (STATE.isMobile && STATE.leftSidebarOpen) STATE.rightSidebarOpen = false;
     updateSidebarVisibility();
     syncUrl();
+    if (!STATE.leftSidebarOpen) DOM.hamburgerBtn.focus({ preventScroll: true });
   });
   if (DOM.sidebarExpandBtn) {
     DOM.sidebarExpandBtn.addEventListener("click", () => {
       DOM.leftSidebar.classList.toggle("expanded-wide");
       DOM.sidebarExpandBtn.textContent = DOM.leftSidebar.classList.contains("expanded-wide") ? "→" : "↔";
+      DOM.sidebarExpandBtn.setAttribute("aria-expanded", String(DOM.leftSidebar.classList.contains("expanded-wide")));
       syncUrl();
     });
   }
@@ -1759,11 +1829,13 @@ function attachEvents() {
     if (STATE.isMobile && STATE.rightSidebarOpen) STATE.leftSidebarOpen = false;
     updateSidebarVisibility();
     syncUrl();
+    if (!STATE.rightSidebarOpen) DOM.settingsBtn.focus({ preventScroll: true });
   });
   DOM.closeFiltersBtn.addEventListener("click", () => {
     STATE.rightSidebarOpen = false;
     updateSidebarVisibility();
     syncUrl();
+    DOM.settingsBtn.focus({ preventScroll: true });
   });
   DOM.overlay.addEventListener("click", () => {
     STATE.leftSidebarOpen = false;
@@ -1778,6 +1850,7 @@ function attachEvents() {
     localStorage.setItem("mobileMode", STATE.isMobile ? "mobile" : "desktop");
     applyUiUrlState();
     updateSidebarVisibility();
+    DOM.mobileToggleBtn.setAttribute("aria-pressed", String(STATE.isMobile));
     syncUrl();
   });
   let historyDropdownActive = false;
@@ -2027,6 +2100,12 @@ function attachEvents() {
       doSearch();
     }
   });
+  DOM.resultsList.addEventListener("keydown", (event) => {
+    const folder = event.target.closest(".path-folder[role='button']");
+    if (!folder || (event.key !== "Enter" && event.key !== " ")) return;
+    event.preventDefault();
+    folder.click();
+  });
   DOM.sidebarContent.addEventListener("click", async (event) => {
     const sourceItem = event.target.closest("[data-source]");
     if (sourceItem) {
@@ -2083,12 +2162,38 @@ function attachEvents() {
     if (event.target.closest("[data-action='toggle-preview-theme']")) toggleTheme();
   });
   document.addEventListener("keydown", (event) => {
+    if (STATE.previewDocId && !DOM.previewPanel.hidden && DOM.previewPanel.style.display !== "none") {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closePreview();
+        return;
+      }
+      if (event.key === "Tab") {
+        const focusable = previewFocusableElements();
+        if (!focusable.length) {
+          event.preventDefault();
+          DOM.previewPanel.focus({ preventScroll: true });
+          return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+        return;
+      }
+      return;
+    }
     if (event.key === "Escape") {
       setHistoryDropdownOpen(false);
-      if (STATE.previewDocId) closePreview();
       STATE.leftSidebarOpen = false;
       STATE.rightSidebarOpen = false;
       updateSidebarVisibility();
+      DOM.hamburgerBtn.focus({ preventScroll: true });
       return;
     }
     if (event.key === "/" && document.activeElement !== DOM.searchInput) {
@@ -2110,9 +2215,7 @@ function attachEvents() {
       if (nextPreviewDocId) {
         restorePreviewFromUrl({ scroll: false });
       } else {
-        DOM.previewPanel.innerHTML = "";
-        DOM.previewPanel.style.display = "none";
-        document.body.classList.remove("preview-open");
+        clearPreviewDom();
       }
       return;
     }

static/index.html

@@ -16,7 +16,7 @@
 
 <header id="header">
   <div class="header-left">
-    <button id="hamburger-btn" class="icon-btn" aria-label="菜单"><span class="ui-icon ui-icon-menu" aria-hidden="true"></span></button>
+    <button id="hamburger-btn" class="icon-btn" aria-label="打开数据包导航" aria-controls="left-sidebar" aria-expanded="true"><span class="ui-icon ui-icon-menu" aria-hidden="true"></span></button>
     <a id="header-logo" class="header-logo" href="https://huggingface.co/VOMEBOOK" title="VOMEBOOK">
       <span id="header-title">VOMEBOOK</span>
     </a>
@@ -24,22 +24,22 @@
   <div class="header-center">
     <div class="search-box">
       <span class="search-icon"><span class="ui-icon ui-icon-search" aria-hidden="true"></span></span>
-      <input type="search" id="search-input" class="search-input" placeholder="全文搜索 TXT 正文..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+      <input type="search" id="search-input" class="search-input" aria-label="搜索 TXT 文件和正文" placeholder="全文搜索 TXT 正文..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
       <kbd class="search-kbd">/</kbd>
-      <div id="search-history-dropdown" class="search-history-dropdown" style="display:none"></div>
+      <div id="search-history-dropdown" class="search-history-dropdown" role="region" aria-label="搜索历史" style="display:none"></div>
     </div>
   </div>
   <div class="header-right">
-    <button id="settings-btn" class="icon-btn" aria-label="搜索设置"><span class="ui-icon ui-icon-sliders" aria-hidden="true"></span></button>
-    <button id="mobile-toggle-btn" class="icon-btn" aria-label="切换手机或电脑模式" title="手机/电脑模式切换"><span id="mobile-toggle-icon" class="ui-icon ui-icon-devices" aria-hidden="true"></span></button>
+    <button id="settings-btn" class="icon-btn" aria-label="打开搜索过滤" aria-controls="right-sidebar" aria-expanded="false"><span class="ui-icon ui-icon-sliders" aria-hidden="true"></span></button>
+    <button id="mobile-toggle-btn" class="icon-btn" aria-label="切换手机或电脑模式" aria-pressed="false" title="手机/电脑模式切换"><span id="mobile-toggle-icon" class="ui-icon ui-icon-devices" aria-hidden="true"></span></button>
     <button id="theme-btn" class="icon-btn" aria-label="切换到白天模式" title="白天模式"><svg class="theme-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 15.5A8 8 0 1 1 8.5 4 6.5 6.5 0 0 0 20 15.5Z"/></svg></button>
   </div>
 
 </header>
 <div id="app-body" class="app-body">
 
-  <aside id="left-sidebar" class="sidebar left-sidebar">
-    <div class="sidebar-header"><span id="sidebar-title">数据包</span><button id="sidebar-expand-btn" class="icon-btn-sm" title="展开/收起侧边栏" style="display:none">↔</button></div>
+  <aside id="left-sidebar" class="sidebar left-sidebar" aria-labelledby="sidebar-title">
+    <div class="sidebar-header"><span id="sidebar-title">数据包</span><button id="sidebar-expand-btn" class="icon-btn-sm" aria-label="展开数据包导航" aria-expanded="false" title="展开/收起侧边栏" style="display:none">↔</button></div>
     <div id="sidebar-content" class="sidebar-content"><div class="sidebar-loading">加载中...</div></div>
 
   </aside>
@@ -47,14 +47,14 @@
   <main id="main-content" class="main-content">
     <div id="status-bar" class="status-bar">
       <div class="status-left">
-        <span id="result-count" class="result-count"></span>
+        <span id="result-count" class="result-count" role="status"></span>
         <label class="multi-toggle" id="multi-toggle-label" style="display:none"><input type="checkbox" id="multi-select-toggle"><span>多选</span></label>
       </div>
       <div class="status-right">
         <button id="clear-filters-btn" class="text-btn" style="display:none">清空筛选</button>
         <div class="sort-group">
           <span class="sort-label">排序:</span>
-          <select id="sort-select" class="sort-select">
+          <select id="sort-select" class="sort-select" aria-label="排序方式">
             <option value="relevance">相关度</option>
             <option value="name">文件名</option>
             <option value="size">文件大小</option>
@@ -69,8 +69,8 @@
       <button id="multi-zip-download" class="multi-action-btn primary">合并下载</button>
       <span id="multi-selected-count" class="multi-selected-count"></span>
     </div>
-    <div id="results-container" class="results-container" aria-busy="false">
-      <div id="results-list" class="results-list"></div>
+    <div id="results-container" class="results-container" aria-busy="false" role="region" aria-label="搜索结果">
+      <div id="results-list" class="results-list" role="list"></div>
       <div id="results-loading" class="loading-spinner" style="display:none"><div class="spinner"></div></div>
       <div id="empty-state" class="empty-state" style="display:none">
         <div class="empty-title">没有找到结果</div>
@@ -78,13 +78,13 @@
         <button id="empty-random-btn" class="random-big-btn">随机来一篇</button>
       </div>
     </div>
-    <div id="load-info" class="load-info" style="display:none">已加载 <span id="loaded-count">0</span> / <span id="total-count">0</span> 条</div>
-    <div id="preview-panel" class="preview-panel" style="display:none"></div>
+    <div id="load-info" class="load-info" role="status" aria-live="polite" aria-atomic="true" style="display:none">已加载 <span id="loaded-count">0</span> / <span id="total-count">0</span> 条</div>
+    <div id="preview-panel" class="preview-panel" role="dialog" aria-modal="true" aria-label="文件预览" tabindex="-1" hidden style="display:none"></div>
 
   </main>
 
-  <aside id="right-sidebar" class="sidebar right-sidebar">
-    <div class="sidebar-header"><span>搜索过滤</span><button id="close-filters-btn" class="icon-btn-sm" aria-label="关闭过滤">×</button></div>
+  <aside id="right-sidebar" class="sidebar right-sidebar" aria-label="搜索过滤">
+    <div class="sidebar-header"><span>搜索过滤</span><button id="close-filters-btn" class="icon-btn-sm" aria-label="关闭搜索过滤">×</button></div>
     <div class="sidebar-content">
       <div class="filter-section" id="fulltext-toggle-section">
         <label class="toggle-row">
@@ -125,11 +125,11 @@
       <div class="filter-section">
         <div class="filter-section-title">文件大小</div>
         <div class="filter-size-row">
-          <input type="number" id="filter-min-size" class="size-input" placeholder="最小" min="0" step="0.1">
-          <select id="filter-min-unit" class="size-unit"><option value="B">B</option><option value="KB">KB</option><option value="MB" selected>MB</option><option value="GB">GB</option></select>
+          <input type="number" id="filter-min-size" class="size-input" aria-label="最小文件大小" placeholder="最小" min="0" step="0.1">
+          <select id="filter-min-unit" class="size-unit" aria-label="最小文件大小单位"><option value="B">B</option><option value="KB">KB</option><option value="MB" selected>MB</option><option value="GB">GB</option></select>
           <span class="size-sep">—</span>
-          <input type="number" id="filter-max-size" class="size-input" placeholder="最大" min="0" step="0.1">
-          <select id="filter-max-unit" class="size-unit"><option value="B">B</option><option value="KB">KB</option><option value="MB" selected>MB</option><option value="GB">GB</option></select>
+          <input type="number" id="filter-max-size" class="size-input" aria-label="最大文件大小" placeholder="最大" min="0" step="0.1">
+          <select id="filter-max-unit" class="size-unit" aria-label="最大文件大小单位"><option value="B">B</option><option value="KB">KB</option><option value="MB" selected>MB</option><option value="GB">GB</option></select>
         </div>
       </div>
     </div>
@@ -137,7 +137,7 @@
   </aside>
 </div>
 
-<footer class="footer">
+<footer id="footer" class="footer">
   <div class="hitokoto"></div>
   <button id="random-book-btn" class="random-book-btn" title="随机来一篇">
     <span class="ui-icon ui-icon-book" aria-hidden="true"></span>

static/style.css

@@ -321,12 +321,23 @@ ul, li {
 }
 
 .search-history-dropdown .history-text {
-  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.search-history-dropdown .history-select {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  overflow: hidden;
+}
+
 .search-history-dropdown .history-del {
   flex-shrink: 0;
   width: 22px;
@@ -713,6 +724,10 @@ body.preview-open #preview-panel .preview-header {
 }
 
 .sidebar-breadcrumb .crumb-item {
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
   color: var(--primary);
   cursor: pointer;
   padding: 2px 4px;
@@ -743,6 +758,11 @@ body.preview-open #preview-panel .preview-header {
 }
 
 .back-to-global {
+  width: 100%;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -767,6 +787,11 @@ body.preview-open #preview-panel .preview-header {
 }
 
 .browser-item {
+  width: 100%;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -853,6 +878,11 @@ body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
 }
 
 .repo-list-item {
+  width: 100%;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1313,6 +1343,14 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
 }
 
 .result-path .path-folder {
+  display: inline;
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
   color: var(--secondary);
   transition: color var(--transition);