From 71c8267dea15cf4aa3d819b4bf7d000eb65aec50 Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Wed, 9 May 2018 17:12:26 +0200
Subject: [PATCH] Improve screenreader accessibility

---
 .../pretixpresale/event/fragment_cart.html     |  4 ++--
 .../templates/pretixpresale/event/index.html   | 16 ++++++++++++----
 .../templates/pretixpresale/event/voucher.html | 18 ++++++++++++++----
 .../static/pretixpresale/scss/_event.scss      |  3 +++
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html b/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
index f6d88149c3..ef559fa0d7 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_cart.html
@@ -84,7 +84,7 @@
                         method="post" data-asynctask>
                     {% csrf_token %}
                     <input type="hidden" name="id" value="{{ line.id }}" />
-                    <button class="btn btn-mini btn-link">
+                    <button class="btn btn-mini btn-link" title="{% trans "Remove one" %}">
                         <i class="fa fa-minus"></i>
                     </button>
                 </form>
@@ -106,7 +106,7 @@
                         <input type="hidden" name="price_{{ line.item.id }}"
                                 value="{% if event.settings.display_net_prices %}{{ line.net_price }}{% else %}{{ line.price }}{% endif %}" />
                     {% endif %}
-                    <button class="btn btn-mini btn-link">
+                    <button class="btn btn-mini btn-link" title="{% trans "Add one more" %}">
                         <i class="fa fa-plus"></i>
                     </button>
                 </form>
diff --git a/src/pretix/presale/templates/pretixpresale/event/index.html b/src/pretix/presale/templates/pretixpresale/event/index.html
index d3c5dd0fb1..caea903b08 100644
--- a/src/pretix/presale/templates/pretixpresale/event/index.html
+++ b/src/pretix/presale/templates/pretixpresale/event/index.html
@@ -273,7 +273,9 @@
                                         {% for var in item.available_variations %}
                                             <div class="row-fluid product-row variation">
                                                 <div class="col-md-8 col-xs-12">
-                                                    {{ var }}
+                                                    <label for="variation_{{ item.pk }}_{{ var.pk }}">
+                                                        {{ var }}
+                                                    </label>
                                                     {% if var.description %}
                                                         <div class="variation-description">
                                                             {{ var.description|localize|rich_text }}
@@ -291,6 +293,7 @@
                                                                     placeholder="0"
                                                                     min="{% if event.settings.display_net_prices %}{{ var.display_price.net|money_numberfield:event.currency }}{% else %}{{ var.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                                                     name="price_{{ item.id }}_{{ var.id }}"
+                                                                    title="{% blocktrans trimmed with item=var.value %}Modify price for {{ item }}{% endblocktrans %}"
                                                                     step="any"
                                                                     value="{% if event.settings.display_net_prices %}{{var.display_price.net|money_numberfield:event.currency }}{% else %}{{ var.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                                             >
@@ -323,12 +326,14 @@
                                                         {% if item.max_per_order == 1 %}
                                                             <label class="item-checkbox-label">
                                                                 <input type="checkbox" value="1"
+                                                                        id="variation_{{ item.id }}_{{ var.id }}"
                                                                         name="variation_{{ item.id }}_{{ var.id }}">
                                                             </label>
                                                         {% else %}
                                                             <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                                                     max="{{ var.order_max }}"
                                                                     pattern="\d*"
+                                                                    id="variation_{{ item.id }}_{{ var.id }}"
                                                                     name="variation_{{ item.id }}_{{ var.id }}">
                                                         {% endif %}
                                                     </div>
@@ -353,7 +358,7 @@
                                             </a>
                                         {% endif %}
                                         <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                                            <strong>{{ item.name }}</strong>
+                                            <label for="item_{{ item.pk }}"><strong>{{ item.name }}</strong></label>
                                             {% if item.description %}
                                                 <div class="product-description">
                                                     {{ item.description|localize|rich_text }}
@@ -380,6 +385,7 @@
                                                 <input type="number" class="form-control input-item-price" placeholder="0"
                                                         min="{% if event.settings.display_net_prices %}{{ item.display_price.net|money_numberfield:event.currency }}{% else %}{{ item.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                                         name="price_{{ item.id }}"
+                                                        title="{% blocktrans trimmed with item=item.name %}Modify price for {{ item }}{% endblocktrans %}"
                                                         value="{% if event.settings.display_net_prices %}{{item.display_price.net|money_numberfield:event.currency }}{% else %}{{ item.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                                         step="any">
                                             </div>
@@ -411,12 +417,14 @@
                                             {% if item.max_per_order == 1 %}
                                                 <label class="item-checkbox-label">
                                                     <input type="checkbox" value="1" {% if itemnum == 1 %}checked{% endif %}
