TaskItem: add missing alt/aria-label for task icons

zooniverse · Nov 22, 2023 · f09b9c8 · f09b9c8
1 parent 616b3a0
commit f09b9c8
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/TaskItem.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/TaskItem.jsx
@@ -10,6 +10,12 @@ import PropTypes from 'prop-types';
 // import strings from '../../../strings.json'; // TODO: move all text into strings
 import TaskIcon from '../../../icons/TaskIcon.jsx';
 
+const TaskLabels = {
+  'drawing': 'Drawing Task',
+  'single': 'Question Task',  // Single question
+  'text': 'Text Task'
+};
+
 function TaskItem({
   task,
   taskKey
@@ -26,8 +32,10 @@ function TaskItem({
       <div className="flex-row spacing-bottom-M">
         <span className="task-key">{taskKey}</span>
         <span className="task-icon">
-          {/* TODO: change icon and aria label depending on task type */}
-          <TaskIcon type={task.type} />
+          <TaskIcon
+            alt={TaskLabels[task.type]}
+            type={task.type}
+          />
         </span>
         <span className="task-text flex-item">{taskText}</span>
       </div>