Some a11y imporvements

resources/assets/es6/mapbox-utils.js

@@ -11,6 +11,7 @@ const titlecase = (string) => {
 };
 
 const addMapTypeOption = (map, menu, option, checked = false) => {
+    let div = document.createElement('div');
     let input = document.createElement('input');
     input.setAttribute('id', option);
     input.setAttribute('type', 'radio');
@@ -41,12 +42,17 @@ const addMapTypeOption = (map, menu, option, checked = false) => {
     let label = document.createElement('label');
     label.setAttribute('for', option);
     label.appendChild(document.createTextNode(titlecase(option)));
-    menu.appendChild(input);
-    menu.appendChild(label);
+    div.appendChild(input);
+    div.appendChild(label);
+    menu.appendChild(div);
 };
 
 const makeMapMenu = (map) => {
-    let mapMenu = document.createElement('div');
+    let mapMenu = document.createElement('fieldset');
+    let legend = document.createElement('legend');
+    let title = document.createTextNode('Map Style');
+    legend.appendChild(title);
+    mapMenu.appendChild(legend);
     mapMenu.classList.add('map-menu');
     addMapTypeOption(map, mapMenu, 'streets', true);
     addMapTypeOption(map, mapMenu, 'satellite-streets');

resources/views/master.blade.php

@@ -45,14 +45,15 @@
 @section('bio')
 @show
 
-        @section('scripts')
         <!--scripts go here when needed-->
         <script src="/assets/js/colours.js" async defer></script>
+        <script src="/assets/js/a11y.js" async defer></script>
+        @section('scripts')
         @show
 
         <footer>
             <form action="search" method="get">
-                <input type="text" name="terms"><button type="submit">Search</button>
+                <input type="text" name="terms" title="Search"><button type="submit">Search</button>
             </form>
             @include('templates.colour-scheme')
             <p>The code for <code>{{ config('app.longurl') }}</code> can be found on <a href="https://github.com/jonnybarnes/jonnybarnes.uk">GitHub</a>.</p>
@@ -60,8 +61,6 @@
             <p>Built with love: <a href="/colophon">Colophon</a></p>
             <p><a href="https://indieweb.org"><img src="/assets/img/iwc.png" alt="Indie Web Camp logo" class="iwc-logo"></a></p>
         </footer>
-        <script src="/assets/js/colours.js" async defer></script>
-        <script src="/assets/js/a11y.js" async defer></script>
         @if (config('app.piwik') === true)
         <!-- Piwik -->
         <script src="https://analytics.jmb.lv/piwik.js" async defer></script>

resources/views/templates/colour-scheme.blade.php

@@ -1,4 +1,4 @@
-<form id="colourSchemeForm">
+<form id="colourSchemeForm" action="/update-colour-scheme">
     {{ csrf_field() }}
     <select id="colourSchemeSelect" name="css">
         <option value="base16-3024.css">base16-3024.css</option>