Fix/change question 1 text (#12)

* Add new text

* Show different helper text for question 1

src/components/Buttons/LinkButton/LinkButton.tsx

@@ -13,7 +13,6 @@ const LinkButton = ({ urlValue, translationId, isActive }: LinkButtonProps) => {
           role="button"
           type="button"
           disabled={!isActive}
-          aria-disabled={!isActive}
           className="button-primary p-2"
           aria-label={intl.formatMessage({ id: translationId })}
         >

src/components/Buttons/LinkButton/__tests__/LinkButton.test.tsx

@@ -55,6 +55,5 @@ describe('<LinkButton />', () => {
     expect(button[0].getAttribute('aria-label')).toContain(
       finnishTranslations['app.buttons.link.summary'],
     );
-    expect(button[0].getAttribute('aria-disabled')).toEqual('false');
   });
 });

src/components/Forms/EmailForm/EmailForm.tsx

@@ -80,13 +80,7 @@ const EmailForm = () => {
             </div>
           )}
           <div className="mb-2 center-text">
-            <Button
-              type="submit"
-              role="button"
-              disabled={hasUserAnswered}
-              aria-disabled={hasUserAnswered}
-              className="input-submit"
-            >
+            <Button type="submit" role="button" disabled={hasUserAnswered} className="input-submit">
               {intl.formatMessage({ id: 'app.input.submit.newsletter' })}
             </Button>
             {hasUserAnswered ? <TextBasic translationId="app.result.newsletter.success" /> : null}

src/components/Forms/UserForm/UserForm.tsx

@@ -368,7 +368,6 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                   aria-required="false"
                   aria-invalid={errors.is_interested_in_mobility ? true : false}
                   disabled={isForFun}
-                  aria-disabled={isForFun}
                   className="form-check-input"
                 />
                 <label htmlFor="is_filled_for_fun" className="text-label">
@@ -382,7 +381,6 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                   aria-required="false"
                   aria-invalid={errors.is_filled_for_fun ? true : false}
                   disabled={isInterestedInMobility}
-                  aria-disabled={isInterestedInMobility}
                   className="form-check-input"
                 />
                 <label htmlFor="is_filled_for_fun" className="text-label">
@@ -406,7 +404,6 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
                   type="submit"
                   role="button"
                   disabled={answerStatus}
-                  aria-disabled={answerStatus}
                   className="input-submit"
                 >
                   {intl.formatMessage({ id: 'app.input.submit.user' })}

src/components/QuestionForm/QuestionForm.tsx

@@ -54,6 +54,8 @@ const QuestionForm = () => {
 
   const [filteredQuestions, setFilteredQuestions] = useState(allQuestions);
 
+  const isQuestion1 = questionData.number === '1';
+
   /**
    * Set first question
    */
@@ -296,7 +298,7 @@ const QuestionForm = () => {
     // Check that next question object is valid
     if (isObjectValid(nextQuestion)) {
       // Check if we are in first question
-      if (questionData.number === '1') {
+      if (isQuestion1) {
         await checkMultipleConditions();
         setSecondQuestion();
       } else if (
@@ -398,15 +400,19 @@ const QuestionForm = () => {
                   questionData.question_sv,
                 )}
           </div>
-          {questionData.number === '1' ? (
+          {isQuestion1 ? (
             <div className="text-container ml-0">
               <h4 className="header-h4">
                 {intl.formatMessage({ id: 'app.question.1.description' })}
               </h4>
             </div>
           ) : null}
           <div className="text-container ml-0">
-            <p className="text-normal">{intl.formatMessage({ id: 'app.questions.answer.text' })}</p>
+            <p className="text-normal">
+              {intl.formatMessage({
+                id: isQuestion1 ? 'app.questions.1.answer.text' : 'app.questions.answer.text',
+              })}
+            </p>
           </div>
           <div className="form-list-container">
             <Form.Group>

src/i18n/en.json

@@ -62,6 +62,7 @@
   "app.transport.walk": "walk",
   "app.transport.scooter": "e-scooter or similar",
   "app.question.1.description": "If you do not have an opportunity to use a mode, choose 0.",
+  "app.questions.1.answer.text": "Please answer all options before proceeding.",
   "app.questions.answer.text": "Please answer the question before proceeding.",
   "app.questions.api.error": "An error occurred. Questions can't be displayed."
 }

src/i18n/fi.json

@@ -62,6 +62,7 @@
   "app.transport.walk": "kävely",
   "app.transport.scooter": "sähköpotkulauta tai muu vastaava",
   "app.question.1.description": "Jos sinulla ei ole mahdollisuutta johonkin kulkumuotoon, valitse 0.",
+  "app.questions.1.answer.text": "Vastaathan kaikkiin kohtiin ennen kuin siirryt eteenpäin.",
   "app.questions.answer.text": "Vastaathan kysymykseen ennen kuin siirryt eteenpäin.",
   "app.questions.api.error": "Tapahtui virhe. Kysymyksiä ei voida näyttää."
 }

src/i18n/sv.json

@@ -62,6 +62,7 @@
   "app.transport.walk": "gående",
   "app.transport.scooter": "e-skoter eller liknande",
   "app.question.1.description": "Om du inte har tillgång till ett transportsätt, välj 0.",
+  "app.questions.1.answer.text": "Vänligen svara på alla alternativ innan du går vidare.",
   "app.questions.answer.text": "Vänligen svara på frågan innan du går vidare.",
   "app.questions.api.error": "Ett fel uppstod. Frågor kan inte visas."
 }