updates in accessibility of forms page in designer (#1790)

* updates in accessibility of forms page in designer * Internationalisation solved and label removed
AOT-Technologies · Dec 1, 2023 · c2fbfa9 · c2fbfa9
1 parent 2d89e16
commit c2fbfa9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js b/forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js
@@ -53,9 +53,10 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
           />
         </Col>
         <Col xs={12} md={3}>
-          <label>{t("Label")}</label>
+          <label htmlFor="taskLabel">{t("Label")}</label>
           <input
             type="text"
+            id="taskLabel"
             value={taskLabel}
             onChange={(e) => {
               setTaskLable(e.target.value);

diff --git a/forms-flow-web/src/components/Form/Steps/ViewAndEditTaskvariable.js b/forms-flow-web/src/components/Form/Steps/ViewAndEditTaskvariable.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
+import { useTranslation } from "react-i18next";
 const ViewAndEditTaskvariable = ({
   item,
   // eslint-disable-next-line no-unused-vars
@@ -11,6 +12,7 @@ const ViewAndEditTaskvariable = ({
   const [taskLabel, setTaskLabel] = useState(item.label);
   const [showInList, setShowInList] = useState(item.showInList);
   const [enableEditTaskVariable, setEnableEditTaskVariable] = useState(true);
+  const { t } = useTranslation();
 
   const saveData = (taskVariable) => {
     setEnableEditTaskVariable(true);
@@ -43,14 +45,16 @@ const ViewAndEditTaskvariable = ({
               setTaskLabel(e.target.value);
             }}
             className="form-control"
-            aria-labelledby="Task label"
+            aria-label="Task Label"
           />
         </td>
         <td className="p-3">
+          <span id="showInListLabel" className="sr-only">{t("Show in list")}</span>
           <Form.Check
             className="" 
             disabled={enableEditTaskVariable}
             checked={showInList}
+            aria-labelledby="showInListLabel"
             onChange={() => {
               setShowInList(!showInList);
             }}
@@ -65,6 +69,7 @@ const ViewAndEditTaskvariable = ({
               onClick={() => {
                 saveData(item);
               }}
+              aria-label="Save"
             >
               <i className="fa fa-check"></i> Save
             </Button>
@@ -75,6 +80,7 @@ const ViewAndEditTaskvariable = ({
                 onClick={() => {
                   deleteTaskVariable(item);
                 }}
+                aria-label="Delete"
                 className="mr-3 btn btn-danger btn fa fa-times"
               ></i>
 
@@ -83,6 +89,7 @@ const ViewAndEditTaskvariable = ({
                 onClick={() => {
                   setEnableEditTaskVariable(false);
                 }}
+                aria-label="Edit"
                 className="btn btn-primary fa fa-edit"
               ></i>
             </div>

diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -164,6 +164,7 @@ function FormTable() {
         e.preventDefault();
         onClick(e);
       }}
+      aria-label="CustomToggle"
     >
       {children}
     </button>