Accessibility: hidden fields now use HTML hidden

zooniverse · Jun 24, 2024 · d8a1927 · d8a1927
1 parent 7376979
commit d8a1927
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/...ges/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/...ges/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/...es/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/...es/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
@@ -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>
   );