apps/polls: add question images alt text, UI, feature flag

shn-liqd · web-flow · commit 3a377d109d7e · 2026-06-16T16:48:08.000+02:00
diff --git a/adhocracy4/polls/migrations/0010_question_image_alt_text.py b/adhocracy4/polls/migrations/0010_question_image_alt_text.py
@@ -0,0 +1,23 @@
+# Generated by Django 5.2.8 on 2026-06-16 12:00
+
+import adhocracy4.images.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("a4polls", "0009_question_image"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="question",
+            name="image_alt_text",
+            field=adhocracy4.images.fields.ImageAltTextField(
+                blank=True,
+                image_name="Question image",
+                max_length=80,
+            ),
+        ),
+    ]
diff --git a/adhocracy4/polls/models.py b/adhocracy4/polls/models.py
@@ -5,6 +5,7 @@
 
 from adhocracy4.comments import models as comment_models
 from adhocracy4.images.fields import ConfiguredImageField
+from adhocracy4.images.fields import ImageAltTextField
 from adhocracy4.models.base import GeneratedContentModel
 from adhocracy4.modules import models as module_models
 from adhocracy4.polls import validators
@@ -77,6 +78,8 @@ class Question(models.Model):
         max_length=300,
     )
 
+    image_alt_text = ImageAltTextField(image_name=_("Question image"))
+
     @property
     def has_other_option(self):
         return self.choices.filter(is_other_choice=True).exists()
diff --git a/adhocracy4/polls/serializers.py b/adhocracy4/polls/serializers.py
@@ -47,6 +47,18 @@ def get_count(self, choice: Choice) -> int:
 
 class QuestionSerializer(serializers.ModelSerializer):
     id = serializers.IntegerField(required=False)
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        if not getattr(settings, "A4_POLL_QUESTION_IMAGES", True):
+            for field in [
+                "image_base64",
+                "image_url",
+                "image_alt_text",
+                "image_help_text",
+            ]:
+                self.fields.pop(field, None)
+
     isReadOnly = serializers.SerializerMethodField(method_name="get_is_read_only")
     authenticated = serializers.SerializerMethodField()
     choices = ChoiceSerializer(many=True)
@@ -72,6 +84,7 @@ class QuestionSerializer(serializers.ModelSerializer):
         required=False, allow_blank=True, allow_null=True, write_only=True
     )
     image_url = serializers.SerializerMethodField(method_name="get_image_url")
+    image_help_text = serializers.SerializerMethodField()
 
     class Meta:
         model = Question
@@ -81,6 +94,8 @@ class Meta:
             "help_text",
             "image_base64",
             "image_url",
+            "image_alt_text",
+            "image_help_text",
             "multiple_choice",
             "is_open",
             "is_confidential",
@@ -100,6 +115,9 @@ class Meta:
     def get_image_url(self, question):
         return question.image.url if question.image else None
 
+    def get_image_help_text(self, question):
+        return str(question._meta.get_field("image").help_text)
+
     def _base64_to_image(self, base64_str):
         if "base64," in base64_str:
             format, imgstr = base64_str.split(";base64,")
@@ -349,23 +367,30 @@ def update(self, instance, validated_data):
         for q_id in set(instance.questions.values_list("id", flat=True)) - keep_ids:
             self._delete_question_with_image(q_id, instance)
 
+        question_images_enabled = getattr(settings, "A4_POLL_QUESTION_IMAGES", True)
+
         # Update or create questions
         for weight, q_data in enumerate(questions_data):
+            defaults = {
+                "poll": instance,
+                "label": q_data.get("label", ""),
+                "help_text": q_data.get("help_text", ""),
+                "multiple_choice": q_data.get("multiple_choice", False),
+                "is_open": q_data.get("is_open", False),
+                "is_confidential": q_data.get("is_confidential", False),
+                "weight": weight,
+            }
+            if question_images_enabled:
+                defaults["image_alt_text"] = q_data.get("image_alt_text", "")
+
             question, _ = Question.objects.update_or_create(
                 id=q_data.get("id"),
-                defaults={
-                    "poll": instance,
-                    "label": q_data.get("label", ""),
-                    "help_text": q_data.get("help_text", ""),
-                    "multiple_choice": q_data.get("multiple_choice", False),
-                    "is_open": q_data.get("is_open", False),
-                    "is_confidential": q_data.get("is_confidential", False),
-                    "weight": weight,
-                },
+                defaults=defaults,
             )
 
