Add comments and aria values

Author: jlchilders11

templates/v3/examples/_v3_example_section.html

@@ -73,7 +73,7 @@ <h3>{{ section_title }}</h3>
       {% static "img/v3/badges/badge-gold-medal.png" as icon_src %}
       <div class="v3-examples-section__example-box">
         {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
-        {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src checked=True only %}
+        {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src radio_checked=True only %}
         {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
       </div>
     </div>

templates/v3/includes/_badge_button.html

@@ -1,9 +1,31 @@
 {% comment %}
+    Badges Button Component. Intended to be used as part of a group of inputs to select a badge.
+
+    Inputs:
+        name: str, required: group name for the radios. Should be the same for all components
+        value: str, required: radio value for selection
+        icon_src: str, required: full src link for icon for badge
+        id: str, optional: id for linking the label to the radio button. Will be auto generated if not provided
+        radio_checked: bool, optional: Set to true if the value should be preselected
+
+    Usage:
+        Checked:
+            {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src radio_checked=True only %}
+        Unchecked
+            {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
 {% endcomment %}
 {% load core_tags %}
 
 {% generate_uuid as uuid %}
 <div class="badge-button">
-<input class="badge-button__radio" type="radio" name="{{name}}" value="{{value}}" id="{{id|default:uuid}}" {% if checked %}checked{% endif %} />
-<label for="{{id|default:uuid}}"><img src="{{ icon_src }}" alt="" width="32" height="32"></label>
+    <input
+        class="badge-button__radio"
+        type="radio"
+        name="{{name}}"
+        value="{{value}}"
+        id="{{id|default:uuid}}"
+        aria-checked="{{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>
 </div>