[A11y] make text "required" visible in labels (#5042)

src/pretix/presale/forms/renderers.py

@@ -33,6 +33,7 @@ def render_label(content, label_for=None, label_class=None, label_title='', labe
     """
     Render a label with content
     """
+    tag = 'label'
     attrs = attrs or {}
     if label_for:
         attrs['for'] = label_for
@@ -58,15 +59,16 @@ def render_label(content, label_for=None, label_class=None, label_title='', labe
         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
+        tag = 'div'
         if 'for' in attrs:
             del attrs['for']
     elif not optional:
-        opt += '<i class="sr-only label-required">, {}</i>'.format(pgettext('form', 'required'))
+        opt += '<i class="label-required">{}</i>'.format(pgettext('form', 'required'))
 
     builder = '<{tag}{attrs}>{content}{opt}</{tag}>'
     return format_html(
         builder,
-        tag='label',
+        tag=tag,
         attrs=mark_safe(flatatt(attrs)) if attrs else '',
         opt=mark_safe(opt),
         content=text_value(content),

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -145,10 +145,23 @@ output {
   color: $brand-primary;
   font-weight: bold;
 }
-.form-group.required .control-label:after {
-  content: '*';
-  color: $brand-primary;
+.label-required {
+  color: $text-muted;
+  display: block;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 85%;
 }
+.checkbox .label-required {
+  display: inline;
+  &:before {
+    content: " (";
+  }
+  &:after {
+    content: ")";
+  }
+}
+
 .form-control-text {
   padding-top: 7px;
 }