-            image_data = q_data.get("image") or q_data.get("image_base64")
-            self._handle_question_image(question, image_data)
+            if question_images_enabled:
+                image_data = q_data.get("image") or q_data.get("image_base64")
+                self._handle_question_image(question, image_data)
             if not question.is_open and "choices" in q_data:
                 self._update_choices(q_data["choices"], question)
 
diff --git a/adhocracy4/polls/static/PollDashboard/EditPollManagement.jsx b/adhocracy4/polls/static/PollDashboard/EditPollManagement.jsx
@@ -38,7 +38,8 @@ const createEmptyQuestion = (label = '', helpText = '', isOpen = false) => ({
   choices: isOpen ? [] : [createEmptyChoice(), createEmptyChoice()],
   answers: [],
   image_base64: null,
-  image_url: null
+  image_url: null,
+  image_alt_text: ''
 })
 
 export const EditPollManagement = (props) => {
@@ -76,6 +77,8 @@ export const EditPollManagement = (props) => {
     image_url: imageBase64 || null
   })
 
+  const handleQuestionAltText = (index, altText) => updateQuestion(index, { image_alt_text: altText })
+
   const handleQuestionAppend = (isOpen = false) => {
     setQuestions([...questions, createEmptyQuestion('', '', isOpen)])
   }
