Add aria-describedby to field help/error messages

bookwyrm/forms.py

@@ -9,6 +9,7 @@ from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
 
 from bookwyrm import models
+from bookwyrm.models.fields import ClearableFileInputWithWarning
 
 
 class CustomForm(ModelForm):
@@ -147,6 +148,23 @@ class EditUserForm(CustomForm):
             "preferred_language",
         ]
         help_texts = {f: None for f in fields}
+        widgets = {
+            "avatar": ClearableFileInputWithWarning(
+                attrs={'aria-describedby': "desc_avatar"}
+            ),
+            "name": forms.TextInput(
+                attrs={'aria-describedby': "desc_name"}
+            ),
+            "summary": forms.Textarea(
+                attrs={'aria-describedby': "desc_summary"}
+            ),
+            "email": forms.EmailInput(
+                attrs={'aria-describedby': "desc_email"}
+            ),
+            "discoverable": forms.CheckboxInput(
+                attrs={'aria-describedby': "desc_discoverable"}
+            ),
+        }
 
 
 class LimitedEditUserForm(CustomForm):
@@ -160,6 +178,20 @@ class LimitedEditUserForm(CustomForm):
             "discoverable",
         ]
         help_texts = {f: None for f in fields}
+        widgets = {
+            "avatar": ClearableFileInputWithWarning(
+                attrs={'aria-describedby': "desc_avatar"}
+            ),
+            "name": forms.TextInput(
+                attrs={'aria-describedby': "desc_name"}
+            ),
+            "summary": forms.Textarea(
+                attrs={'aria-describedby': "desc_summary"}
+            ),
+            "discoverable": forms.CheckboxInput(
+                attrs={'aria-describedby': "desc_discoverable"}
+            ),
+        }
 
 
 class DeleteUserForm(CustomForm):
@@ -288,6 +320,17 @@ class SiteForm(CustomForm):
     class Meta:
         model = models.SiteSettings
         exclude = []
+        widgets = {
+            "instance_short_description": forms.TextInput(
+                attrs={'aria-describedby': "desc_instance_short_description"}
+            ),
+            "require_confirm_email": forms.CheckboxInput(
+                attrs={'aria-describedby': "desc_require_confirm_email"}
+            ),
+            "invite_request_text": forms.Textarea(
+                attrs={'aria-describedby': "desc_invite_request_text"}
+            ),
+        }
 
 
 class AnnouncementForm(CustomForm):

bookwyrm/templates/preferences/delete_user.html

@@ -18,9 +18,9 @@
         {% csrf_token %}
         <div class="field">
             <label class="label" for="id_password">{% trans "Confirm password:" %}</label>
-            <input class="input {% if form.password.errors %}is-danger{% endif %}" type="password" name="password" id="id_password" required>
+            <input class="input {% if form.password.errors %}is-danger{% endif %}" type="password" name="password" id="id_password" required aria-describedby="desc_password">
             {% for error in form.password.errors %}
-            <p class="help is-danger">{{ error | escape }}</p>
+            <p class="help is-danger" id="desc_password">{{ error | escape }}</p>
             {% endfor %}
         </div>
         <button type="submit" class="button is-danger">{% trans "Delete Account" %}</button>

bookwyrm/templates/preferences/edit_user.html

@@ -34,7 +34,7 @@
                 <div class="column">
                     {{ form.avatar }}
                     {% for error in form.avatar.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
+                    <p class="help is-danger" id="desc_avatar">{{ error | escape }}</p>
                     {% endfor %}
                 </div>
             </div>
@@ -42,21 +42,21 @@
                 <label class="label" for="id_name">{% trans "Display name:" %}</label>
                 {{ form.name }}
                 {% for error in form.name.errors %}
-                <p class="help is-danger">{{ error | escape }}</p>
+                <p class="help is-danger" id="desc_name">{{ error | escape }}</p>
                 {% endfor %}
             </div>
             <div class="field">
                 <label class="label" for="id_summary">{% trans "Summary:" %}</label>
                 {{ form.summary }}
                 {% for error in form.summary.errors %}
-                <p class="help is-danger">{{ error | escape }}</p>
+                <p class="help is-danger" id="desc_summary">{{ error | escape }}</p>
                 {% endfor %}
             </div>
             <div class="field">
                 <label class="label" for="id_email">{% trans "Email address:" %}</label>
                 {{ form.email }}
                 {% for error in form.email.errors %}
-                <p class="help is-danger">{{ error | escape }}</p>
+                <p class="help is-danger" id="desc_email">{{ error | escape }}</p>
                 {% endfor %}
             </div>
         </div>
@@ -69,19 +69,23 @@
         <div class="box">
             <div class="field">
                 <label class="checkbox label" for="id_show_goal">
-                    {% trans "Show reading goal prompt in feed:" %}
                     {{ form.show_goal }}
+                    {% trans "Show reading goal prompt in feed" %}
                 </label>
+            </div>
+            <div class="field">
                 <label class="checkbox label" for="id_show_suggested_users">
-                    {% trans "Show suggested users:" %}
                     {{ form.show_suggested_users }}
+                    {% trans "Show suggested users" %}
                 </label>
+            </div>
+            <div class="field">
                 <label class="checkbox label" for="id_discoverable">
-                    {% trans "Show this account in suggested users:" %}
                     {{ form.discoverable }}
+                    {% trans "Show this account in suggested users" %}
                 </label>
                 {% url 'directory' as path %}
-                <p class="help">
+                <p class="help" id="desc_discoverable">
                     {% blocktrans %}Your account will show up in the <a href="{{ path }}">directory</a>, and may be recommended to other BookWyrm users.{% endblocktrans %}
                 </p>
             </div>
@@ -107,8 +111,8 @@
         <div class="box">
             <div class="field">
                 <label class="checkbox label" for="id_manually_approves_followers">
-                    {% trans "Manually approve followers:" %}
                     {{ form.manually_approves_followers }}
+                    {% trans "Manually approve followers" %}
                 </label>
             </div>
             <div class="field">

bookwyrm/templates/settings/site.html

@@ -33,8 +33,8 @@
                 {{ site_form.instance_description }}
             </div>
             <div class="field">
-                <label class="label mb-0" for="id_short_description">{% trans "Short description:" %}</label>
-                <p class="help">{% trans "Used when the instance is previewed on joinbookwyrm.com. Does not support HTML or Markdown." %}</p>
+                <label class="label mb-0" for="id_instance_short_description">{% trans "Short description:" %}</label>
+                <p class="help" id="desc_instance_short_description">{% trans "Used when the instance is previewed on joinbookwyrm.com. Does not support HTML or Markdown." %}</p>
                 {{ site_form.instance_short_description }}
             </div>
             <div class="field">
@@ -114,7 +114,7 @@
                     {{ site_form.require_confirm_email }}
                     {% trans "Require users to confirm email address" %}
                 </label>
-                <p class="help">{% trans "(Recommended if registration is open)" %}</p>
+                <p class="help" id="desc_require_confirm_email">{% trans "(Recommended if registration is open)" %}</p>
             </div>
             <div class="field">
                 <label class="label" for="id_registration_closed_text">{% trans "Registration closed text:" %}</label>
@@ -124,7 +124,7 @@
                 <label class="label" for="id_invite_request_text">{% trans "Invite request text:" %}</label>
                 {{ site_form.invite_request_text }}
                 {% for error in site_form.invite_request_text.errors %}
-                <p class="help is-danger">{{ error|escape }}</p>
+                <p class="help is-danger" id="desc_invite_request_text">{{ error|escape }}</p>
                 {% endfor %}
             </div>
         </div>