Replace abused `<a>`s with `<button>`s

visualizer/static/style.css

@@ -42,11 +42,18 @@ body.embedded #plotter {
   display: block;
 }
 
-#plotter-nav a {
+#plotter-nav a,
+#plotter-nav button {
+  background: none;
+  color: inherit;
+  cursor: pointer;
   display: block;
+  font-family: inherit;
+  font-size: 1rem;
   margin: 8px;
   padding: 7px;
   border: 1px solid black;
+  text-decoration: none;
   width: 256px;
   max-width: 256px;
 }

visualizer/static/visualizer.js

 // Don't allow opening other embed pages in a new tab.
 if (EMBEDDED) {
+  // Replace each nav hyperlink with a button.
   document.querySelectorAll('#plotter-nav a').forEach(a => {
     const href = a.getAttribute('href');
-    a.removeAttribute('href');
-    a.tabIndex = 0;
-    a.onclick = () => {
+    const button = document.createElement('button');
+    button.innerHTML = a.innerHTML;
+    const ARIA_CURRENT = 'aria-current';
+    if (a.hasAttribute(ARIA_CURRENT)) {
+      const ariaCurrent = a.getAttribute(ARIA_CURRENT);
+      button.setAttribute(ARIA_CURRENT, ariaCurrent);
+    }
+    button.onclick = () => {
       location = href;
     };
+    a.parentNode.replaceChild(button, a);
   });
 }
 // Set results of initial selections.