@@ -136,13 +139,14 @@ export const EditPollManagement = (props) => {
 
     const payload = {
       questions: questions.map(q => {
-        const { key, answers, imageUrl, image_base64, ...clean } = q
+        const { key, answers, imageUrl, image_base64, image_alt_text, ...clean } = q
 
-        // Only add image field if it was explicitly set
-        if (image_base64 !== undefined) {
-          clean.image = image_base64 === '' ? '' : image_base64
+        if (props.questionImagesEnabled) {
+          if (image_base64 !== undefined) {
+            clean.image = image_base64 === '' ? '' : image_base64
+          }
+          clean.image_alt_text = image_alt_text || ''
         }
-        // Otherwise, omit the field entirely - server will keep existing image
 
         return clean
       }),
@@ -218,7 +222,12 @@ export const EditPollManagement = (props) => {
             }
 
             return question.is_open
-              ? <EditPollOpenQuestion {...commonProps} onImageChange={(image) => handleQuestionImage(index, image)} />
+              ? <EditPollOpenQuestion
+                  {...commonProps}
+                  onImageChange={(image) => handleQuestionImage(index, image)}
+                  onAltTextChange={(text) => handleQuestionAltText(index, text)}
+                  questionImagesEnabled={props.questionImagesEnabled}
+                />
               : <EditPollQuestion
                   {...commonProps}
                   onMultipleChoiceChange={(val) => handleQuestionMultiChoice(index, val)}
@@ -227,6 +236,8 @@ export const EditPollManagement = (props) => {
                   onDeleteChoice={(cIndex) => handleChoiceDelete(index, cIndex)}
                   onAppendChoice={(hasOther) => handleChoiceAppend(index, hasOther)}
                   onImageChange={(image) => handleQuestionImage(index, image)}
+                  onAltTextChange={(text) => handleQuestionAltText(index, text)}
+                  questionImagesEnabled={props.questionImagesEnabled}
                 />
           })}
         </FlipMove>
diff --git a/adhocracy4/polls/static/PollDashboard/EditPollOpenQuestion.jsx b/adhocracy4/polls/static/PollDashboard/EditPollOpenQuestion.jsx
@@ -33,11 +33,16 @@ export const EditPollOpenQuestion = React.forwardRef((props, ref) => {
           {hasHelptext
             ? <HelptextForm id={props.id} question={props.question} onHelptextChange={props.onHelptextChange} errors={props.errors} />
             : null}
-          <QuestionImageUploadButton
-            id={props.id}
-            question={props.question}
-            onImageChange={props.onImageChange}
-          />
+          {props.questionImagesEnabled && (
+            <QuestionImageUploadButton
+              id={props.id}
+              question={props.question}
+              onImageChange={props.onImageChange}
+              helpText={props.question.image_help_text}
+              altText={props.question.image_alt_text}
+              onAltTextChange={props.onAltTextChange}
+            />
+          )}
           <EditPollCheckbox
             id={props.id}
             field="is_confidential"
diff --git a/adhocracy4/polls/static/PollDashboard/EditPollQuestion.jsx b/adhocracy4/polls/static/PollDashboard/EditPollQuestion.jsx
@@ -35,12 +35,17 @@ export const EditPollQuestion = React.forwardRef((props, ref) => {
           {hasHelptext
             ? <HelptextForm id={props.id} question={props.question} onHelptextChange={props.onHelptextChange} errors={props.errors} />
             : null}
-          <QuestionImageUploadButton
-            id={props.id}
-            question={props.question}
-            onImageChange={props.onImageChange}
-            error={props.errors?.image_base64}
-          />
+          {props.questionImagesEnabled && (
+            <QuestionImageUploadButton
+              id={props.id}
+              question={props.question}
+              onImageChange={props.onImageChange}
+              error={props.errors?.image_base64}
+              helpText={props.question.image_help_text}
+              altText={props.question.image_alt_text}
+              onAltTextChange={props.onAltTextChange}
+            />
+          )}
 
           <EditPollCheckbox
             id={props.id}
diff --git a/adhocracy4/polls/static/PollDashboard/QuestionImageUploadButton.jsx b/adhocracy4/polls/static/PollDashboard/QuestionImageUploadButton.jsx
@@ -2,7 +2,7 @@
 import React, { useRef } from 'react'
 import django from 'django'
 
-const QuestionImageUploadButton = ({ id, question, onImageChange, error }) => {
+const QuestionImageUploadButton = ({ id, question, onImageChange, error, helpText, altText, onAltTextChange }) => {
   const fileInputRef = useRef(null)
 
   const handleFileChange = (e) => {
@@ -31,6 +31,8 @@ const QuestionImageUploadButton = ({ id, question, onImageChange, error }) => {
         {django.gettext('Question image')}
       </label>
 
+      {helpText && <div className="form-hint">{helpText}</div>}
+
       <div className={`image-upload-container ${error ? 'is-invalid' : ''}`}>
         <span className="image-upload-text">
           {question.image_url
@@ -84,6 +86,22 @@ const QuestionImageUploadButton = ({ id, question, onImageChange, error }) => {
         </div>
       )}
 
+      {question.image_url && (
+        <div className="form-group">
+          <label htmlFor={`id_questions-${id}-image_alt_text`}>
+            {django.gettext('Alt text')}
+          </label>
+          <input
+            type="text"
+            id={`id_questions-${id}-image_alt_text`}
+            className="form-control"
+            value={altText || ''}
+            onChange={(e) => onAltTextChange(e.target.value)}
+            maxLength={80}
+          />
+        </div>
+      )}
+
       <input
         ref={fileInputRef}
         type="file"
diff --git a/adhocracy4/polls/static/PollDetail/PollChoice.jsx b/adhocracy4/polls/static/PollDetail/PollChoice.jsx
@@ -73,10 +73,12 @@ export const PollChoice = (props) => {
         <legend className="poll__question-legend">
           <h3>{props.question.label}</h3>
         </legend>
-        <QuestionImage
-          imageUrl={props.question.image_url}
-          alt={props.question.label}
-        />
+        {props.questionImagesEnabled && (
+          <QuestionImage
+            imageUrl={props.question.image_url}
+            alt={props.question.image_alt_text || props.question.label}
+          />
+        )}
         {questionHelpText}
         {multiHelpText}
         {props.question.is_confidential && <ConfidentialNotice />}
diff --git a/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx b/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx
@@ -7,7 +7,8 @@ export const PollOpenQuestion = ({
   question,
   allowUnregisteredUsers,
   onOpenChange,
-  errors
+  errors,
+  questionImagesEnabled
 }) => {
   const getUserOpenAnswer = () => {
     const userAnswerId = question.userAnswer
@@ -36,10 +37,12 @@ export const PollOpenQuestion = ({
     <div className="poll poll--question">
       <h3>{question.label}</h3>
       {questionHelpText}
-      <QuestionImage
-        imageUrl={question.image_url}
-        alt={question.label}
-      />
+      {questionImagesEnabled && (
+        <QuestionImage
+          imageUrl={question.image_url}
+          alt={question.image_alt_text || question.label}
+        />
+      )}
       {question.is_confidential && <ConfidentialNotice />}
       <TextareaWithCounter
         value={userAnswer}
diff --git a/adhocracy4/polls/static/PollDetail/PollQuestions.jsx b/adhocracy4/polls/static/PollDetail/PollQuestions.jsx
@@ -430,6 +430,7 @@ class PollQuestions extends React.Component {
                           onOpenChange={(questionId, voteData) =>
                             this.handleVoteOpen(questionId, voteData)}
                           errors={this.state.errors}
+                          questionImagesEnabled={this.props.questionImagesEnabled}
                         />
                         )
                       : (
@@ -444,6 +445,7 @@ class PollQuestions extends React.Component {
                           onOtherChange={(questionId, voteAnswer, otherChoice) =>
                             this.handleVoteOther(questionId, voteAnswer, otherChoice)}
                           errors={this.state.errors}
+                          questionImagesEnabled={this.props.questionImagesEnabled}
                         />
                         )
                   )}
diff --git a/adhocracy4/polls/static/PollDetail/QuestionImage.jsx b/adhocracy4/polls/static/PollDetail/QuestionImage.jsx
@@ -20,6 +20,7 @@ const QuestionImage = ({ imageUrl, alt }) => {
           setIsExpanded(!isExpanded)
         }
       }}
+      style={{ cursor: isExpanded ? 'zoom-out' : 'zoom-in' }}
     >
       <img
         src={imageUrl}
diff --git a/adhocracy4/polls/static/__tests__/__testdata__/QUESTION_OBJECT.js b/adhocracy4/polls/static/__tests__/__testdata__/QUESTION_OBJECT.js
@@ -6,6 +6,9 @@ export const QUESTION_OBJECT = {
   is_open: false,
   isReadOnly: false,
   authenticated: true,
+  image_url: null,
+  image_alt_text: '',
+  image_help_text: 'The image will be shown with the question. It must be min. 1500 pixel wide and 500 pixel tall. Allowed file formats are jpeg, png, webp. The file size should be max. 10 MB.',
   choices: [
     {
       id: 1,
diff --git a/adhocracy4/polls/templatetags/react_polls.py b/adhocracy4/polls/templatetags/react_polls.py
@@ -11,7 +11,11 @@
 
 @register.simple_tag
 def react_polls(poll: Poll):
-    attributes = {"pollId": poll.pk, "captchaUrl": getattr(settings, "CAPTCHA_URL", "")}
+    attributes = {
+        "pollId": poll.pk,
+        "captchaUrl": getattr(settings, "CAPTCHA_URL", ""),
+        "questionImagesEnabled": getattr(settings, "A4_POLL_QUESTION_IMAGES", True),
+    }
 
     return format_html(
         '<div data-a4-widget="polls" data-attributes="{attributes}"></div>',
@@ -27,6 +31,7 @@ def react_poll_form(poll, reload_on_success=False):
         "enableUnregisteredUsers": getattr(
             settings, "A4_POLL_ENABLE_UNREGISTERED_USERS", False
         ),
+        "questionImagesEnabled": getattr(settings, "A4_POLL_QUESTION_IMAGES", True),
     }
     reload_on_success = json.dumps(reload_on_success)
 
