Fix a few minor accessibility issues with examples (maplibre#4205)

coliff · web-flow · commit aa435b6f8aed · 2024-05-30T15:50:08.000Z
- Link labels to inputs
- Add missing title and viewport to GL Stats page
diff --git a/test/bench/gl-stats.html b/test/bench/gl-stats.html
@@ -2,7 +2,9 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" href="about:blank">
+<title>GL Stats</title>
 <script>
 // stub performance.now for deterministic rendering per-frame;
 // we'll later increment the value by 16 on every frame (16ms per frame for 60fps)
diff --git a/test/examples/filter-within-layer.html b/test/examples/filter-within-layer.html
@@ -95,7 +95,8 @@
 
             <fieldset>
                 <legend>🌊 Tsunami (0 or 1)</legend>
-                <input id="tsunami" type="checkbox" /> <label>Apply <code>tsunami</code> filter</label>
+                <input id="tsunami" type="checkbox" />
+                <label for="tsunami">Apply <code>tsunami</code> filter</label>
                 <div id="radio-tsunamis">
                     <input type="radio" id="t0" name="tsunami" value="0" /><label>0</label>
                     <input type="radio" id="t1" name="tsunami" value="1" /><label>1</label>
diff --git a/test/examples/timeline-animation.html b/test/examples/timeline-animation.html
@@ -58,7 +58,7 @@
 <div class="map-overlay top">
     <div class="map-overlay-inner">
         <h2>Significant earthquakes in 2015</h2>
-        <label id="month"></label>
+        <label id="month" for="slider"></label>
         <input id="slider" type="range" min="0" max="11" step="1" value="0" />
     </div>
     <div class="map-overlay-inner">
