<select> in compact category list has an accessible label (ScottLogic…

…#141)

_includes/category_list_compact.html

@@ -1,12 +1,19 @@
 {% assign selectedIndex = include.selectedIndex %}
 <div class="category-list-compact dropdown-menu grid-x grid-margin-y align-center">
     <div class = "cell medium-5 small-5">
-        <h3>Categories</h3>
-        <select onchange="location = this.options[this.selectedIndex].value">
-            {% for category in site.data.categories %}
-            <option {% if selectedIndex == forloop.index0 %}selected="selected"{% endif %}
-                    value="{{ site.baseurl }}{{ category.url }}">{{ category.title }}</option>
-            {% endfor %}
+        <label for="category-select">
+          Category
+        </label>
+
+        <select id="category-select" onchange="location = this.options[this.selectedIndex].value">
+          {% for category in site.data.categories %}
+            <option
+              {% if selectedIndex == forloop.index0 %} selected="selected" {% endif %}
+              value="{{ site.baseurl }}{{ category.url }}"
+            >
+              {{ category.title }}
+            </option>
+          {% endfor %}
         </select>
     </div>
 </div>

scss/_post-index.scss

@@ -42,7 +42,10 @@
   }
 
   .category-list-compact {
-    h3 {
+    label {
+      font-size: 20px;
+      font-weight: 700;
+      margin-bottom: .5rem;
       text-align: center;
     }
   }