-                                                            name="item_{{ item.id }}">
+                                                            name="item_{{ item.id }}" id="item_{{ item.id }}">
                                                 </label>
                                             {% else %}
                                                 <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                                         pattern="\d*" {% if itemnum == 1 %}value="1"{% endif %}
-                                                        max="{{ item.order_max }}" name="item_{{ item.id }}">
+                                                        max="{{ item.order_max }}"
+                                                        name="item_{{ item.id }}"
+                                                        id="item_{{ item.id }}">
                                             {% endif %}
                                         </div>
                                     {% else %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/voucher.html b/src/pretix/presale/templates/pretixpresale/event/voucher.html
index 8d92771efd..3c5d4175aa 100644
--- a/src/pretix/presale/templates/pretixpresale/event/voucher.html
+++ b/src/pretix/presale/templates/pretixpresale/event/voucher.html
@@ -74,7 +74,9 @@
                                     {% for var in item.available_variations %}
                                         <div class="row-fluid product-row variation">
                                             <div class="col-md-8 col-xs-12">
-                                                {{ var }}
+                                                <label for="variation_{{ item.id }}_{{ var.id }}">
+                                                    {{ var }}
+                                                </label>
                                                 {% if var.description %}
                                                     <div class="variation-description">
                                                         {{ var.description|localize|rich_text }}
@@ -89,6 +91,7 @@
                                                                 placeholder="0"
                                                                 min="{% if event.settings.display_net_prices %}{{ var.display_price.net|stringformat:"0.2f" }}{% else %}{{ var.display_price.gross|stringformat:"0.2f" }}{% endif %}"
                                                                 name="price_{{ item.id }}_{{ var.id }}"
+                                                                title="{% blocktrans trimmed with item=var.value %}Modify price for {{ item }}{% endblocktrans %}"
                                                                 value="{% if event.settings.display_net_prices %}{{var.display_price.net|stringformat:"0.2f" }}{% else %}{{ var.display_price.gross|stringformat:"0.2f" }}{% endif %}"
                                                                 step="any">
                                                     </div>
@@ -115,10 +118,13 @@
                                                         {% if max_times > 1 %}
                                                             <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                                                     pattern="\d*"
-                                                                    max="{{ item.order_max }}" name="variation_{{ item.id }}_{{ var.id }}">
+                                                                    max="{{ item.order_max }}"
+                                                                    id="variation_{{ item.id }}_{{ var.id }}"
+                                                                    name="variation_{{ item.id }}_{{ var.id }}">
                                                         {% else %}
                                                             <input type="radio" name="_voucher_item"
                                                                     {% if options == 1 %}checked="checked"{% endif %}
+                                                                    id="variation_{{ item.id }}_{{ var.id }}"
                                                                     value="variation_{{ item.id }}_{{ var.id }}">
                                                         {% endif %}
                                                     </label>
@@ -144,7 +150,7 @@
                                         </a>
                                     {% endif %}
                                     <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                                        <strong>{{ item.name }}</strong>
+                                        <label for="item_{{ item.id }}"><strong>{{ item.name }}</strong></label>
                                         {% if item.description %}
                                             <div class="product-description">
                                                 {{ item.description|localize|rich_text }}
@@ -159,6 +165,7 @@
                                             <input type="number" class="form-control input-item-price" placeholder="0"
                                                     min="{% if event.settings.display_net_prices %}{{ item.display_price.net|stringformat:"0.2f" }}{% else %}{{ item.display_price.gross|stringformat:"0.2f" }}{% endif %}"
                                                     name="price_{{ item.id }}"
+                                                    title="{% blocktrans trimmed with item=item.name %}Modify price for {{ item }}{% endblocktrans %}"
                                                     value="{% if event.settings.display_net_prices %}{{ item.display_price.net|stringformat:"0.2f" }}{% else %}{{ item.display_price.gross|stringformat:"0.2f" }}{% endif %}"
                                                     step="any">
                                         </div>
@@ -185,10 +192,13 @@
                                             {% if max_times > 1 %}
                                                 <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                                         pattern="\d*"
-                                                        max="{{ item.order_max }}" name="item_{{ item.id }}">
+                                                        max="{{ item.order_max }}"
+                                                        id="item_{{ item.id }}"
+                                                        name="item_{{ item.id }}">
                                             {% else %}
                                                 <input type="radio" name="_voucher_item"
                                                         {% if options == 1 %}checked="checked"{% endif %}
+                                                        id="item_{{ item.id }}"
                                                         value="item_{{ item.id }}">
                                             {% endif %}
                                         </label>
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index eb3d8de759..dfb8970d56 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -50,6 +50,9 @@
             margin: 0;
         }
     }
+    &.variation label {
+        font-weight: normal;
+    }
 }
 .radio .variation-description {
     padding-left: 20px;