Add labels for select menus

js/views/LanguageSelector.tsx

@@ -24,6 +24,8 @@ export default function LanguageSelector({
   languages: HTMLSelectElement;
 }) {
   return (
+    <label>
+      {"Language: "}
       <select
         id="language"
         name="language"
@@ -39,5 +41,6 @@ export default function LanguageSelector({
           )}
         </For>
       </select>
+    </label>
   );
 }

js/views/WrapperBar.tsx

@@ -92,6 +92,8 @@ export default function WrapperBar({
           {data().implementations.length > 1 && (
             <>
               {" "}
+              <label>
+                {"Implementation: "}
                 <select
                   onChange={(e) =>
                     setCurrentImplementationIndex(+e.currentTarget.value)
@@ -103,6 +105,7 @@ export default function WrapperBar({
                     )}
                   </For>
                 </select>
+              </label>
             </>
           )}
           {data().implementations.length && (

templates/index.html.tera

@@ -4,13 +4,13 @@
     <form method="post" action="/">
         {% block paste_header %}{% endblock %}
         <div id="toolbar">
-            <select id=language name=language>
+            <label>Language: <select id=language name=language>
                 {% block languages %}
                     {% for language in languages %}
                         <option value="{{ language.identifier }}">{{ language.name }}</option>
                     {% endfor %}
                 {% endblock languages %}
-            </select>
+            </select></label>
             <span id="wrapper-buttons"></span>
             {% block rawpaste %}{% endblock %}
             <span id="right-buttons">