Convert to `<ul>`s, `<li>`s, and all `<a>`s

visualizer/static/style.css

@@ -2,6 +2,10 @@
   box-sizing: border-box;
 }
 
+a {
+  cursor: pointer;
+}
+
 body {
   font-family: 'Verlag', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   margin: 0;
@@ -24,15 +28,20 @@ body.embedded #plotter {
   width: 100%;
 }
 
-#plotter-nav {
+#plotter-nav ul {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
+  margin: 0;
   padding: 8px;
 }
 
-#plotter-nav > a,
-#plotter-nav > span {
+#plotter-nav li {
+  display: block;
+}
+
+#plotter-nav a {
+  display: block;
   margin: 8px;
   padding: 7px;
   border: 1px solid black;
@@ -44,10 +53,12 @@ body.embedded #plotter {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
+  margin: 0;
   padding: 8px;
 }
 
-#selections > div {
+#selections li {
+  display: block;
   margin: 8px;
   width: 224px;
   max-width: 224px;

visualizer/templates/plotter.html

@@ -44,31 +44,33 @@
 {% endif %}
 <div id="plotter">
   <nav id="plotter-nav">
+    <ul>
       {% for plotter in g.plotters.values() %}
-      {% if plotter is sameas g.plotter %}
-    <span>{{ plotter.nav_title }}</span>
-      {% else %}
-    <a href="{{ url_for(endpoint, name=plotter.name) }}">
+        {% set current = plotter is sameas g.plotter %}
+      <li {%- if current %} class="current"{% endif %}>
+        <a href="{{ url_for(endpoint, name=plotter.name) }}"
+           {%- if current %} aria-current="page"{% endif %}>
           {{- plotter.nav_title -}}
         </a>
-      {% endif %}
+      </li>
       {% endfor %}
+    </ul>
   </nav>
 
   <form id="controls" method="get" action=""
         {#- #} onsubmit="{{ g.plotter.onsubmit_fn }}(); return false;">
-    <div id="selections">
+    <ul id="selections">
       {% for sel in g.plotter.selectors %}
-      <div>
+      <li>
         <label for="{{ sel.id }}">{{ sel.label }}</label>
         <select name="{{ sel.name }}" id="{{ sel.id }}" required
                 {{- macros.onchange(sel.onchange) }}>
           <option value="">Select {{ sel.label }}</option>
           {{ macros.options[sel.type](sel.get_param()) | trim }}
         </select>
-      </div>
+      </li>
       {% endfor %}
-    </div>
+    </ul>
     <input type="submit" value="Visualize">
   </form>