Merge pull request #15 from wshito/accessibility

added the page navigation shortcuts and the accessibility labels #14

README.md

@@ -8,6 +8,7 @@ Generates chunked (multi-page) HTML from Asciidoctor's single HTML file with the
 
 ## News
 
+- 2021/8/3 [Ver 1.0.4](https://github.com/wshito/asciidoctor-chunker/releases) Added the keyboard shotcuts for the page navigation with arrow keys.  Added the accessibility labels on the page navigation for screen readers.
 - 2021/6/25 [Ver 1.0.3](https://github.com/wshito/asciidoctor-chunker/releases) Fixed the security vulnerabilities in the dependencies.
 - 2021/5/9 [Ver 1.0.2](https://github.com/wshito/asciidoctor-chunker/releases) The toc item for the titlepage can be configured with `--titlePage` option (thanks to [@johnthad](https://github.com/johnthad)).
 - 2021/3/17 [Ver 1.0.1](https://github.com/wshito/asciidoctor-chunker/releases) The script contains shebang and can be invoked directly.  Published on [npm](https://www.npmjs.com/package/asciidoctor-chunker).  You can install via npm.  See [Installation](#installation).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "asciidoctor-chunker",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Creates chunked (multi-page) HTML from Asciidoctor's single HTML file with supporting the fine-tuned splits in chapters, sections and any depth of subsections.",
   "author": "Wataru Shito (https://github.com/wshito)",
   "bin": {

src/DOM.mjs

@@ -650,11 +650,15 @@ const createNav = (prev, next) => `
 <nav>
   ${prev ?
     `<a rel="prev" href="${prev}" class="nav nav-prev"
+        title="Previous page"
+        aria-label="Previous page"
         aria-keyshortcuts="Left">
         <i class="fa fa-angle-left"></i>
      </a>` : ''}
   ${next ?
     `<a rel="next" href="${next}" class="nav nav-next"
+        title="Next page"
+        aria-label="Next page"
         aria-keyshortcuts="Right">
         <i class="fa fa-angle-right"></i>
      </a>` : ''}
@@ -767,6 +771,25 @@ const insertScript = (rootNode) => {
       behavior: 'smooth'
     });
   }
+
+  /* For page navigation */
+  function gotoPage(selector) {
+    const button = document.querySelector(selector);
+    if (button)
+      window.location.href = button.href;
+  }
+  document.addEventListener('keydown', e => {
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        gotoPage('.nav-next');
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        gotoPage('.nav-prev');
+        break;
+    }
+  });
   </script>
   `);
   return rootNode;