From b09a92a264832d3ade5a12b81ef8e1208c1d4bcf Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Thu, 10 May 2018 10:21:01 +0200
Subject: [PATCH] More accessibility improvements

---
 .../templates/pretixpresale/event/index.html  | 20 ++++++++++++-------
 .../pretixpresale/event/voucher.html          | 16 ++++++++++-----
 .../static/pretixpresale/scss/_a11y.scss      |  5 +++++
 .../static/pretixpresale/scss/_event.scss     | 11 ++++++++++
 .../static/pretixpresale/scss/main.scss       |  1 +
 5 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 src/pretix/static/pretixpresale/scss/_a11y.scss

diff --git a/src/pretix/presale/templates/pretixpresale/event/index.html b/src/pretix/presale/templates/pretixpresale/event/index.html
index caea903b0..feb788761 100644
--- a/src/pretix/presale/templates/pretixpresale/event/index.html
+++ b/src/pretix/presale/templates/pretixpresale/event/index.html
@@ -230,9 +230,11 @@
                                                 </a>
                                             {% endif %}
                                             <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                                                <a href="#" data-toggle="variations">
-                                                    <strong>{{ item.name }}</strong>
-                                                </a>
+                                                <h4>
+                                                    <a href="#" data-toggle="variations">
+                                                        {{ item.name }}
+                                                    </a>
+                                                </h4>
                                                 {% if item.description %}
                                                     <div class="product-description">
                                                         {{ item.description|localize|rich_text }}
@@ -273,9 +275,11 @@
                                         {% for var in item.available_variations %}
                                             <div class="row-fluid product-row variation">
                                                 <div class="col-md-8 col-xs-12">
-                                                    <label for="variation_{{ item.pk }}_{{ var.pk }}">
-                                                        {{ var }}
-                                                    </label>
+                                                    <h5>
+                                                        <label for="variation_{{ item.pk }}_{{ var.pk }}">
+                                                            {{ var }}
+                                                        </label>
+                                                    </h5>
                                                     {% if var.description %}
                                                         <div class="variation-description">
                                                             {{ var.description|localize|rich_text }}
@@ -358,7 +362,9 @@
                                             </a>
                                         {% endif %}
                                         <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                                            <label for="item_{{ item.pk }}"><strong>{{ item.name }}</strong></label>
+                                            <h4>
+                                                <label for="item_{{ item.pk }}">{{ item.name }}</label>
+                                            </h4>
                                             {% if item.description %}
                                                 <div class="product-description">
                                                     {{ item.description|localize|rich_text }}
diff --git a/src/pretix/presale/templates/pretixpresale/event/voucher.html b/src/pretix/presale/templates/pretixpresale/event/voucher.html
index 3c5d4175a..87364406b 100644
--- a/src/pretix/presale/templates/pretixpresale/event/voucher.html
+++ b/src/pretix/presale/templates/pretixpresale/event/voucher.html
@@ -47,7 +47,9 @@
                                             </a>
                                         {% endif %}
                                         <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                                            <strong>{{ item.name }}</strong>
+                                            <h4>
+                                                {{ item.name }}
+                                            </h4>
                                             {% if item.description %}
                                                 <div class="product-description">
                                                     {{ item.description|localize|rich_text }}
@@ -74,9 +76,11 @@
                                     {% for var in item.available_variations %}
                                         <div class="row-fluid product-row variation">
                                             <div class="col-md-8 col-xs-12">
-                                                <label for="variation_{{ item.id }}_{{ var.id }}">
-                                                    {{ var }}
-                                                </label>
+                                                <h5>
+                                                    <label for="variation_{{ item.id }}_{{ var.id }}">
+                                                        {{ var }}
+                                                    </label>
+                                                </h5>
                                                 {% if var.description %}
                                                     <div class="variation-description">
                                                         {{ var.description|localize|rich_text }}
@@ -150,7 +154,9 @@
                                         </a>
                                     {% endif %}
                                     <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                                        <label for="item_{{ item.id }}"><strong>{{ item.name }}</strong></label>
+                                        <h4>
+                                            <label for="item_{{ item.id }}">{{ item.name }}</label>
+                                        </h4>
                                         {% if item.description %}
                                             <div class="product-description">
                                                 {{ item.description|localize|rich_text }}
diff --git a/src/pretix/static/pretixpresale/scss/_a11y.scss b/src/pretix/static/pretixpresale/scss/_a11y.scss
new file mode 100644
index 000000000..b5eb9be65
--- /dev/null
+++ b/src/pretix/static/pretixpresale/scss/_a11y.scss
@@ -0,0 +1,5 @@
+@media speech {
+  .fa {
+    display: none;
+  }
+}
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index dfb8970d5..048acc638 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -53,6 +53,17 @@
     &.variation label {
         font-weight: normal;
     }
+    h4 {
+        font-size: inherit;
+        margin: 0;
+        line-height: inherit;
+    }
+    h5 {
+        font-size: inherit;
+        font-weight: inherit;
+        margin: 0;
+        line-height: inherit;
+    }
 }
 .radio .variation-description {
     padding-left: 20px;
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index c672abbb1..0c486f246 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -220,3 +220,4 @@ body.loading .container {
 }
 
 @import "_iframe.scss";
+@import "_a11y.scss";