From 6f0b124e5bb0ca5735e7278f70d440648449c1a8 Mon Sep 17 00:00:00 2001
From: Jeff Epler <jepler@gmail.com>
Date: Sun, 6 Nov 2022 13:01:29 -0600
Subject: [PATCH] Designate labels for checkbox in filters

This means that the user can hit anywhere on the big target like
"Adafruit" instead of only being able to click the small checkbox. It
may also improve accessibility.

Additionally, the mouse cursor over the checkbox and its label is
changed to the "pointer" to indicate an action is available by clicking.
---
 assets/javascript/downloads.js | 20 +++++++++++++++++---
 assets/sass/base/_base.scss    |  4 ++++
 blinka.html                    | 14 +++++++-------
 downloads.html                 | 10 +++++-----
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/assets/javascript/downloads.js b/assets/javascript/downloads.js
index f8ad34e12..c8e036087 100644
--- a/assets/javascript/downloads.js
+++ b/assets/javascript/downloads.js
@@ -163,9 +163,13 @@ function setupManufacturers(downloads) {
     checkbox.name = "manufacturer";
     checkbox.className = 'filter-checkbox';
     checkbox.value = manufacturer;
+    checkbox.id = 'manufacturer-' + manufacturer;
 
     li.appendChild(checkbox);
-    li.appendChild(document.createTextNode(manufacturer));
+    var label = document.createElement('label');
+    label.htmlFor = checkbox.id;
+    label.innerText = manufacturer;
+    li.appendChild(label);
 
     manufacturerList.appendChild(li);
   });
@@ -196,9 +200,14 @@ function setupMcufamilies(downloads) {
       checkbox.name = "mcufamily";
       checkbox.className = 'filter-checkbox';
       checkbox.value = mcufamily;
+      checkbox.id = 'mcufamily-' + mcufamily;
 
       li.appendChild(checkbox);
-      li.appendChild(document.createTextNode(mcufamily));
+
+      var label = document.createElement('label');
+      label.htmlFor = checkbox.id;
+      label.innerText = mcufamily;
+      li.appendChild(label);
 
       mcufamilyList.appendChild(li);
     }
@@ -234,9 +243,14 @@ function setupFeatures(downloads) {
     checkbox.name = "feature";
     checkbox.className = 'filter-checkbox';
     checkbox.value = feature;
+    checkbox.id = 'feature-' + feature;
 
     li.appendChild(checkbox);
-    li.appendChild(document.createTextNode(feature));
+
+    var label = document.createElement('label');
+    label.htmlFor = checkbox.id;
+    label.innerText = feature;
+    li.appendChild(label);
 
     featureList.appendChild(li);
   });
diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss
index 796f5e210..e460b99d0 100644
--- a/assets/sass/base/_base.scss
+++ b/assets/sass/base/_base.scss
@@ -42,3 +42,7 @@ fieldset {
       font-weight: 500;
     }
 }
+
+input.filter-checkbox, label {
+    cursor: pointer;
+}
diff --git a/blinka.html b/blinka.html
index d87bc6c57..347ce2712 100644
--- a/blinka.html
+++ b/blinka.html
@@ -27,13 +27,13 @@ permalink: /blinka
       <button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
     </div>
     <div>
-      <div class="manufacturers">
+      <div class="manufacturers filter-tall">
         <fieldset>
           <legend>Manufacturers</legend>
           <ul class="content"></ul>
         </fieldset>
       </div>
-      <div class="features">
+      <div class="features filter-tall">
         <fieldset>
           <legend>Features</legend>
           <ul class="content"></ul>
@@ -43,11 +43,11 @@ permalink: /blinka
         <fieldset>
           <legend>Sort By</legend>
           <ul class="content">
-            <li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
-            <li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
-            <li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
-            <li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)"> Date Added (Newest First)</li>
-            <li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)"> Date Added (Oldest First)</li>
+            <li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" id="sortby-downloads" checked><label for="sortby-downloads">Downloads</label></li>
+            <li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)" id="sortby-alpha-asc" ><label for="sortby-alpha-asc">Board Name (A to Z)</label></li>
+            <li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)" id="sortby-alpha-desc"><label for="sortby-alpha-desc">Board Name (Z to A)</label></li>
+            <li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)" id="sortby-date-desc"><label for="sortby-date-desc">Date Added (Newest First)</label></li>
+            <li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)" id="sortby-date-asc"><label for="sortby-date-asc">Date Added (Oldest First)</label></li>
           </ul>
         </fieldset>
       </div>
diff --git a/downloads.html b/downloads.html
index 2af16c481..6fb5c6071 100644
--- a/downloads.html
+++ b/downloads.html
@@ -49,11 +49,11 @@ excerpt: CircuitPython supported boards.
         <fieldset>
           <legend>Sort By</legend>
           <ul class="content">
-            <li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
-            <li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
-            <li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
-            <li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)"> Date Added (Newest First)</li>
-            <li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)"> Date Added (Oldest First)</li>
+            <li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" id="sortby-downloads" checked><label for="sortby-downloads">Downloads</label></li>
+            <li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)" id="sortby-alpha-asc" ><label for="sortby-alpha-asc">Board Name (A to Z)</label></li>
+            <li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)" id="sortby-alpha-desc"><label for="sortby-alpha-desc">Board Name (Z to A)</label></li>
+            <li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)" id="sortby-date-desc"><label for="sortby-date-desc">Date Added (Newest First)</label></li>
+            <li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)" id="sortby-date-asc"><label for="sortby-date-asc">Date Added (Oldest First)</label></li>
           </ul>
         </fieldset>
       </div>