From 63d31b8623d5eb084b049b5acbf8ae0a91da8408 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Mon, 29 Nov 2021 23:29:22 +0100
Subject: [PATCH] Edit book form

---
 bookwyrm/forms.py                             |  61 ++++-
 .../templates/book/edit/edit_book_form.html   | 229 ++++++++++--------
 2 files changed, 194 insertions(+), 96 deletions(-)

diff --git a/bookwyrm/forms.py b/bookwyrm/forms.py
index e8136a54f..3f46be348 100644
--- a/bookwyrm/forms.py
+++ b/bookwyrm/forms.py
@@ -218,6 +218,65 @@ class EditionForm(CustomForm):
             "connector",
             "search_vector",
         ]
+        widgets = {
+            "title": forms.TextInput(
+                attrs={"aria-describedby": "desc_title"}
+            ),
+            "subtitle": forms.TextInput(
+                attrs={"aria-describedby": "desc_subtitle"}
+            ),
+            "description": forms.Textarea(
+                attrs={"aria-describedby": "desc_description"}
+            ),
+            "series": forms.TextInput(
+                attrs={"aria-describedby": "desc_series"}
+            ),
+            "series_number": forms.TextInput(
+                attrs={"aria-describedby": "desc_series_number"}
+            ),
+            "languages": forms.TextInput(
+                attrs={"aria-describedby": "desc_languages_help desc_languages"}
+            ),
+            "publishers": forms.TextInput(
+                attrs={"aria-describedby": "desc_publishers_help desc_publishers"}
+            ),
+            "first_published_date": forms.SelectDateWidget(
+                attrs={"aria-describedby": "desc_first_published_date"}
+            ),
+            "published_date": forms.SelectDateWidget(
+                attrs={"aria-describedby": "desc_published_date"}
+            ),
+            "cover": ClearableFileInputWithWarning(
+                attrs={"aria-describedby": "desc_cover"}
+            ),
+            "physical_format": forms.Select(
+                attrs={"aria-describedby": "desc_physical_format"}
+            ),
+            "physical_format_detail": forms.TextInput(
+                attrs={"aria-describedby": "desc_physical_format_detail"}
+            ),
+            "pages": forms.NumberInput(
+                attrs={"aria-describedby": "desc_pages"}
+            ),
+            "isbn_13": forms.TextInput(
+                attrs={"aria-describedby": "desc_isbn_13"}
+            ),
+            "isbn_10": forms.TextInput(
+                attrs={"aria-describedby": "desc_isbn_10"}
+            ),
+            "openlibrary_key": forms.TextInput(
+                attrs={"aria-describedby": "desc_openlibrary_key"}
+            ),
+            "inventaire_id": forms.TextInput(
+                attrs={"aria-describedby": "desc_inventaire_id"}
+            ),
+            "oclc_number": forms.TextInput(
+                attrs={"aria-describedby": "desc_oclc_number"}
+            ),
+            "ASIN": forms.TextInput(
+                attrs={"aria-describedby": "desc_ASIN"}
+            ),
+        }
 
 
 class AuthorForm(CustomForm):
@@ -268,7 +327,7 @@ class AuthorForm(CustomForm):
                 attrs={"aria-describedby": "desc_goodreads_key"}
             ),
         }
-        
+
 
 class ImportForm(forms.Form):
     csv_file = forms.FileField()
diff --git a/bookwyrm/templates/book/edit/edit_book_form.html b/bookwyrm/templates/book/edit/edit_book_form.html
index 982bb56d2..feebb803c 100644
--- a/bookwyrm/templates/book/edit/edit_book_form.html
+++ b/bookwyrm/templates/book/edit/edit_book_form.html
@@ -12,106 +12,125 @@
 <div class="columns">
     <div class="column is-half">
         <section class="block">
-            <h2 class="title is-4">{% trans "Metadata" %}</h2>
+            <h2 class="title is-4">
+                {% trans "Metadata" %}
+            </h2>
             <div class="box">
                 <div class="field">
