PR feedback

Author: jlchilders11

core/views.py

@@ -1286,6 +1286,28 @@ def get_context_data(self, **kwargs):
             "flag_emoji": "🇺🇸",
         }
 
+        context["button_badge_data"] = {
+            "group_label": "button badges",
+            "group_name": "button-badge-select",
+            "badge_buttons": 2
+            * [
+                {
+                    "value": "gold",
+                    "icon_src": f"{badge_img}/badge-gold-medal.png",
+                    "icon_alt": "Gold Medal",
+                    "checked": False,
+                }
+            ]
+            + [
+                {
+                    "value": "gold",
+                    "icon_src": f"{badge_img}/badge-gold-medal.png",
+                    "icon_alt": "Gold Medal",
+                    "checked": True,
+                }
+            ],
+        }
+
         cpp_options = [
             ("all", "All"),
             ("cpp03", "C++03"),

static/css/v3/badge-button.css

@@ -13,23 +13,27 @@
 .badge-button {
     width: fit-content;
     height: fit-content;
-    padding: 2px;
+    padding: 1px;
     display: inline-block;
     cursor: pointer;
+    border: 1px solid transparent;
 }
 
-.badge-button input, img, label {
+.badge-button input,
+.badge-button img,
+.badge-button label {
     cursor: pointer;
 }
 
-.badge-button:has(.badge-button__radio:checked)  {
-        border-radius: var(--border-radius-m);
-        border: 1px solid var(--color-stroke-mid);
-        background: var(--color-surface-weak);
-        padding: 1px;
+.badge-button:has(.badge-button__radio:checked) {
+    border-radius: var(--border-radius-m);
+    border: 1px solid var(--color-stroke-mid);
+    background: var(--color-surface-weak);
+    padding: 1px;
 }
 
-.badge-button:hover {
+.badge-button:hover,
+.badge-button:focus-visible {
     border-radius: var(--border-radius-m);
     border: 1px solid var(--color-stroke-strong);
     background: var(--color-surface-mid);

templates/v3/examples/_v3_example_section.html

@@ -70,11 +70,10 @@ <h3>{{ section_title }}</h3>
   {% with section_title="Badge Buttons" %}
     <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
       <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 radio_checked=True only %}
-        {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
+        {% with button_badge_data as data %}
+        {% include "v3/includes/_badge_button_group.html" with group_label=data.group_label group_name=data.group_name badge_buttons=data.badge_buttons only  %}
+        {% endwith %}
       </div>
     </div>
   {% endwith %}

templates/v3/includes/_badge_button.html

@@ -5,6 +5,7 @@
         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
+        icon_alt: str, required: meaninful description of icon for screen readers
         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
 
@@ -29,5 +30,5 @@
         aria-pressed="{{radio_checked|yesno:"true,false"|default:"false"}}"
         {% if radio_checked %} checked {% endif %}
     />
-    <label id="{{id|default:uuid}}_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="{{ icon_alt }}" width="28" height="28"></label>
 </div>

templates/v3/includes/_badge_button_group.html

@@ -0,0 +1,15 @@
+{% comment %}
+    Fieldset grouping of _badge_buttons, to allow for easier usage
+    Inputs:
+        badge_buttons: list, required - List of badge buttons. Each contains the required values for a badge button, see _badge_button.html
+        group_label: str, required - Aria label for the fieldset
+        group_name: str, required - name of the button group
+    Example usage
+        {% include "v3/includes/_badge_button_group.html" with group_label=data.group_label group_name=data.group_name badge_buttons=data.badge_buttons only  %}
+{% endcomment %}
+
+<fieldset aria-label="{{ group_label }}" role="radiogroup">
+    {% for button in badge_buttons %}
+        {% include "v3/includes/_badge_button.html" with name=group_name value=button.value icon_src=button.icon_src icon_alt=button.icon_alt radio_checked=button.checked only %}
+    {% endfor %}
+</fieldset>