(docs) make demo page more keyboard accessible (highlightjs#3371)

Author: Hirse

demo/demo.js

@@ -1,8 +1,10 @@
 hljs.debugMode();
 hljs.highlightAll();
 
-document.querySelectorAll(".categories > li").forEach((category) => {
+document.querySelectorAll(".categories li a").forEach((category) => {
   category.addEventListener("click", (event) => {
+    event.preventDefault();
+
     const current = document.querySelector(".categories .current");
     const currentCategory = current.dataset.category;
     const nextCategory = event.target.dataset.category;
@@ -23,15 +25,21 @@ document.querySelectorAll(".categories > li").forEach((category) => {
   });
 });
 
-document.querySelectorAll(".styles > li").forEach((style) => {
+document.querySelectorAll(".styles li a").forEach((style) => {
   style.addEventListener("click", (event) => {
+    event.preventDefault();
+
     const current = document.querySelector(".styles .current");
     const currentStyle = current.textContent;
     const nextStyle = event.target.textContent;
 
     if (currentStyle !== nextStyle) {
-      document.querySelector(`link[title="${nextStyle}"]`).removeAttribute("disabled");
-      document.querySelector(`link[title="${currentStyle}"]`).setAttribute("disabled", "disabled");
+      document
+        .querySelector(`link[title="${nextStyle}"]`)
+        .removeAttribute("disabled");
+      document
+        .querySelector(`link[title="${currentStyle}"]`)
+        .setAttribute("disabled", "disabled");
 
       current.classList.remove("current");
       event.target.classList.add("current");

demo/index.html

@@ -23,14 +23,14 @@ <h1><a href="https://highlightjs.org">highlight.js</a> demo</h1>
     <h2>Language Categories</h2>
     <ul class="categories">
       <% categories.forEach(({category, count}, i) => {%>
-      <li <%= i ? '' : 'class="current"'%> data-category="<%= category %>"><%= `${category} (${count})` %></li>
+      <li><a <%= i ? '' : 'class="current"'%> data-category="<%= category %>" href="#<%= category %>"><%= `${category} (${count})` %></a></li>
       <% }); %>
     </ul>
     <h2>Themes</h2>
     <ul class="styles">
-      <li class="current">Default</li>
+      <li><a class="current" href="#default">Default</a></li>
       <% styles.forEach(({name}) => {%>
-      <li><%= name %></li>
+      <li><a href="#<%= name %>"><%= name %></a></li>
       <% }); %>
     </ul>
   </aside>

demo/style.css

@@ -102,16 +102,19 @@ aside ul::-webkit-scrollbar-thumb:active {
   background: #5d3333;
 }
 
-aside li {
-  padding: 1px 1em;
-  cursor: pointer;
+aside ul a {
+  display: block;
+  padding: 1px 0.5em 1px 1em;
+  text-decoration: none;
 }
 
-aside li:hover {
+aside ul a:focus,
+aside ul a:hover {
   background: #500;
+  outline: none;
 }
 
-aside li.current:before {
+aside ul a.current:before {
   content: "▶";
   font-size: smaller;
   position: absolute;