From 1357b010de0ba9095d93d82e57ac254da0e6d15d Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Tue, 16 Mar 2021 12:17:47 +0100
Subject: [PATCH] [a11y] add missing labels on voucher-input and fix
 input.focus when revealing voucher-input via JS (#1998)

---
 .../templates/pretixpresale/event/fragment_cart.html       | 7 ++++---
 .../pretixpresale/event/fragment_product_list.html         | 4 +++-
 .../presale/templates/pretixpresale/event/index.html       | 3 ++-
 src/pretix/static/pretixpresale/js/ui/cart.js              | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html b/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
index 67a9cf8f02..06ee8a1f7c 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
@@ -306,11 +306,12 @@
                   data-asynctask-headline="{% trans "We're applying this voucher to your cart..." %}"
                   method="post" data-asynctask class="apply-voucher">
                 {% csrf_token %}
+                <label for="voucher_code" class="sr-only">{% trans "Voucher code" %}</label>
                 <div class="input-group">
-                    <input type="text" class="form-control" name="voucher" placeholder="{% trans "Voucher code" %}" aria-label="{% trans "Voucher code" %}">
+                    <input type="text" class="form-control" name="voucher" id="voucher_code" placeholder="{% trans "Voucher code" %}" aria-label="{% trans "Voucher code" %}">
                     <span class="input-group-btn">
-                        <button class="btn btn-primary" type="submit" aria-label="{% trans "Redeem voucher" %}">
-                            <span class="fa fa-check" aria-hidden="true"></span>
+                        <button class="btn btn-primary" type="submit">
+                            <span class="fa fa-check" aria-hidden="true"></span><span class="sr-only"> {% trans "Redeem voucher" %}</span>
                         </button>
                     </span>
                 </div>
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
index b88974cd09..2136c3f12a 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -6,12 +6,14 @@
 {% load eventsignal %}
 {% load rich_text %}
 {% for tup in items_by_category %}
-    <section{% if tup.0 %} aria-labelledby="category-{{ tup.0.id }}"{% else %} aria-label="{% trans "Uncategorized products" %}"{% endif %}{% if tup.0.description %} aria-describedby="category-info-{{ tup.0.id }}"{% endif %}>
+    <section aria-labelledby="category-{% if tup.0 %}{{ tup.0.id }}{% else %}none{% endif %}"{% if tup.0.description %} aria-describedby="category-info-{{ tup.0.id }}"{% endif %}>
         {% if tup.0 %}
             <h3 id="category-{{ tup.0.id }}">{{ tup.0.name }}</h3>
             {% if tup.0.description %}
                 <div id="category-info-{{ tup.0.id }}">{{ tup.0.description|localize|rich_text }}</div>
             {% endif %}
+        {% else %}
+            <h3 id="category-none" class="sr-only">{% trans "Uncategorized products" %}</h3>
         {% endif %}
         {% for item in tup.1 %}
             {% if item.has_variations %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/index.html b/src/pretix/presale/templates/pretixpresale/event/index.html
index d495d90704..492b09b2c5 100644
--- a/src/pretix/presale/templates/pretixpresale/event/index.html
+++ b/src/pretix/presale/templates/pretixpresale/event/index.html
@@ -298,10 +298,11 @@
             <form method="get" action="{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}">
                 <div class="row-voucher">
                     <div class="col-md-8 col-sm-6 col-xs-12">
+                        <label for="voucher" class="sr-only">{% trans "Voucher code" %}</label>
                         <div class="input-group">
                             <span class="input-group-addon"><i class="fa fa-ticket fa-fw" aria-hidden="true"></i></span>
                             <input type="text" class="form-control" name="voucher" id="voucher"
-                                    placeholder="{% trans "Voucher code" %}" aria-label="{% trans "Voucher code" %}">
+                                    placeholder="{% trans "Voucher code" %}">
                         </div>
                     </div>
                     <input type="hidden" name="subevent" value="{{ subevent.id|default_if_none:"" }}" />
diff --git a/src/pretix/static/pretixpresale/js/ui/cart.js b/src/pretix/static/pretixpresale/js/ui/cart.js
index 62e231869a..6ff3a81584 100644
--- a/src/pretix/static/pretixpresale/js/ui/cart.js
+++ b/src/pretix/static/pretixpresale/js/ui/cart.js
@@ -75,7 +75,7 @@ $(function () {
     $(".apply-voucher-toggle").click(function (e) {
         $(".apply-voucher-toggle").hide();
         $(".apply-voucher").show();
-        $(".apply-voucher input[ŧype=text]").first().focus();
+        $(".apply-voucher input[type=text]").first().focus();
         e.preventDefault();
         return true;
     });