[a11y] Add text "required" to label of required inputs (#1923)

src/pretix/presale/forms/renderers.py

@@ -1,5 +1,44 @@
 from bootstrap3.renderers import FieldRenderer
+from bootstrap3.text import text_value
 from bootstrap3.utils import add_css_class
+from django.forms import CheckboxInput
+from django.forms.utils import flatatt
+from django.utils.html import escape, format_html, strip_tags
+from django.utils.safestring import mark_safe
+from django.utils.translation import pgettext
+
+
+def render_label(content, label_for=None, label_class=None, label_title='', optional=False):
+    """
+    Render a label with content
+    """
+    attrs = {}
+    if label_for:
+        attrs['for'] = label_for
+    if label_class:
+        attrs['class'] = label_class
+    if label_title:
+        attrs['title'] = label_title
+
+    if text_value(content) == ' ':
+        # Empty label, e.g. checkbox
+        attrs.setdefault('class', '')
+        attrs['class'] += ' label-empty'
+        # usually checkboxes have overall empty labels and special labels per checkbox
+        # => remove for-attribute as well as "required"-text appended to label
+        del(attrs['for'])
+        opt = ""
+    else:
+        opt = mark_safe('<i class="sr-only"> {}</i>'.format(pgettext('form', 'required'))) if not optional else ''
+
+    builder = '<{tag}{attrs}>{content}{opt}</{tag}>'
+    return format_html(
+        builder,
+        tag='label',
+        attrs=mark_safe(flatatt(attrs)) if attrs else '',
+        opt=opt,
+        content=text_value(content),
+    )
 
 
 class CheckoutFieldRenderer(FieldRenderer):
@@ -24,3 +63,28 @@ class CheckoutFieldRenderer(FieldRenderer):
                 self.get_size_class(prefix='form-group')
             )
         return form_group_class
+
+    def add_label(self, html):
+        label = self.get_label()
+
+        if hasattr(self.field.field, '_required'):
+            # e.g. payment settings forms where a field is only required if the payment provider is active
+            required = self.field.field._required
+        else:
+            required = self.field.field.required
+
+        html = render_label(
+            label,
+            label_for=self.field.id_for_label,
+            label_class=self.get_label_class(),
+            optional=not required and not isinstance(self.widget, CheckboxInput)
+        ) + html
+        return html
+
+    def put_inside_label(self, html):
+        content = "{field} {label}".format(field=html, label=self.label)
+        return render_label(
+            content=mark_safe(content),
+            label_for=self.field.id_for_label,
+            label_title=escape(strip_tags(self.field_help)),
+        )

src/pretix/presale/templates/pretixpresale/event/checkout_questions.html

@@ -4,7 +4,7 @@
 {% load rich_text %}
 {% block inner %}
     <p>{% trans "Before we continue, we need you to answer some questions." %}</p>
-    <p class="required-legend">
+    <p class="required-legend" aria-hidden="true">
         {% blocktrans trimmed %}
             You need to fill all fields that are marked with <span>*</span> to continue.
         {% endblocktrans %}