Merge pull request #1522 from CyC2018/site-a11y-print

Update website keyboard access and print styles

website/templates/site.css

@@ -117,3 +117,29 @@ body { color: #34495e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI
 
 /* 离线提示 */
 .markdown-section .offline-note { margin: 0 0 18px; padding: 8px 12px; border-radius: 6px; background: #eaf3ee; color: #34495e; font-size: 14px; }
+
+/* 键盘操作：焦点清晰可见；第一个可聚焦的是“跳到正文”，不用先按过侧边栏的上百个链接 */
+:focus-visible { outline: 2px solid var(--theme-color); outline-offset: 2px; border-radius: 3px; }
+.sidebar-toggle:focus-visible { outline: 2px solid var(--theme-color); outline-offset: -2px; }
+.skip-link { position: fixed; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--theme-color); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
+.skip-link:focus { top: 12px; }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
+
+/* 打印：只保留正文，占满纸张宽度 */
+@media print {
+  .sidebar, .sidebar-toggle, .github-corner, .anim-bar, .docsify-copy-code-button, .site-footer, .skip-link { display: none !important; }
+  .content { position: static; left: 0 !important; padding: 0; }
+  .markdown-section { max-width: none; padding: 0; }
+  .markdown-section pre, .markdown-section img { break-inside: avoid; }
+  .article-toc { display: none; }
+}
+
+/* 打印：去掉学习站的入口和题目提示，代码自动换行不被截断，标题不落在页尾 */
+@media print {
+  body, .markdown-section pre, .markdown-section code { background: #fff !important; }
+  .learn-q, .learn-callout, .learn-banner, .offline-note { display: none !important; }
+  .markdown-section pre, .markdown-section pre > code { white-space: pre-wrap !important; overflow-wrap: anywhere; }
+  .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4 { break-after: avoid; }
+  .markdown-section table { display: table; }
+  .markdown-section tr { break-inside: avoid; }
+}

website/templates/site.js

@@ -51,6 +51,27 @@
   if ('serviceWorker' in navigator && (location.protocol === 'https:' || location.hostname === '127.0.0.1' || location.hostname === 'localhost')) {
     window.addEventListener('load', function () { navigator.serviceWorker.register('/sw.js').catch(function () {}); });
   }
+  // Docsify 生成的目录按钮和 GitHub 角标是英文名称，读屏软件读成 Menu、View source on GitHub
+  function nameControls() {
+    var toggle = document.querySelector('.sidebar-toggle');
+    if (toggle) { toggle.setAttribute('aria-label', '打开或收起目录'); toggle.title = '目录'; }
+    var corner = document.querySelector('.github-corner');
+    if (corner) corner.setAttribute('aria-label', '在 GitHub 上查看源码');
+  }
+  function skipLink() {
+    if (document.querySelector('.skip-link')) return;
+    var skip = document.createElement('button');
+    skip.type = 'button';
+    skip.className = 'skip-link';
+    skip.textContent = '跳到正文';
+    skip.addEventListener('click', function () {
+      var section = document.querySelector('.markdown-section');
+      if (!section) return;
+      section.setAttribute('tabindex', '-1');
+      section.focus();
+    });
+    document.body.insertBefore(skip, document.body.firstChild);
+  }
   function preserveLegacyLinks() {
     var hash = location.hash;
     var legacy = (window.CS_NOTES_LEGACY_ROUTES || {})[decode(location.pathname)];
@@ -359,6 +380,8 @@
         return document.body.innerHTML + '<footer class="site-footer"><a href="https://github.com/CyC2018/CS-Notes" target="_blank" rel="noopener">CyC2018 · CS-Notes</a><span> · </span><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">粤ICP备19071404号-1</a></footer>';
       });
       hook.doneEach(function () {
+        nameControls();
+        skipLink();
         offlineNote(document.querySelector('.markdown-section'));
         var heading = document.querySelector('.markdown-section h1, .markdown-section h2');
         document.title = (vm.route.path === '/' || !heading ? 'CS-Notes' : heading.textContent.trim() + ' · CS-Notes') + ' · CyC2018';