From 20c9ab0f65588175e2c9abb40dd57efb6de18594 Mon Sep 17 00:00:00 2001
From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:43:26 +0100
Subject: [PATCH] polls: refactor PollDetail components

---
 .../polls/static/PollDetail/CharCounter.jsx   |  13 +-
 .../polls/static/PollDetail/ChoiceRow.jsx     |  97 +++
 .../polls/static/PollDetail/PollChoice.jsx    |  96 +++
 .../static/PollDetail/PollOpenQuestion.jsx    |  61 +-
 .../polls/static/PollDetail/PollQuestion.jsx  | 170 -----
 .../polls/static/PollDetail/PollQuestions.jsx |  73 +-
 .../static/PollDetail/TextareaWithCounter.jsx |  54 ++
 .../static/__tests__/CharCounter.jest.jsx     |   2 +-
 .../polls/static/__tests__/ChoiceRow.jest.jsx |  97 +++
 .../__tests__/EditPollOpenQuestion.jest.jsx   |   4 +-
 .../__tests__/EditPollQuestion.jest.jsx       |   8 +-
 .../static/__tests__/PollQuestion.jest.jsx    | 130 ----
 .../__snapshots__/CharCounter.jest.jsx.snap   |  14 +-
 .../__snapshots__/PollQuestion.jest.jsx.snap  | 649 ------------------
 .../__tests__/__testdata__/QUESTION_OBJECT.js |  37 +-
 changelog/8462.md                             |   9 +
 16 files changed, 476 insertions(+), 1038 deletions(-)
 create mode 100644 adhocracy4/polls/static/PollDetail/ChoiceRow.jsx
 create mode 100644 adhocracy4/polls/static/PollDetail/PollChoice.jsx
 delete mode 100644 adhocracy4/polls/static/PollDetail/PollQuestion.jsx
 create mode 100644 adhocracy4/polls/static/PollDetail/TextareaWithCounter.jsx
 create mode 100644 adhocracy4/polls/static/__tests__/ChoiceRow.jest.jsx
 delete mode 100644 adhocracy4/polls/static/__tests__/PollQuestion.jest.jsx
 delete mode 100644 adhocracy4/polls/static/__tests__/__snapshots__/PollQuestion.jest.jsx.snap
 create mode 100644 changelog/8462.md

diff --git a/adhocracy4/polls/static/PollDetail/CharCounter.jsx b/adhocracy4/polls/static/PollDetail/CharCounter.jsx
index b2434f295..e287b2a02 100644
--- a/adhocracy4/polls/static/PollDetail/CharCounter.jsx
+++ b/adhocracy4/polls/static/PollDetail/CharCounter.jsx
@@ -1,9 +1,16 @@
 import React from 'react'
+import django from 'django'
 
