Merge remote-tracking branch 'origin/pv-2023-11-react-maps' into pv-2023-11-react-maps

Author: vellip

adhocracy4/comments_async/static/comments_async/comment.jsx

@@ -330,7 +330,7 @@ export default class Comment extends React.Component {
                 </time>
               </div>
 
-              <div className="col-1 col-md-1 ms-auto a4-comments__dropdown-container">
+              <div className="col-5 col-md-4 ms-auto a4-comments__dropdown-container">
                 {!this.props.is_deleted && (this.props.has_changing_permission || this.props.has_deleting_permission) &&
                   <CommentManageDropdown
                     id={this.props.id}
@@ -377,39 +377,40 @@ export default class Comment extends React.Component {
               lastEdit={this.state.moderatorFeedback.last_edit}
               feedbackText={this.state.moderatorFeedback.feedback_text}
             />}
+          <div className="a4-comments__action">
+            <div className="row">
+              <div className="col-12 a4-comments__action-bar-container">
+                {this.renderRatingBox()}
+
+                <div className="a4-comments__action-bar">
+                  {((this.allowForm() && !this.props.is_deleted) || (this.props.child_comments && this.props.child_comments.length > 0)) &&
+                    <button className="btn btn--no-border a4-comments__action-bar__btn" type="button" onClick={this.toggleShowComments.bind(this)}>
+                      <a href="#child-comment-form">
+                        <i className={this.state.showChildComments ? 'fa fa-minus' : 'far fa-comment'} aria-hidden="true" /> {getAnswerForm(this.state.showChildComments, this.props.child_comments.length)}
+                      </a>
+                    </button>}
+
+                  {!this.props.is_deleted &&
+                    <a
+                      className="btn btn--no-border a4-comments__action-bar__btn" href={'?comment_' + this.props.id}
+                      data-bs-toggle="modal" data-bs-target={'#share_comment_' + this.props.id}
+                    ><i className="fas fa-share" aria-hidden="true" /> {translated.share}
+                    </a>}
+
+                  {!this.props.is_deleted && this.props.authenticated_user_pk && !this.props.is_users_own_comment &&
+                    <a
+                      className="btn btn--no-border a4-comments__action-bar__btn" href={'#report_comment_' + this.props.id}
+                      data-bs-toggle="modal"
+                    ><i className="fas fa-exclamation-triangle" aria-hidden="true" />{translated.report}
+                    </a>}
 
-          <div className="row">
-            <div className="col-12 a4-comments__action-bar-container">
-              {this.renderRatingBox()}
-
-              <div className="a4-comments__action-bar">
-                {((this.allowForm() && !this.props.is_deleted) || (this.props.child_comments && this.props.child_comments.length > 0)) &&
-                  <button className="btn btn--no-border a4-comments__action-bar__btn" type="button" onClick={this.toggleShowComments.bind(this)}>
-                    <a href="#child-comment-form">
-                      <i className={this.state.showChildComments ? 'fa fa-minus' : 'far fa-comment'} aria-hidden="true" /> {getAnswerForm(this.state.showChildComments, this.props.child_comments.length)}
-                    </a>
-                  </button>}
-
-                {!this.props.is_deleted &&
-                  <a
-                    className="btn btn--no-border a4-comments__action-bar__btn" href={'?comment_' + this.props.id}
-                    data-bs-toggle="modal" data-bs-target={'#share_comment_' + this.props.id}
-                  ><i className="fas fa-share" aria-hidden="true" /> {translated.share}
-                  </a>}
-
-                {!this.props.is_deleted && this.props.authenticated_user_pk && !this.props.is_users_own_comment &&
-                  <a
-                    className="btn btn--no-border a4-comments__action-bar__btn" href={'#report_comment_' + this.props.id}
-                    data-bs-toggle="modal"
-                  ><i className="fas fa-exclamation-triangle" aria-hidden="true" />{translated.report}
-                  </a>}
-
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div className="container">
+        <>
           {this.state.showChildComments
             ? (
               <div className="a4-comments__child--list">
@@ -456,7 +457,7 @@ export default class Comment extends React.Component {
                 </div>
               </div>)
             : null}
-        </div>
+        </>
         <ReportModal
           name={'report_comment_' + this.props.id}
           description={translated.reportTitle}

adhocracy4/comments_async/static/comments_async/comment_box.jsx

@@ -107,7 +107,6 @@ export const CommentBox = (props) => {
   function handleComments (result) {
     const data = result
 
-    translated.entries = django.ngettext('entry', 'entries', data.count)
     setComments(data.results)
     setNextComments(data.next)
     setCommentCount(data.comment_count)
@@ -409,6 +408,13 @@ export const CommentBox = (props) => {
     }
   }
 
+  function translatedEntries (entries) {
+    return django.ngettext(
+      'entry',
+      'entries', entries
+    )
+  }
+
   function translatedEntriesFound (entriesFound) {
     return django.ngettext(
       'entry found for ',
@@ -472,7 +478,7 @@ export const CommentBox = (props) => {
           <div
             className={search === '' ? 'a4-comments__filters__text' : 'd-none'}
           >
-            {commentCount + ' ' + translated.entries}
+            {commentCount + ' ' + translatedEntries(commentCount)}
           </div>
 
           <div
@@ -519,19 +525,15 @@ export const CommentBox = (props) => {
               translated={translated}
               onSearch={handleSearch}
             />
-            {props.withCategories
-              ? (
-                <FilterCategory
-                  translated={translated}
-                  filter={filter}
-                  filterDisplay={filterDisplay}
-                  onClickFilter={handleClickFilter}
-                  commentCategoryChoices={props.commentCategoryChoices}
-                />
-                )
-              : (
-                <div className="col-lg-3" />
-                )}
+            {props.withCategories && (
+              <FilterCategory
+                translated={translated}
+                filter={filter}
+                filterDisplay={filterDisplay}
+                onClickFilter={handleClickFilter}
+                commentCategoryChoices={props.commentCategoryChoices}
+              />
+            )}
             <FilterSort
               translated={translated}
               sort={sort}

adhocracy4/comments_async/static/comments_async/comment_form.jsx

@@ -14,7 +14,6 @@ const translated = {
   yourReply: django.gettext('Your reply'),
   characters: django.gettext(' characters'),
   post: django.gettext('post'),
-  comment: django.gettext('Comment'),
   pleaseComment: django.gettext('Please login to comment'),
   onlyInvited: django.gettext('Only invited users can actively participate.'),
   notAllowedComment: django.gettext('The currently active phase doesn\'t allow to comment.'),
@@ -158,7 +157,7 @@ export default class CommentForm extends React.Component {
             style={textareaStyle}
           />
           <div className="row">
-            <div className="col-12 col-sm-9">
+            <div className="col-12 col-sm-6">
               <p
                 id={'id_char-count' + this.props.commentId}
                 className="a4-comments__char-count"
@@ -173,7 +172,7 @@ export default class CommentForm extends React.Component {
                   orgTermsUrl={this.props.orgTermsUrl}
                 />}
             </div>
-            <div className="d-flex col-12 col-sm-3 justify-content-end">
+            <div className="d-flex col-12 col-sm-6 justify-content-end">
               {cancelButton}
               {actionButton}
             </div>

adhocracy4/dashboard/forms.py

@@ -109,6 +109,15 @@ class Meta:
             "contact_url",
         ]
         required_for_project_publish = ["information"]
+        help_texts = {
+            "information": _(
+                "The project description will be shown in the info-tab. "
+                "If you add an image, please provide an alternate text. "
+                "It serves as a textual description of the image content and is "
+                "read out by screen readers. Describe the image in approx. 80 "
+                "characters. Example: A busy square with people in summer."
+            )
+        }
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -120,6 +129,18 @@ class Meta:
         model = project_models.Project
         fields = ["result"]
         required_for_project_publish = []
+        help_texts = {
+            "result": _(
+                "The results description will be shown in the result-tab. "
+                "Please describe a participation promise beforehand "
+                "(what will happen with the outcome?) and inform afterwards "
+                "about the outcome. If you add an image, please provide "
+                "an alternate text. It serves as a textual description "
+                "of the image content and is read out by screen readers. "
+                "Describe the image in approx. 80 characters. "
+                "Example: A busy square with people in summer."
+            )
+        }
 
 
 class ModuleBasicForm(ModuleDashboardForm):

adhocracy4/images/validators.py

@@ -1,7 +1,9 @@
 import math
 
 import magic
+from bs4 import BeautifulSoup
 from django.core.exceptions import ValidationError
+from django.utils.deconstruct import deconstructible
 from django.utils.translation import gettext_lazy as _
 
 image_max_mb = 5
@@ -74,3 +76,32 @@ def validate_image(
     if errors:
         raise ValidationError(errors)
     return image
+
+
+@deconstructible
+class ImageAltTextValidator:
+    """Validate that if the input contains html img tags that all have the alt
+    attribute set, otherwise raise ValidationError.
+    """
+
+    message = _("Please add an alternative text for all images.")
+    code = "invalid"
+
+    def __init__(self):
+        pass
+
+    def __call__(self, value):
+        """Parse value with BeautifulSoup and check
+        if img tags exist which don't have the alt attribute set"""
+
+        soup = BeautifulSoup(value, "html.parser")
+        img_tags = soup("img", alt=False)
+        if len(img_tags) > 0:
+            raise ValidationError(message=self.message, code=self.code)
+
+    def __eq__(self, other):
+        return (
+            isinstance(other, ImageAltTextValidator)
+            and self.message == other.message
+            and self.code == other.code
+        )

adhocracy4/projects/migrations/0046_alter_project_information_alter_project_result.py

@@ -0,0 +1,32 @@
+# Generated by Django 4.2 on 2024-01-30 10:03
+
+import adhocracy4.images.validators
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4projects", "0045_rename_field_m2mtopics_to_topics"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="project",
+            name="information",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                validators=[adhocracy4.images.validators.ImageAltTextValidator()],
+                verbose_name="Description of your project",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="project",
+            name="result",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                validators=[adhocracy4.images.validators.ImageAltTextValidator()],
+                verbose_name="Results of your project",
+            ),
+        ),
+    ]

adhocracy4/projects/models.py

@@ -16,6 +16,7 @@
 from adhocracy4 import transforms as html_transforms
 from adhocracy4.administrative_districts.models import AdministrativeDistrict
 from adhocracy4.images import fields
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.maps.fields import PointField
 from adhocracy4.models import base
 
@@ -218,23 +219,13 @@ class Project(
         blank=True,
         config_name="collapsible-image-editor",
         verbose_name=_("Description of your project"),
-        help_text=_(
-            "This description should tell participants "
-            "what the goal of the project is, how the project’s "
-            "participation will look like. It will be always visible "
-            "in the „Info“ tab on your project’s page."
-        ),
+        validators=[ImageAltTextValidator()],
     )
     result = CKEditor5Field(
         blank=True,
         config_name="collapsible-image-editor",
         verbose_name=_("Results of your project"),
-        help_text=_(
-            "Here you should explain what the expected outcome of the "
-            "project will be and how you are planning to use the "
-            "results. If the project is finished you should add a "
-            "summary of the results."
-        ),
+        validators=[ImageAltTextValidator()],
     )
     access = EnumField(
         Access, default=Access.PUBLIC, verbose_name=_("Access to the project")

changelog/7274.md

@@ -3,10 +3,14 @@
 - custom migration for iframes to make them work with ckeditor5 (WARNING:
   backing up your database before running is recommended).
 - added dependency beautifulsoup4
+- added an ImageAltTextValidator to enforce alt text on img tags. The validator
+  is used for project information and result.
 
 ### Changed
 
 - replace django-ckeditor with django-ckeditor-5
+- update helptext for project information and result with info about image alt
+  text and move them from the model to the form
 
 ### Removed
 

changelog/_4444.md

@@ -0,0 +1,3 @@
+### Fixed
+
+- fix comment count plurals not updating properly

tests/dashboard/test_form_components.py

@@ -10,6 +10,9 @@
 from adhocracy4.dashboard.components.forms import ProjectDashboardForm
 from adhocracy4.dashboard.components.forms import ProjectFormComponent
 from adhocracy4.dashboard.forms import ProjectBasicForm
+from adhocracy4.dashboard.forms import ProjectInformationForm
+from adhocracy4.dashboard.forms import ProjectResultForm
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.modules import models as module_models
 from adhocracy4.phases import models as phase_models
 from adhocracy4.projects import models as project_models
@@ -270,3 +273,38 @@ class Component(ModuleFormSetComponent):
     phase.start_date = now()
     phase.save()
     assert component.get_progress(module) == (1, 2)
+
+
+@pytest.mark.django_db
+@pytest.mark.parametrize(
+    "form_class, field_name",
+    [(ProjectInformationForm, "information"), (ProjectResultForm, "result")],
+)
+def test_project_form_image_missing_alt_text(form_class, field_name, project_factory):
+    project = project_factory(is_draft=False)
+    form = form_class(
+        instance=project,
+        data={
+            field_name: "my project description <img>",
+        },
+    )
+    assert field_name in form.errors
+    assert form.errors[field_name].data[0].messages[0] == ImageAltTextValidator.message
+    assert not form.is_valid()
+
+
+@pytest.mark.django_db
+@pytest.mark.parametrize(
+    "form_class, field_name",
+    [(ProjectInformationForm, "information"), (ProjectResultForm, "result")],
+)
+def test_project_form_image_has_alt_text(form_class, field_name, project_factory):
+    project = project_factory(is_draft=False)
+    form = form_class(
+        instance=project,
+        data={
+            field_name: "my project description <img alt='descriptive picture'>",
+        },
+    )
+    assert field_name not in form.errors
+    assert form.is_valid()