From d8a1927b060023f4965b69134f7938fce36fc421 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Mon, 24 Jun 2024 17:47:40 +0100
Subject: [PATCH] Accessibility: hidden fields now use HTML hidden

---
 .../EditStepDialog/types/DrawingTask.jsx          | 15 +++++++--------
 .../EditStepDialog/types/QuestionTask.jsx         | 15 +++++++--------
 .../components/EditStepDialog/types/TextTask.jsx  | 15 +++++++--------
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
index 693dc1fd25..b79964583d 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -346,14 +346,13 @@ function DrawingTask({
             }
           </button>
         </div>
-        {showHelpField && (
-          <textarea
-            id={`task-${taskKey}-help`}
-            value={help}
-            onBlur={update}
-            onChange={(e) => { setHelp(e?.target?.value) }}
-          />
-        )}
+        <textarea
+          id={`task-${taskKey}-help`}
+          hidden={!showHelpField}
+          value={help}
+          onBlur={update}
+          onChange={(e) => { setHelp(e?.target?.value) }}
+        />
       </div>
     </div>
   );
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
index 5c112f5f77..94f44b82f9 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -204,14 +204,13 @@ function QuestionTask({
             }
           </button>
         </div>
-        {showHelpField && (
-          <textarea
-            id={`task-${taskKey}-help`}
-            value={help}
-            onBlur={update}
-            onChange={(e) => { setHelp(e?.target?.value) }}
-          />
-        )}
+        <textarea
+          id={`task-${taskKey}-help`}
+          hidden={!showHelpField}
+          value={help}
+          onBlur={update}
+          onChange={(e) => { setHelp(e?.target?.value) }}
+        />
       </div>
     </div>
   );
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
index d64ebf5cef..ec04cc06ba 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -108,14 +108,13 @@ function TextTask({
             }
           </button>
         </div>
-        {showHelpField && (
-          <textarea
-            id={`task-${taskKey}-help`}
-            value={help}
-            onBlur={update}
-            onChange={(e) => { setHelp(e?.target?.value) }}
-          />
-        )}
+        <textarea
+          id={`task-${taskKey}-help`}
+          hidden={!showHelpField}
+          value={help}
+          onBlur={update}
+          onChange={(e) => { setHelp(e?.target?.value) }}
+        />
       </div>
     </div>
   );