PR feedback: accessibility

Author: jlchilders11

static/css/v3/badge-button.css

@@ -15,6 +15,11 @@
     height: fit-content;
     padding: 2px;
     display: inline-block;
+    cursor: pointer;
+}
+
+.badge-button input, img, label {
+    cursor: pointer;
 }
 
 .badge-button:has(.badge-button__radio:checked)  {

templates/v3/includes/_badge_button.html

@@ -24,8 +24,10 @@
         name="{{name}}"
         value="{{value}}"
         id="{{id|default:uuid}}"
+        aria-labelledby="{{id|default:uuid}}_label"
         aria-checked="{{radio_checked|yesno:"true,false"|default:"false"}}"
+        aria-pressed="{{radio_checked|yesno:"true,false"|default:"false"}}"
         {% if radio_checked %} checked {% endif %}
     />
-    <label for="{{id|default:uuid}}"><img src="{{ icon_src }}" alt="" width="32" height="32"></label>
+    <label id="{{id|default:uuid}}_label" for="{{id|default:uuid}}"><img src="{{ icon_src }}" alt="" width="32" height="32"></label>
 </div>