-                    <label class="label" for="id_title">{% trans "Title:" %}</label>
-                    <input type="text" name="title" value="{{ form.title.value|default:'' }}" maxlength="255" class="input" required="" id="id_title">
-                    {% for error in form.title.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    <label class="label" for="id_title">
+                        {% trans "Title:" %}
+                    </label>
+                    <input type="text" name="title" value="{{ form.title.value|default:'' }}" maxlength="255" class="input" required="" id="id_title" aria-describedby="desc_title">
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.title.errors id="desc_title" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_subtitle">{% trans "Subtitle:" %}</label>
-                    <input type="text" name="subtitle" value="{{ form.subtitle.value|default:'' }}" maxlength="255" class="input" id="id_subtitle">
-                    {% for error in form.subtitle.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    <label class="label" for="id_subtitle">
+                        {% trans "Subtitle:" %}
+                    </label>
+                    <input type="text" name="subtitle" value="{{ form.subtitle.value|default:'' }}" maxlength="255" class="input" id="id_subtitle" aria-describedby="desc_subtitle">
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.subtitle.errors id="desc_subtitle" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_description">{% trans "Description:" %}</label>
+                    <label class="label" for="id_description">
+                        {% trans "Description:" %}
+                    </label>
                     {{ form.description }}
-                    {% for error in form.description.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.description.errors id="desc_description" %}
                 </div>
 
                 <div class="columns">
                     <div class="column is-two-thirds">
                         <div class="field">
-                            <label class="label" for="id_series">{% trans "Series:" %}</label>
-                            <input type="text" class="input" name="series" id="id_series" value="{{ form.series.value|default:'' }}">
-                            {% for error in form.series.errors %}
-                            <p class="help is-danger">{{ error | escape }}</p>
-                            {% endfor %}
+                            <label class="label" for="id_series">
+                                {% trans "Series:" %}
+                            </label>
+                            <input type="text" class="input" name="series" id="id_series" value="{{ form.series.value|default:'' }}" aria-describedby="desc_series">
+                            
+                            {% include 'snippets/form_errors.html' with errors_list=form.series.errors id="desc_series" %}
                         </div>
                     </div>
                     <div class="column is-one-third">
                         <div class="field">
-                            <label class="label" for="id_series_number">{% trans "Series number:" %}</label>
+                            <label class="label" for="id_series_number">
+                                {% trans "Series number:" %}
+                            </label>
                             {{ form.series_number }}
-                            {% for error in form.series_number.errors %}
-                            <p class="help is-danger">{{ error | escape }}</p>
-                            {% endfor %}
+                            
+                            {% include 'snippets/form_errors.html' with errors_list=form.series_number.errors id="desc_series_number" %}
                         </div>
                     </div>
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_languages">{% trans "Languages:" %}</label>
+                    <label class="label" for="id_languages">
+                        {% trans "Languages:" %}
+                    </label>
                     {{ form.languages }}
-                    <span class="help">{% trans "Separate multiple values with commas." %}</span>
-                    {% for error in form.languages.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    <span class="help" id="desc_languages_help">
+                        {% trans "Separate multiple values with commas." %}
+                    </span>
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.languages.errors id="desc_languages" %}
                 </div>
             </div>
         </section>
 
         <section class="block">
-            <h2 class="title is-4">{% trans "Publication" %}</h2>
+            <h2 class="title is-4">
+                {% trans "Publication" %}
+            </h2>
             <div class="box">
                 <div class="field">
-                    <label class="label" for="id_publishers">{% trans "Publisher:" %}</label>
+                    <label class="label" for="id_publishers">
+                        {% trans "Publisher:" %}
+                    </label>
                     {{ form.publishers }}
-                    <span class="help">{% trans "Separate multiple values with commas." %}</span>
-                    {% for error in form.publishers.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    <span class="help" id="desc_publishers_help">
+                        {% trans "Separate multiple values with commas." %}
+                    </span>
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.publishers.errors id="desc_publishers" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_first_published_date">{% trans "First published date:" %}</label>
-                    <input type="date" name="first_published_date" class="input" id="id_first_published_date"{% if form.first_published_date.value %} value="{{ form.first_published_date.value|date:'Y-m-d' }}"{% endif %}>
-                    {% for error in form.first_published_date.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    <label class="label" for="id_first_published_date">
+                        {% trans "First published date:" %}
+                    </label>
+                    <input type="date" name="first_published_date" class="input" id="id_first_published_date"{% if form.first_published_date.value %} value="{{ form.first_published_date.value|date:'Y-m-d' }}"{% endif %} aria-describedby="desc_first_published_date">
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.first_published_date.errors id="desc_first_published_date" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_published_date">{% trans "Published date:" %}</label>
-                    <input type="date" name="published_date" class="input" id="id_published_date"{% if form.published_date.value %} value="{{ form.published_date.value|date:'Y-m-d'}}"{% endif %}>
-                    {% for error in form.published_date.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    <label class="label" for="id_published_date">
+                        {% trans "Published date:" %}
+                    </label>
+                    <input type="date" name="published_date" class="input" id="id_published_date"{% if form.published_date.value %} value="{{ form.published_date.value|date:'Y-m-d'}}"{% endif %} aria-describedby="desc_published_date">
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.published_date.errors id="desc_published_date" %}
                 </div>
             </div>
         </section>
 
         <section class="block">
-            <h2 class="title is-4">{% trans "Authors" %}</h2>
+            <h2 class="title is-4">
+                {% trans "Authors" %}
+            </h2>
             <div class="box">
                 {% if book.authors.exists %}
                 <fieldset>
                     {% for author in book.authors.all %}
                     <div class="is-flex is-justify-content-space-between">
                         <label class="label mb-2">
-                            <input type="checkbox" name="remove_authors" value="{{ author.id }}" {% if author.id|stringformat:"i" in remove_authors %}checked{% endif %}>
+                            <input type="checkbox" name="remove_authors" value="{{ author.id }}" {% if author.id|stringformat:"i" in remove_authors %}checked{% endif %} aria-describedby="desc_remove_author_{{author.id}}">
                             {% blocktrans with name=author.name %}Remove {{ name }}{% endblocktrans %}
                         </label>
-                        <p class="help">
+                        <p class="help" id="desc_remove_author_{{author.id}}">
                             <a href="{{ author.local_path }}">{% blocktrans with name=author.name %}Author page for {{ name }}{% endblocktrans %}</a>
                         </p>
                     </div>
@@ -119,9 +138,13 @@
                 </fieldset>
                 {% endif %}
                 <div class="field">
-                    <label class="label" for="id_add_author">{% trans "Add Authors:" %}</label>
-                    <input class="input" type="text" name="add_author" id="id_add_author" placeholder="{% trans 'John Doe, Jane Smith' %}" value="{{ add_author }}" {% if confirm_mode %}readonly{% endif %}>
-                    <span class="help">{% trans "Separate multiple values with commas." %}</span>
+                    <label class="label" for="id_add_author">
+                        {% trans "Add Authors:" %}
+                    </label>
+                    <input class="input" type="text" name="add_author" id="id_add_author" placeholder="{% trans 'John Doe, Jane Smith' %}" value="{{ add_author }}" {% if confirm_mode %}readonly{% endif %} aria-describedby="desc_add_author">
+                    <span class="help" id="desc_add_author">
+                        {% trans "Separate multiple values with commas." %}
+                    </span>
                 </div>
             </div>
         </section>
@@ -129,7 +152,9 @@
 
     <div class="column is-half">
         <section class="block">
-            <h2 class="title is-4">{% trans "Cover" %}</h2>
+            <h2 class="title is-4">
+                {% trans "Cover" %}
+            </h2>
             <div class="box">
                 <div class="columns">
                     {% if book.cover %}
@@ -140,108 +165,122 @@
 
                     <div class="column">
                         <div class="field">
-                            <label class="label" for="id_cover">{% trans "Upload cover:" %}</label>
+                            <label class="label" for="id_cover">
+                                {% trans "Upload cover:" %}
+                            </label>
                             {{ form.cover }}
                         </div>
                         <div class="field">
                             <label class="label" for="id_cover_url">
                                 {% trans "Load cover from url:" %}
                             </label>
-                            <input class="input" name="cover-url" id="id_cover_url" type="url" value="{{ cover_url|default:'' }}">
+                            <input class="input" name="cover-url" id="id_cover_url" type="url" value="{{ cover_url|default:'' }}" aria-describedby="desc_cover">
                         </div>
-                        {% for error in form.cover.errors %}
-                        <p class="help is-danger">{{ error | escape }}</p>
-                        {% endfor %}
+                        
+                        {% include 'snippets/form_errors.html' with errors_list=form.cover.errors id="desc_cover" %}
                     </div>
                 </div>
             </div>
         </section>
 
         <section class="block">
-            <h2 class="title is-4">{% trans "Physical Properties" %}</h2>
+            <h2 class="title is-4">
+                {% trans "Physical Properties" %}
+            </h2>
             <div class="box">
                 <div class="columns">
                     <div class="column is-one-third">
                         <div class="field">
-                            <label class="label" for="id_physical_format">{% trans "Format:" %}</label>
+                            <label class="label" for="id_physical_format">
+                                {% trans "Format:" %}
+                            </label>
                             <div class="select">
                                 {{ form.physical_format }}
                             </div>
-                            {% for error in form.physical_format.errors %}
-                            <p class="help is-danger">{{ error | escape }}</p>
-                            {% endfor %}
+                            
+                            {% include 'snippets/form_errors.html' with errors_list=form.physical_format.errors id="desc_physical_format" %}
                         </div>
                     </div>
                     <div class="column">
                         <div class="field">
-                            <label class="label" for="id_physical_format_detail">{% trans "Format details:" %}</label>
+                            <label class="label" for="id_physical_format_detail">
+                                {% trans "Format details:" %}
+                            </label>
                             {{ form.physical_format_detail }}
-                            {% for error in form.physical_format_detail.errors %}
-                            <p class="help is-danger">{{ error | escape }}</p>
-                            {% endfor %}
+                            
+                            {% include 'snippets/form_errors.html' with errors_list=form.physical_format_detail.errors id="desc_physical_format_detail" %}
                         </div>
                     </div>
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_pages">{% trans "Pages:" %}</label>
+                    <label class="label" for="id_pages">
+                        {% trans "Pages:" %}
+                    </label>
                     {{ form.pages }}
-                    {% for error in form.pages.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.pages.errors id="desc_pages" %}
                 </div>
             </div>
         </section>
 
         <section class="block">
-            <h2 class="title is-4">{% trans "Book Identifiers" %}</h2>
+            <h2 class="title is-4">
+                {% trans "Book Identifiers" %}
+            </h2>
             <div class="box">
                 <div class="field">
-                    <label class="label" for="id_isbn_13">{% trans "ISBN 13:" %}</label>
+                    <label class="label" for="id_isbn_13">
+                        {% trans "ISBN 13:" %}
+                    </label>
                     {{ form.isbn_13 }}
-                    {% for error in form.isbn_13.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.isbn_13.errors id="desc_isbn_13" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_isbn_10">{% trans "ISBN 10:" %}</label>
+                    <label class="label" for="id_isbn_10">
+                        {% trans "ISBN 10:" %}
+                    </label>
                     {{ form.isbn_10 }}
-                    {% for error in form.isbn_10.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.isbn_10.errors id="desc_isbn_10" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_openlibrary_key">{% trans "Openlibrary ID:" %}</label>
+                    <label class="label" for="id_openlibrary_key">
+                        {% trans "Openlibrary ID:" %}
+                    </label>
                     {{ form.openlibrary_key }}
-                    {% for error in form.openlibrary_key.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.openlibrary_key.errors id="desc_openlibrary_key" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_inventaire_id">{% trans "Inventaire ID:" %}</label>
+                    <label class="label" for="id_inventaire_id">
+                        {% trans "Inventaire ID:" %}
+                    </label>
                     {{ form.inventaire_id }}
-                    {% for error in form.inventaire_id.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.inventaire_id.errors id="desc_inventaire_id" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_oclc_number">{% trans "OCLC Number:" %}</label>
+                    <label class="label" for="id_oclc_number">
+                        {% trans "OCLC Number:" %}
+                    </label>
                     {{ form.oclc_number }}
-                    {% for error in form.oclc_number.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.oclc_number.errors id="desc_oclc_number" %}
                 </div>
 
                 <div class="field">
-                    <label class="label" for="id_asin">{% trans "ASIN:" %}</label>
+                    <label class="label" for="id_asin">
+                        {% trans "ASIN:" %}
+                    </label>
                     {{ form.asin }}
-                    {% for error in form.ASIN.errors %}
-                    <p class="help is-danger">{{ error | escape }}</p>
-                    {% endfor %}
+                    
+                    {% include 'snippets/form_errors.html' with errors_list=form.ASIN.errors id="desc_ASIN" %}
                 </div>
             </div>
         </section>