-export const CharCounter = (props) => {
-  const current = props.value.length
+const translated = {
+  characters: django.gettext('characters')
+}
+
+export const CharCounter = ({ value, max, id }) => {
+  const current = value.length
 
   return (
-    <span>{current}/{props.max}</span>
+    <span className="a4-char-counter" id={id}>
+      {current}/{max} {translated.characters}
+    </span>
   )
 }
diff --git a/adhocracy4/polls/static/PollDetail/ChoiceRow.jsx b/adhocracy4/polls/static/PollDetail/ChoiceRow.jsx
new file mode 100644
index 000000000..c3d65582a
--- /dev/null
+++ b/adhocracy4/polls/static/PollDetail/ChoiceRow.jsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+import django from 'django'
+import { TextareaWithCounter } from './TextareaWithCounter'
+
+const translated = {
+  other: django.gettext('other')
+}
+
+const ChoiceInput = ({
+  type,
+  choice,
+  checked,
+  onInputChange,
+  disabled
+}) => (
+  <input
+    className="poll-row__radio"
+    type={type}
+    id={'id_choice-' + choice.id + '-' + (type === 'radio' ? 'single' : 'multiple')}
+    value={choice.id}
+    checked={checked}
+    onChange={(event) => onInputChange(event, choice.is_other_choice)}
+    disabled={disabled}
+    aria-describedby={'textarea-with-counter-' + choice.id}
+  />
+)
+
+// eslint-disable-next-line react/display-name
+export const ChoiceRow = React.memo(({
+  choice,
+  checked,
+  onInputChange,
+  type,
+  disabled,
+  otherChoiceAnswer,
+  onOtherChange,
+  isAuthenticated,
+  isReadOnly,
+  errors
+}) => {
+  const [textareaValue, setTextareaValue] = useState(otherChoiceAnswer)
+  const [showTextarea, setShowTextarea] = useState(false)
+
+  // When the choice is selected or changed, update the textarea visibility
+  useEffect(() => {
+    if (checked && choice.is_other_choice) {
+      setShowTextarea(true)
+    } else {
+      setShowTextarea(false)
+    }
+  }, [checked, choice.is_other_choice])
+
+  const handleChange = (event, isOtherChoice) => {
+    // Update the checkbox/radio button state
+    onInputChange(event, isOtherChoice)
+
+    // If the "Other" option is selected, show the textarea
+    if (isOtherChoice && event.target.checked) {
+      setShowTextarea(true)
+    } else {
+      setShowTextarea(false)
+    }
+  }
+
+  const handleTextareaChange = (event) => {
+    // Preserve the value of the textarea even if options are changed
+    setTextareaValue(event.target.value)
+    onOtherChange(event)
+  }
+
+  return (
+    <label
+      className={(choice.is_other_choice ? 'poll__choice--other' : 'poll-row radio')}
+      htmlFor={'id_choice-' + choice.id + '-' + (type === 'radio' ? 'single' : 'multiple')}
+    >
+      <ChoiceInput
+        type={type}
+        choice={choice}
+        checked={checked}
+        onInputChange={handleChange}
+        disabled={disabled}
+      />
+      <span className={'radio__text' + (type === 'checkbox' ? ' radio__text--checkbox' : '')}>
+        {choice.is_other_choice ? translated.other : choice.label}
+      </span>
+      {showTextarea && (
+        <TextareaWithCounter
+          id={choice.id}
+          value={textareaValue} // Always use the local state value
+          onChange={handleTextareaChange}
+          disabled={!isAuthenticated || isReadOnly}
+          error={errors}
+        />
+      )}
+    </label>
+  )
+})
diff --git a/adhocracy4/polls/static/PollDetail/PollChoice.jsx b/adhocracy4/polls/static/PollDetail/PollChoice.jsx
new file mode 100644
index 000000000..e79bc3669
--- /dev/null
+++ b/adhocracy4/polls/static/PollDetail/PollChoice.jsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react'
+import django from 'django'
+import { ChoiceRow } from './ChoiceRow'
+
+const translated = {
+  multiple: django.gettext('Multiple answers are possible.')
+}
+
+export const PollChoice = (props) => {
+  const getUserAnswer = () => {
+    const userAnswerId = props.question.other_choice_user_answer
+    const userAnswer = props.question.other_choice_answers.find(oc => oc.vote_id === userAnswerId)
+    return props.question.other_choice_answer
+      ? props.question.other_choice_answer
+      : ((userAnswerId && userAnswer)
+          ? userAnswer.answer
+          : ''
+        )
+  }
+
+  const [userChoices, setUserChoices] = useState([])
+  const [otherChoiceAnswer, setOtherChoiceAnswer] = useState(getUserAnswer())
+  const [errors, setErrors] = useState()
+
+  const multiHelpText = props.question.multiple_choice ? <div className="poll__help-text">{translated.multiple}</div> : null
+  const questionHelpText = props.question.help_text ? <div className="poll__help-text">{props.question.help_text}</div> : null
+  const userAllowedVote = props.question.authenticated || props.allowUnregisteredUsers
+
+  useEffect(() => {
+    setUserChoices(props.question.userChoices || [])
+    setErrors(props.errors)
+  }, [props.question.userChoices, props.errors])
+
+  const findOtherChoice = () => {
+    return props.question.choices.find(c => c.is_other_choice)
+  }
+
+  const handleSingleChange = (event, isOther) => {
+    const choiceId = parseInt(event.target.value)
+    setUserChoices([choiceId])
+    props.onSingleChange(props.question.id, choiceId)
+    if (!isOther) {
+      setOtherChoiceAnswer('')
+      props.onOtherChange(props.question.id, '', findOtherChoice())
+    }
+  }
+
+  const handleMultiChange = (event, isOther) => {
+    const choiceId = parseInt(event.target.value)
+    const newChoices = userChoices.includes(choiceId)
+      ? userChoices.filter(id => id !== choiceId)
+      : [...userChoices, choiceId]
+
+    setUserChoices(newChoices)
+    props.onMultiChange(props.question.id, choiceId)
+
+    if (!newChoices.includes(findOtherChoice()?.id)) {
+      setOtherChoiceAnswer('')
+      props.onOtherChange(props.question.id, '', findOtherChoice())
+    }
+  }
+
+  const handleOtherChange = (event) => {
+    const otherAnswer = event.target.value
+    setOtherChoiceAnswer(otherAnswer)
+    props.onOtherChange(props.question.id, otherAnswer)
+  }
+
+  return (
+    <div className="poll poll--question">
+      <h3>{props.question.label}</h3>
+      {questionHelpText}
+      {multiHelpText}
+      <div className="poll__rows">
+        {props.question.choices.map((choice) => {
+          const checked = userChoices.indexOf(choice.id) !== -1
+          return (
+            <ChoiceRow
+              key={choice.id}
+              choice={choice}
+              checked={checked}
+              onInputChange={props.question.multiple_choice ? handleMultiChange : handleSingleChange}
+              type={props.question.multiple_choice ? 'checkbox' : 'radio'}
+              disabled={!userAllowedVote || props.question.isReadOnly}
+              otherChoiceAnswer={otherChoiceAnswer}
+              onOtherChange={handleOtherChange}
+              isAuthenticated={props.question.authenticated}
+              isReadOnly={props.question.isReadOnly}
+              errors={errors}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx b/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx
index dc7d40e73..188a89ba4 100644
--- a/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx
+++ b/adhocracy4/polls/static/PollDetail/PollOpenQuestion.jsx
@@ -1,48 +1,47 @@
 import React, { useState } from 'react'
-import { CharCounter } from './CharCounter'
-
-export const PollOpenQuestion = (props) => {
-  // | Function to define state
+import { TextareaWithCounter } from './TextareaWithCounter'
 
+export const PollOpenQuestion = ({
+  question,
+  allowUnregisteredUsers,
+  onOpenChange,
+  errors
+}) => {
   const getUserOpenAnswer = () => {
-    const userAnswerId = props.question.userAnswer
-    const userAnswer = props.question.answers.find(oa => oa.id === userAnswerId)
-    return props.question.open_answer
-      ? props.question.open_answer
-      : ((userAnswerId && userAnswer)
-          ? userAnswer.answer
-          : ''
-        )
+    const userAnswerId = question.userAnswer
+    const userAnswer = question.answers.find((oa) => oa.id === userAnswerId)
+    return question.open_answer
+      ? question.open_answer
+      : userAnswerId && userAnswer
+        ? userAnswer.answer
+        : ''
   }
 
   const [userAnswer, setUserAnswer] = useState(getUserOpenAnswer())
-  const questionHelpText = props.question.help_text ? <div className="poll__help-text">{props.question.help_text}</div> : null
-  const maxlength = 750
-  const userAllowedVote = props.question.authenticated || props.allowUnregisteredUsers
+  const questionHelpText = question.help_text
+    ? (
+      <div className="poll__help-text">{question.help_text}</div>
+      )
+    : null
+  const userAllowedVote = question.authenticated || allowUnregisteredUsers
 
   const handleOpenChange = (event) => {
     setUserAnswer(event.target.value)
-    props.onOpenChange(props.question.id, event.target.value)
+    onOpenChange(question.id, event.target.value)
   }
 
   return (
     <div className="poll poll--question">
-      <h2>{props.question.label}</h2>
+      <h3>{question.label}</h3>
       {questionHelpText}
-      <div className="poll__rows">
-        <textarea
-          className="form-control"
-          name="question"
-          id={'id_choice-' + props.question.id + '-open'}
-          value={userAnswer}
-          disabled={!userAllowedVote || props.question.isReadOnly}
-          onChange={(event) => { handleOpenChange(event) }}
-          maxLength={maxlength}
-        />
-        <div className="poll__char-counter">
-          <CharCounter value={userAnswer} max={maxlength} />
-        </div>
-      </div>
+      <TextareaWithCounter
+        value={userAnswer}
+        onChange={handleOpenChange}
+        disabled={!userAllowedVote || question.isReadOnly}
+        error={errors}
+        id={question.id}
+        questionType="open"
+      />
     </div>
   )
 }
diff --git a/adhocracy4/polls/static/PollDetail/PollQuestion.jsx b/adhocracy4/polls/static/PollDetail/PollQuestion.jsx
deleted file mode 100644
index c5661860f..000000000
--- a/adhocracy4/polls/static/PollDetail/PollQuestion.jsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import django from 'django'
-import { CharCounter } from './CharCounter'
-import FormFieldError from '../../../static/FormFieldError'
-
-const translated = {
-  multiple: django.gettext('Multiple answers are possible.'),
-  other: django.gettext('other')
-}
-
-export const PollQuestion = (props) => {
-  // | Function to define state
-
-  const getUserAnswer = () => {
-    const userAnswerId = props.question.other_choice_user_answer
-    const userAnswer = props.question.other_choice_answers.find(oc => oc.vote_id === userAnswerId)
-    return props.question.other_choice_answer
-      ? props.question.other_choice_answer
-      : ((userAnswerId && userAnswer)
-          ? userAnswer.answer
-          : ''
-        )
-  }
-
-  const [userChoices, setUserChoices] = useState([])
-  const [otherChoiceAnswer, setOtherChoiceAnswer] = useState(getUserAnswer())
-  const [errors, setErrors] = useState()
-  const multiHelpText = props.question.multiple_choice ? <div className="poll__help-text">{translated.multiple}</div> : null
-  const questionHelpText = props.question.help_text ? <div className="poll__help-text">{props.question.help_text}</div> : null
-  const maxlength = 250
-  const userAllowedVote = props.question.authenticated || props.allowUnregisteredUsers
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    setUserChoices(props.question.userChoices || [])
-    setErrors(props.errors)
-  })
-
-  const handleSingleChange = (event, isOther) => {
-    const choiceId = parseInt(event.target.value)
-    setUserChoices([choiceId])
-    props.onSingleChange(props.question.id, choiceId)
-    if (!isOther) {
-      setOtherChoiceAnswer('')
-      props.onOtherChange(props.question.id, '', findOtherChoice())
-    }
-  }
-
-  const handleMultiChange = (event, isOther) => {
-    const choiceId = parseInt(event.target.value)
-    setUserChoices(prevState => [...prevState, choiceId])
-    setOtherChoiceAnswer(otherChoiceAnswer)
-    props.onMultiChange(props.question.id, choiceId)
-    if (isOther) {
-      setOtherChoiceAnswer('')
-    } else {
-      props.onOtherChange(props.question.id, otherChoiceAnswer, findOtherChoice())
-    }
-  }
-
-  const handleOtherChange = (event) => {
-    const otherAnswer = event.target.value
-    setOtherChoiceAnswer(otherAnswer)
-    props.onOtherChange(props.question.id, otherAnswer)
-  }
-
-  const findOtherChoice = () => {
-    return props.question.choices.find(c => c.is_other_choice)
-  }
-
-  return (
-    <form>
-      <div className="poll poll--question">
-        <h2>{props.question.label}</h2>
-        {questionHelpText}
-        {multiHelpText}
-        <div className="poll__rows">
-          {
-            props.question.choices.map((choice, i) => {
-              const checked = userChoices.indexOf(choice.id) !== -1
-
-              if (!props.question.multiple_choice) {
-                return (
-                  <label className="poll-row radio" key={choice.id} htmlFor={'id_choice-' + choice.id + '-single'}>
-                    <input
-                      className="poll-row__radio"
-                      type="radio"
-                      name="question"
-                      id={'id_choice-' + choice.id + '-single'}
-                      value={choice.id}
-                      checked={checked}
-                      onChange={(event) => { handleSingleChange(event, choice.is_other_choice) }}
-                      disabled={!userAllowedVote || props.question.isReadOnly}
-                    />
-                    <span className="radio__text">{choice.is_other_choice ? translated.other : choice.label}</span>
-
-                    {choice.is_other_choice &&
-                      <>
-                        <textarea
-                          className="form-control"
-                          name="question"
-                          value={otherChoiceAnswer}
-                          id={'id_choice-' + choice.id + '-other'}
-                          onChange={(event) => { handleOtherChange(event) }}
-                          disabled={!userAllowedVote || props.question.isReadOnly || !checked}
-                          maxLength={maxlength}
-                          aria-invalid={props.errors ? 'true' : 'false'}
-                          aria-describedby={props.errors && 'id_error-' + props.id}
-                        />
-                        {checked
-                          ? (
-                            <>
-                              <div className="poll__char-counter">
-                                <CharCounter value={otherChoiceAnswer} max={maxlength} />
-                              </div>
-                              <FormFieldError id={'id_error-' + choice.id} error={errors} field={choice.id} />
-                            </>
-                            )
-                          : null}
-                      </>}
-                  </label>
-                )
-              } else {
-                return (
-                  <label className="poll-row radio" key={choice.id} htmlFor={'id_choice-' + choice.id + '-multiple'}>
-                    <input
-                      className="poll-row__radio"
-                      type="checkbox"
-                      name="question"
-                      id={'id_choice-' + choice.id + '-multiple'}
-                      value={choice.id}
-                      checked={checked}
-                      onChange={(event) => { handleMultiChange(event, choice.is_other_choice) }}
-                      disabled={!userAllowedVote || props.question.isReadOnly}
-                    />
-                    <span className="radio__text radio__text--checkbox">{choice.is_other_choice ? translated.other : choice.label}</span>
-                    {choice.is_other_choice &&
-                      <>
-                        <textarea
-                          className="form-control"
-                          name="question"
-                          id={'id_choice-' + choice.id + '-other'}
-                          value={otherChoiceAnswer}
-                          onChange={(event) => { handleOtherChange(event) }}
-                          disabled={!userAllowedVote || props.question.isReadOnly || !checked}
-                          maxLength={maxlength}
-                          aria-invalid={props.errors ? 'true' : 'false'}
-                          aria-describedby={props.errors && 'id_error-' + props.id}
-                        />
-                        {checked
-                          ? (
-                            <>
-                              <div className="poll__char-counter">
-                                <CharCounter value={otherChoiceAnswer} max={maxlength} />
-                              </div>
-                              <FormFieldError id={'id_error-' + choice.id} error={errors} field={choice.id} />
-                            </>
-                            )
-                          : null}
-                      </>}
-                  </label>
-                )
-              }
-            })
-          }
-        </div>
-      </div>
-    </form>
-  )
-}
diff --git a/adhocracy4/polls/static/PollDetail/PollQuestions.jsx b/adhocracy4/polls/static/PollDetail/PollQuestions.jsx
index ae3ed4d16..9ec88c944 100644
--- a/adhocracy4/polls/static/PollDetail/PollQuestions.jsx
+++ b/adhocracy4/polls/static/PollDetail/PollQuestions.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import django from 'django'
 
-import { PollQuestion } from './PollQuestion'
+import { PollChoice } from './PollChoice'
 import { PollOpenQuestion } from './PollOpenQuestion'
 import PollResults from './PollResults'
 
@@ -383,7 +383,7 @@ class PollQuestions extends React.Component {
         <>
           {this.state.showResults
             ? (
-              <div className="pollquestionlist-container">
+              <div className="poll__preliminary-results">
                 {this.state.result.map((question, idx) => (
                   <PollResults key={idx} question={question} />
                 ))}
@@ -396,32 +396,35 @@ class PollQuestions extends React.Component {
               )
             : (
               <div className="pollquestionlist-container">
-                {this.state.questions.map((question, idx) =>
-                  question.is_open
-                    ? (
-                      <PollOpenQuestion
-                        key={idx}
-                        allowUnregisteredUsers={this.state.allowUnregisteredUsers}
-                        question={question}
-                        onOpenChange={(questionId, voteData) =>
-                          this.handleVoteOpen(questionId, voteData)}
-                      />
-                      )
-                    : (
-                      <PollQuestion
-                        key={idx}
-                        question={question}
-                        allowUnregisteredUsers={this.state.allowUnregisteredUsers}
-                        onSingleChange={(questionId, voteData) =>
-                          this.handleVoteSingle(questionId, voteData)}
-                        onMultiChange={(questionId, voteData) =>
-                          this.handleVoteMulti(questionId, voteData)}
-                        onOtherChange={(questionId, voteAnswer, otherChoice) =>
-                          this.handleVoteOther(questionId, voteAnswer, otherChoice)}
-                        errors={this.state.errors}
-                      />
-                      )
-                )}
+                <form>
+                  {this.state.questions.map((question, idx) =>
+                    question.is_open
+                      ? (
+                        <PollOpenQuestion
+                          key={idx}
+                          allowUnregisteredUsers={this.state.allowUnregisteredUsers}
+                          question={question}
+                          onOpenChange={(questionId, voteData) =>
+                            this.handleVoteOpen(questionId, voteData)}
+                          errors={this.state.errors}
+                        />
+                        )
+                      : (
+                        <PollChoice
+                          key={idx}
+                          question={question}
+                          allowUnregisteredUsers={this.state.allowUnregisteredUsers}
+                          onSingleChange={(questionId, voteData) =>
+                            this.handleVoteSingle(questionId, voteData)}
+                          onMultiChange={(questionId, voteData) =>
+                            this.handleVoteMulti(questionId, voteData)}
+                          onOtherChange={(questionId, voteAnswer, otherChoice) =>
+                            this.handleVoteOther(questionId, voteAnswer, otherChoice)}
+                          errors={this.state.errors}
+                        />
+                        )
+                  )}
+                </form>
                 <Alert onClick={() => this.removeAlert()} {...this.state.alert} />
 
                 {this.isReadOnly()
@@ -448,14 +451,12 @@ class PollQuestions extends React.Component {
                       {this.state.allowUnregisteredUsers &&
                   this.state.questions.length > 0 &&
                   !this.state.questions[0].authenticated && (
-                    <>
-                      <Captcha
-                        onChange={(val) => this.setState({ captcha: val })}
-                        apiUrl={this.props.captchaUrl}
-                        name="id_captcheck"
-                        refresh={this.state.refreshCaptcha}
-                      />
-                    </>
+                    <Captcha
+                      onChange={(val) => this.setState({ captcha: val })}
+                      apiUrl={this.props.captchaUrl}
+                      name="id_captcheck"
+                      refresh={this.state.refreshCaptcha}
+                    />
                       )}
                       <div className="poll poll__btn--wrapper">
                         {this.buttonVote}
diff --git a/adhocracy4/polls/static/PollDetail/TextareaWithCounter.jsx b/adhocracy4/polls/static/PollDetail/TextareaWithCounter.jsx
new file mode 100644
index 000000000..d6dbdc8f3
--- /dev/null
+++ b/adhocracy4/polls/static/PollDetail/TextareaWithCounter.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import django from 'django'
+import { CharCounter } from './CharCounter'
+import FormFieldError from '../../../static/FormFieldError'
+
+const translated = {
+  specify: django.gettext('Please specify:')
+}
+
+export const TextareaWithCounter = ({ value, onChange, disabled, error, id, questionType = 'other' }) => {
+  const handleDynamicHeight = (textarea) => {
+    if (!textarea) return
+    textarea.style.height = 'auto' // Reset height
+    textarea.style.height = textarea.scrollHeight + 'px' // Adjust height based on content
+  }
+
+  const handleTextareaSize = (questionType) => {
+    const rowSize = questionType === 'open' ? 6 : 3
+    const maxLength = questionType === 'open' ? 750 : 250
+
+    return { rowSize, maxLength }
+  }
+  const { rowSize, maxLength } = handleTextareaSize(questionType)
+
+  const handleInputChange = (e) => {
+    onChange(e)
+    handleDynamicHeight(e.target)
+  }
+
+  // Only add aria-invalid when there's an error for the specific id:
+  const ariaInvalid = error && error[id] && error[id].length > 0 ? 'true' : 'false'
+
+  return (
+    <div id={'textarea-with-counter-' + id} className="a4-textarea-with-counter" role="region">
+      <label className="a4-sr-only" htmlFor={'id_choice-' + id + '-' + questionType}>
+        {translated.specify}
+      </label>
+      <textarea
+        className="a4-textarea-with-counter__textarea"
+        name="question"
+        id={'id_choice-' + id + '-' + questionType}
+        value={value}
+        maxLength={maxLength}
+        onChange={handleInputChange}
+        disabled={disabled}
+        aria-invalid={ariaInvalid}
+        aria-describedby={'id_error-' + id + ' id_char-count-' + id}
+        rows={rowSize}
+      />
+      <CharCounter value={value} max={maxLength} id={'id_char-count-' + id} />
+      {error && <FormFieldError id={'id_error-' + id} error={error} field={id} />}
+    </div>
+  )
+}
diff --git a/adhocracy4/polls/static/__tests__/CharCounter.jest.jsx b/adhocracy4/polls/static/__tests__/CharCounter.jest.jsx
index 9ecc2f453..ddb2dfc73 100644
--- a/adhocracy4/polls/static/__tests__/CharCounter.jest.jsx
+++ b/adhocracy4/polls/static/__tests__/CharCounter.jest.jsx
@@ -6,6 +6,6 @@ import { render } from '@testing-library/react'
 import { CharCounter } from '../PollDetail/CharCounter'
 
 test('<CharCounter> component renders correctly', () => {
-  const tree = render(<CharCounter value="random" max={25} />)
+  const tree = render(<CharCounter value="random" max={25} id="id_char-count-2" />)
   expect(tree).toMatchSnapshot()
 })
diff --git a/adhocracy4/polls/static/__tests__/ChoiceRow.jest.jsx b/adhocracy4/polls/static/__tests__/ChoiceRow.jest.jsx
new file mode 100644
index 000000000..036380e61
--- /dev/null
+++ b/adhocracy4/polls/static/__tests__/ChoiceRow.jest.jsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChoiceRow } from '../PollDetail/ChoiceRow'
+
+// Mocking the django translation function (gettext)
+jest.mock('django', () => ({
+  gettext: (key) => key // Just return the key as the translation
+}))
+
+// Mock of the TextareaWithCounter component
+jest.mock('../PollDetail/TextareaWithCounter', () => ({
+  TextareaWithCounter: ({ value, onChange }) => (
+    <textarea value={value} onChange={onChange} data-testid="textarea-with-counter-2" />
+  )
+}))
+
+describe('ChoiceRow', () => {
+  const mockOnInputChange = jest.fn()
+  const mockOnOtherChange = jest.fn()
+
+  const defaultProps = {
+    choice: {
+      id: 1,
+      label: 'Option 1',
+      is_other_choice: false
+    },
+    checked: false,
+    onInputChange: mockOnInputChange,
+    type: 'radio',
+    disabled: false,
+    otherChoiceAnswer: '',
+    onOtherChange: mockOnOtherChange,
+    isAuthenticated: true,
+    isReadOnly: false,
+    errors: null
+  }
+
+  it('should render the ChoiceRow correctly', () => {
+    render(<ChoiceRow {...defaultProps} />)
+
+    // Check if the label and input are rendered
+    expect(screen.getByText('Option 1')).toBeInTheDocument()
+    expect(screen.getByRole('radio')).toBeInTheDocument()
+  })
+
+  it('should show textarea when "Other" option is selected', () => {
+    const otherChoiceProps = {
+      ...defaultProps,
+      choice: {
+        id: 2,
+        label: 'Other',
+        is_other_choice: true
+      }
+    }
+
+    render(<ChoiceRow {...otherChoiceProps} />)
+
+    // Initially, textarea should not be visible
+    expect(screen.queryByTestId('textarea-with-counter-2')).toBeNull()
+
+    // Simulate selecting the "Other" radio button
+    fireEvent.click(screen.getByRole('radio'))
+
+    // Textarea should now be visible
+    expect(screen.getByTestId('textarea-with-counter-2')).toBeInTheDocument()
+  })
+
+  it('should update textarea value on change', () => {
+    const otherChoiceProps = {
+      ...defaultProps,
+      choice: {
+        id: 2,
+        label: 'Other',
+        is_other_choice: true
+      }
+    }
+
+    render(<ChoiceRow {...otherChoiceProps} />)
+
+    fireEvent.click(screen.getByRole('radio')) // Selecting the "Other" option
+
+    // Get the textarea and simulate typing
+    const textarea = screen.getByTestId('textarea-with-counter-2')
+    fireEvent.change(textarea, { target: { value: 'New answer' } })
+
+    // Check that the textarea value was updated
+    expect(textarea.value).toBe('New answer')
+    expect(mockOnOtherChange).toHaveBeenCalledWith(expect.anything()) // Check if the onOtherChange function was called
+  })
+
+  it('should not show textarea when "Other" option is not selected', () => {
+    render(<ChoiceRow {...defaultProps} />)
+
+    // Check if the textarea is not shown when the "Other" option is not selected
+    expect(screen.queryByTestId('textarea')).toBeNull()
+  })
+})
diff --git a/adhocracy4/polls/static/__tests__/EditPollOpenQuestion.jest.jsx b/adhocracy4/polls/static/__tests__/EditPollOpenQuestion.jest.jsx
index 819375941..87ff2d817 100644
--- a/adhocracy4/polls/static/__tests__/EditPollOpenQuestion.jest.jsx
+++ b/adhocracy4/polls/static/__tests__/EditPollOpenQuestion.jest.jsx
@@ -16,7 +16,7 @@ describe('<EditPollOpenQuestion> with...', () => {
         onLabelChange={(label) => onTextChangeFn()}
       />
     )
-    const questionTextArea = tree.container.querySelector('#id_questions-1-name')
+    const questionTextArea = tree.container.querySelector('#id_questions-6-name')
     fireEvent.change(questionTextArea, { target: { value: 'question text' } })
     expect(onTextChangeFn).toHaveBeenCalled()
   })
@@ -30,7 +30,7 @@ describe('<EditPollOpenQuestion> with...', () => {
         onLabelChange={(label) => onTextChangeFn()}
       />
     )
-    const questionTextArea = tree.container.querySelector('#id_questions-1-name')
+    const questionTextArea = tree.container.querySelector('#id_questions-6-name')
     fireEvent.change(questionTextArea, { target: { value: 'question text' } })
     expect(onTextChangeFn).toHaveBeenCalled()
   })
diff --git a/adhocracy4/polls/static/__tests__/EditPollQuestion.jest.jsx b/adhocracy4/polls/static/__tests__/EditPollQuestion.jest.jsx
index df565e738..317def201 100644
--- a/adhocracy4/polls/static/__tests__/EditPollQuestion.jest.jsx
+++ b/adhocracy4/polls/static/__tests__/EditPollQuestion.jest.jsx
@@ -26,7 +26,7 @@ describe('<EditPollQuestion> with...', () => {
         // onAppendChoice={(hasOtherOption) => handleChoice('append', { index, hasOtherOption })}
       />
     )
-    const questionTextArea = tree.container.querySelector('#id_questions-1-name')
+    const questionTextArea = tree.container.querySelector('#id_questions-6-name')
     fireEvent.change(questionTextArea, { target: { value: 'question text' } })
     expect(onTextChangeFn).toHaveBeenCalled()
   })
@@ -40,7 +40,7 @@ describe('<EditPollQuestion> with...', () => {
         onLabelChange={() => onTextChangeFn()}
       />
     )
-    const questionTextArea = tree.container.querySelector('#id_questions-1-name')
+    const questionTextArea = tree.container.querySelector('#id_questions-6-name')
     fireEvent.change(questionTextArea, { target: { value: 'question text' } })
     expect(onTextChangeFn).toHaveBeenCalled()
   })
@@ -65,7 +65,7 @@ describe('<EditPollQuestion> with...', () => {
         onMultipleChoiceChange={() => onMultiChoiceChangeFn()}
       />
     )
-    const multiChoiceInput = tree.container.querySelector('#id_questions-1-multiple_choice')
+    const multiChoiceInput = tree.container.querySelector('#id_questions-6-multiple_choice')
     fireEvent.click(multiChoiceInput)
     expect(onMultiChoiceChangeFn).toHaveBeenCalled()
   })
@@ -79,7 +79,7 @@ describe('<EditPollQuestion> with...', () => {
         onHasOtherChoiceChange={() => onHasOtherChoiceChangeFn()}
       />
     )
-    const multiChoiceInput = tree.container.querySelector('#id_questions-1-is_other_choice')
+    const multiChoiceInput = tree.container.querySelector('#id_questions-6-is_other_choice')
     fireEvent.click(multiChoiceInput)
     expect(onHasOtherChoiceChangeFn).toHaveBeenCalled()
   })
diff --git a/adhocracy4/polls/static/__tests__/PollQuestion.jest.jsx b/adhocracy4/polls/static/__tests__/PollQuestion.jest.jsx
deleted file mode 100644
index f5bf949c8..000000000
--- a/adhocracy4/polls/static/__tests__/PollQuestion.jest.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// tools needed for testing
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-
-// component and related data to be tested
-import { PollQuestion } from '../PollDetail/PollQuestion.jsx'
-import { QUESTION_OBJECT } from './__testdata__/QUESTION_OBJECT'
-
-describe('render <PollQuestion> with...', () => {
-  test('-> single-choice -> non-open-answers', () => {
-    const tree = render(<PollQuestion question={QUESTION_OBJECT} />)
-    expect(tree).toMatchSnapshot()
-  })
-
-  test('-> single-choice -> open-answers', () => {
-    const singleOpenQuestion = { ...QUESTION_OBJECT }
-    singleOpenQuestion.is_open = true
-    const tree = render(<PollQuestion question={singleOpenQuestion} />)
-    expect(tree).toMatchSnapshot()
-  })
-
-  test('-> multiple-choice -> non-open-answers', () => {
-    const multiQuestion = { ...QUESTION_OBJECT }
-    multiQuestion.multiple_choice = true
-    const tree = render(<PollQuestion question={multiQuestion} />)
-    expect(tree).toMatchSnapshot()
-  })
-
-  test('-> multiple-choice -> open-answers', () => {
-    const multiOpenQuestion = { ...QUESTION_OBJECT }
-    multiOpenQuestion.multiple_choice = true
-    multiOpenQuestion.is_open = true
-    const tree = render(<PollQuestion question={multiOpenQuestion} />)
-    expect(tree).toMatchSnapshot()
-  })
-})
-
-describe('calling prop-passed functions...', () => {
-  const changedFn = jest.fn()
-  const otherChangedFn = jest.fn()
-  const multiChangedFn = jest.fn()
-
-  test('call onSingleChange', () => {
-    const tree = render(
-      <PollQuestion
-        question={QUESTION_OBJECT}
-        onSingleChange={changedFn}
-        onOtherChange={otherChangedFn}
-      />
-    )
-    const choiceRadio1 = tree.container.querySelector('#id_choice-1-single')
-    expect(choiceRadio1.checked).toBe(false)
-    fireEvent.click(choiceRadio1)
-    expect(changedFn).toHaveBeenCalled()
-    expect(otherChangedFn).toHaveBeenCalled()
-  })
-
-  test('call onSingleChange -> is_other_choice', () => {
-    const singleOpenQuestion = { ...QUESTION_OBJECT }
-    singleOpenQuestion.choices[0].is_other_choice = true
-    const tree = render(
-      <PollQuestion
-        question={singleOpenQuestion}
-        onSingleChange={changedFn}
-        onOtherChange={otherChangedFn}
-      />
-    )
-    const choiceRadio = tree.container.querySelector('input[type="radio"][id="id_choice-1-single"]')
-    const choiceTextArea = tree.container.querySelector('#id_choice-1-other')
-    expect(choiceRadio.checked).toBe(false)
-    expect(choiceTextArea.value).toBe('')
-    fireEvent.click(choiceRadio)
-    fireEvent.change(choiceTextArea, { target: { value: 'something' } })
-    expect(otherChangedFn).toHaveBeenCalled()
-    expect(otherChangedFn).toHaveBeenCalledWith(1, 'something')
-  })
-
-  test('call onMultiChange', () => {
-    const multiQuestion = { ...QUESTION_OBJECT }
-    multiQuestion.multiple_choice = true
-    multiQuestion.choices[0].is_other_choice = false
-    const tree = render(
-      <PollQuestion
-        question={multiQuestion}
-        onMultiChange={multiChangedFn}
-        onOtherChange={otherChangedFn}
-      />
-    )
-    const choiceCheckbox1 = tree.container.querySelector('#id_choice-1-multiple')
-    expect(choiceCheckbox1.checked).toBe(false)
-    fireEvent.click(choiceCheckbox1)
-    expect(multiChangedFn).toHaveBeenCalled()
-    expect(otherChangedFn).toHaveBeenCalled()
-  })
-
-  test('call onMultiChange -> is_other_choice', () => {
-    const multiOpenQuestion = { ...QUESTION_OBJECT }
-    multiOpenQuestion.multiple_choice = true
-    multiOpenQuestion.choices[0].is_other_choice = true
-    const tree = render(
-      <PollQuestion
-        question={multiOpenQuestion}
-        onMultiChange={multiChangedFn}
-        onOtherChange={otherChangedFn}
-      />
-    )
-    const choiceCheckbox = tree.container.querySelector('#id_choice-1-multiple')
-    const choiceTextArea = tree.container.querySelector('#id_choice-1-other')
-    expect(choiceCheckbox.checked).toBe(false)
-    expect(choiceTextArea.value).toBe('')
-    fireEvent.click(choiceCheckbox)
-    fireEvent.change(choiceTextArea, { target: { value: 'something' } })
-    expect(otherChangedFn).toHaveBeenCalled()
-    expect(otherChangedFn).toHaveBeenCalledWith(1, 'something')
-  })
-})
-
-test('initialize with function getUserAnswer -> with user answer', () => {
-  const userAnswerQuestion = { ...QUESTION_OBJECT }
-  userAnswerQuestion.other_choice_answers = [{ answer: 'antwoord', vote_id: 1 }]
-  userAnswerQuestion.other_choice_user_answer = 1
-
-  const tree = render(
-    <PollQuestion
-      question={userAnswerQuestion}
-    />
-  )
-  const choiceTextArea = tree.container.querySelector('#id_choice-1-other')
-  expect(choiceTextArea.value).toBe('antwoord')
-})
diff --git a/adhocracy4/polls/static/__tests__/__snapshots__/CharCounter.jest.jsx.snap b/adhocracy4/polls/static/__tests__/__snapshots__/CharCounter.jest.jsx.snap
index a9734061e..9934d2e97 100644
--- a/adhocracy4/polls/static/__tests__/__snapshots__/CharCounter.jest.jsx.snap
+++ b/adhocracy4/polls/static/__tests__/__snapshots__/CharCounter.jest.jsx.snap
@@ -5,18 +5,28 @@ exports[`<CharCounter> component renders correctly 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <span>
+      <span
+        class="a4-char-counter"
+        id="id_char-count-2"
+      >
         6
         /
         25
+         
+        characters
       </span>
     </div>
   </body>,
   "container": <div>
-    <span>
+    <span
+      class="a4-char-counter"
+      id="id_char-count-2"
+    >
       6
       /
       25
+       
+      characters
     </span>
   </div>,
   "debug": [Function],
diff --git a/adhocracy4/polls/static/__tests__/__snapshots__/PollQuestion.jest.jsx.snap b/adhocracy4/polls/static/__tests__/__snapshots__/PollQuestion.jest.jsx.snap
deleted file mode 100644
index 4f6000acc..000000000
--- a/adhocracy4/polls/static/__tests__/__snapshots__/PollQuestion.jest.jsx.snap
+++ /dev/null
@@ -1,649 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`render <PollQuestion> with... -> multiple-choice -> non-open-answers 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <form>
-        <div
-          class="poll poll--question"
-        >
-          <h2>
-            My Question
-          </h2>
-          <div
-            class="poll__help-text"
-          >
-            Multiple answers are possible.
-          </div>
-          <div
-            class="poll__rows"
-          >
-            <label
-              class="poll-row radio"
-              for="id_choice-1-multiple"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-1-multiple"
-                name="question"
-                type="checkbox"
-                value="1"
-              />
-              <span
-                class="radio__text radio__text--checkbox"
-              >
-                cool1
-              </span>
-            </label>
-            <label
-              class="poll-row radio"
-              for="id_choice-2-multiple"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-2-multiple"
-                name="question"
-                type="checkbox"
-                value="2"
-              />
-              <span
-                class="radio__text radio__text--checkbox"
-              >
-                yeah
-              </span>
-            </label>
-          </div>
-        </div>
-      </form>
-    </div>
-  </body>,
-  "container": <div>
-    <form>
-      <div
-        class="poll poll--question"
-      >
-        <h2>
-          My Question
-        </h2>
-        <div
-          class="poll__help-text"
-        >
-          Multiple answers are possible.
-        </div>
-        <div
-          class="poll__rows"
-        >
-          <label
-            class="poll-row radio"
-            for="id_choice-1-multiple"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-1-multiple"
-              name="question"
-              type="checkbox"
-              value="1"
-            />
-            <span
-              class="radio__text radio__text--checkbox"
-            >
-              cool1
-            </span>
-          </label>
-          <label
-            class="poll-row radio"
-            for="id_choice-2-multiple"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-2-multiple"
-              name="question"
-              type="checkbox"
-              value="2"
-            />
-            <span
-              class="radio__text radio__text--checkbox"
-            >
-              yeah
-            </span>
-          </label>
-        </div>
-      </div>
-    </form>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`render <PollQuestion> with... -> multiple-choice -> open-answers 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <form>
-        <div
-          class="poll poll--question"
-        >
-          <h2>
-            My Question
-          </h2>
-          <div
-            class="poll__help-text"
-          >
-            Multiple answers are possible.
-          </div>
-          <div
-            class="poll__rows"
-          >
-            <label
-              class="poll-row radio"
-              for="id_choice-1-multiple"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-1-multiple"
-                name="question"
-                type="checkbox"
-                value="1"
-              />
-              <span
-                class="radio__text radio__text--checkbox"
-              >
-                cool1
-              </span>
-            </label>
-            <label
-              class="poll-row radio"
-              for="id_choice-2-multiple"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-2-multiple"
-                name="question"
-                type="checkbox"
-                value="2"
-              />
-              <span
-                class="radio__text radio__text--checkbox"
-              >
-                yeah
-              </span>
-            </label>
-          </div>
-        </div>
-      </form>
-    </div>
-  </body>,
-  "container": <div>
-    <form>
-      <div
-        class="poll poll--question"
-      >
-        <h2>
-          My Question
-        </h2>
-        <div
-          class="poll__help-text"
-        >
-          Multiple answers are possible.
-        </div>
-        <div
-          class="poll__rows"
-        >
-          <label
-            class="poll-row radio"
-            for="id_choice-1-multiple"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-1-multiple"
-              name="question"
-              type="checkbox"
-              value="1"
-            />
-            <span
-              class="radio__text radio__text--checkbox"
-            >
-              cool1
-            </span>
-          </label>
-          <label
-            class="poll-row radio"
-            for="id_choice-2-multiple"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-2-multiple"
-              name="question"
-              type="checkbox"
-              value="2"
-            />
-            <span
-              class="radio__text radio__text--checkbox"
-            >
-              yeah
-            </span>
-          </label>
-        </div>
-      </div>
-    </form>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`render <PollQuestion> with... -> single-choice -> non-open-answers 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <form>
-        <div
-          class="poll poll--question"
-        >
-          <h2>
-            My Question
-          </h2>
-          <div
-            class="poll__rows"
-          >
-            <label
-              class="poll-row radio"
-              for="id_choice-1-single"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-1-single"
-                name="question"
-                type="radio"
-                value="1"
-              />
-              <span
-                class="radio__text"
-              >
-                cool1
-              </span>
-            </label>
-            <label
-              class="poll-row radio"
-              for="id_choice-2-single"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-2-single"
-                name="question"
-                type="radio"
-                value="2"
-              />
-              <span
-                class="radio__text"
-              >
-                yeah
-              </span>
-            </label>
-          </div>
-        </div>
-      </form>
-    </div>
-  </body>,
-  "container": <div>
-    <form>
-      <div
-        class="poll poll--question"
-      >
-        <h2>
-          My Question
-        </h2>
-        <div
-          class="poll__rows"
-        >
-          <label
-            class="poll-row radio"
-            for="id_choice-1-single"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-1-single"
-              name="question"
-              type="radio"
-              value="1"
-            />
-            <span
-              class="radio__text"
-            >
-              cool1
-            </span>
-          </label>
-          <label
-            class="poll-row radio"
-            for="id_choice-2-single"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-2-single"
-              name="question"
-              type="radio"
-              value="2"
-            />
-            <span
-              class="radio__text"
-            >
-              yeah
-            </span>
-          </label>
-        </div>
-      </div>
-    </form>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`render <PollQuestion> with... -> single-choice -> open-answers 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <form>
-        <div
-          class="poll poll--question"
-        >
-          <h2>
-            My Question
-          </h2>
-          <div
-            class="poll__rows"
-          >
-            <label
-              class="poll-row radio"
-              for="id_choice-1-single"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-1-single"
-                name="question"
-                type="radio"
-                value="1"
-              />
-              <span
-                class="radio__text"
-              >
-                cool1
-              </span>
-            </label>
-            <label
-              class="poll-row radio"
-              for="id_choice-2-single"
-            >
-              <input
-                class="poll-row__radio"
-                id="id_choice-2-single"
-                name="question"
-                type="radio"
-                value="2"
-              />
-              <span
-                class="radio__text"
-              >
-                yeah
-              </span>
-            </label>
-          </div>
-        </div>
-      </form>
-    </div>
-  </body>,
-  "container": <div>
-    <form>
-      <div
-        class="poll poll--question"
-      >
-        <h2>
-          My Question
-        </h2>
-        <div
-          class="poll__rows"
-        >
-          <label
-            class="poll-row radio"
-            for="id_choice-1-single"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-1-single"
-              name="question"
-              type="radio"
-              value="1"
-            />
-            <span
-              class="radio__text"
-            >
-              cool1
-            </span>
-          </label>
-          <label
-            class="poll-row radio"
-            for="id_choice-2-single"
-          >
-            <input
-              class="poll-row__radio"
-              id="id_choice-2-single"
-              name="question"
-              type="radio"
-              value="2"
-            />
-            <span
-              class="radio__text"
-            >
-              yeah
-            </span>
-          </label>
-        </div>
-      </div>
-    </form>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
diff --git a/adhocracy4/polls/static/__tests__/__testdata__/QUESTION_OBJECT.js b/adhocracy4/polls/static/__tests__/__testdata__/QUESTION_OBJECT.js
index 3e207c899..74f2cdacd 100644
--- a/adhocracy4/polls/static/__tests__/__testdata__/QUESTION_OBJECT.js
+++ b/adhocracy4/polls/static/__tests__/__testdata__/QUESTION_OBJECT.js
@@ -1,31 +1,48 @@
 export const QUESTION_OBJECT = {
-  id: 1,
-  label: 'My Question',
+  id: 6,
+  label: 'Pick multiple options',
   help_text: '',
-  multiple_choice: false,
+  multiple_choice: true,
   is_open: false,
   isReadOnly: false,
   authenticated: true,
   choices: [
     {
       id: 1,
-      label: 'cool1',
+      label: 'Answer 1',
       count: 0,
       is_other_choice: false
     },
     {
       id: 2,
-      label: 'yeah',
+      label: 'Answer 2',
       count: 0,
       is_other_choice: false
+    },
+    {
+      id: 3,
+      label: 'Answer 3',
+      count: 0,
+      is_other_choice: false
+    },
+    {
+      id: 4,
+      label: 'other',
+      count: 1,
+      is_other_choice: true
     }
   ],
-  userChoices: [],
+  userChoices: [4],
   answers: [],
   userAnswer: '',
-  other_choice_answers: [],
-  other_choice_user_answer: '',
-  totalVoteCount: 0,
-  totalVoteCountMulti: 0,
+  other_choice_answers: [
+    {
+      vote_id: 28,
+      answer: 'question text'
+    }
+  ],
+  other_choice_user_answer: 28,
+  totalVoteCount: 1,
+  totalVoteCountMulti: 1,
   totalAnswerCount: 0
 }
diff --git a/changelog/8462.md b/changelog/8462.md
new file mode 100644
index 000000000..34beeaed3
--- /dev/null
+++ b/changelog/8462.md
@@ -0,0 +1,9 @@
+### Added
+
+- Added PollDetail/TextareaWithCounter.jsx and PollDetail/ChoiceRow.jsx
+
+### Changed
+- Renamed and refactored PollDetail/PollQuestion.jsx into PollDetail/PollChoice.jsx
+- Refactored PollDetail/CharCounter.jsx
+
+