Improved accessibility of DSF contact form

* Used proper label tags instead of placeholders
* Improved visual styling of errors

Author: tut-tuuut

contact/forms.py

@@ -17,21 +17,20 @@
 class BaseContactForm(ContactForm):
     message_subject = forms.CharField(
         max_length=100,
-        widget=forms.TextInput(
-            attrs={"class": "required", "placeholder": _("Message subject")}
-        ),
+        widget=forms.TextInput(attrs={"class": "required"}),
         label=_("Message subject"),
     )
     email = forms.EmailField(
-        widget=forms.TextInput(attrs={"class": "required", "placeholder": _("E-mail")})
+        widget=forms.TextInput(attrs={"class": "required"}),
+        label=_("E-mail"),
     )
     name = forms.CharField(
-        widget=forms.TextInput(attrs={"class": "required", "placeholder": _("Name")})
+        widget=forms.TextInput(attrs={"class": "required"}),
+        label=_("Name"),
     )
     body = forms.CharField(
-        widget=forms.Textarea(
-            attrs={"class": "required", "placeholder": _("Your message")}
-        )
+        widget=forms.Textarea(attrs={"class": "required"}),
+        label=_("Your message"),
     )
     captcha = ReCaptchaField(widget=ReCaptchaV3)
 

djangoproject/scss/_style.scss

@@ -1334,6 +1334,17 @@ a.cta {
     }
 }
 
+label[for] {
+  font-weight: bold;
+}
+
+.errorlist {
+  color: var(--error-fg);
+  background-color: var(--error-light-l10);
+  border-radius: .3em;
+  margin: 10px 0;
+}
+
 .callout-right {
     @include respond-min(768px) {
         float: right;

djangoproject/templates/contact/foundation.html

@@ -31,23 +31,19 @@ <h1>{% translate "Contact the Django Software Foundation" %}</h1>
   </p>
   <form action="." method="post" accept-charset="utf-8" class="form-input">
     {% csrf_token %}
-    <p>
-      {% if form.name.errors %}<p class="errors">{{ form.name.errors.as_text }}</p>{% endif %}
-      {{ form.name }}
-    </p>
-    <p class="form-email">
-      {% if form.email.errors %}<p class="errors">{{ form.email.errors.as_text }}</p>{% endif %}
-      {{ form.email }}
-    </p>
-    <p>
-      {% if form.message_subject.errors %}<p class="errors">{{ form.message_subject.errors.as_text }}</p>{% endif %}
-      {{ form.message_subject }}
-    </p>
-    <p>
-      {% if form.body.errors %}<p class="errors">{{ form.body.errors.as_text }}</p>{% endif %}
-      {{ form.body }}
-    </p>
-    <p>{{ form.captcha }}</p>
+    <div>
+      {{ form.name.as_field_group }}
+    </div>
+    <div>
+      {{ form.email.as_field_group }}
+    </div>
+    <div>
+      {{ form.message_subject.as_field_group }}
+    </div>
+    <div>
+      {{ form.body.as_field_group }}
+    </div>
+    {{ form.captcha }}
     <p class="submit"><input type="submit" class="cta" value="{% translate "Send &rarr;" %}"></p>
   </form>
 {% endblock %}