From fd2fcf75be86fcca173c9e08d89b61ec7cabc230 Mon Sep 17 00:00:00 2001
From: fahad-aot <99656326+fahad-aot@users.noreply.github.com>
Date: Fri, 1 Dec 2023 20:02:08 +0530
Subject: [PATCH] Accessibility changes (#1789)

* list-view fixes

* accessibility changes

* submission page contrast issue resolved

* updated
---
 .../src/components/Application/ApplicationTable.js          | 6 +++---
 forms-flow-web/src/components/Form/constants/ClientTable.js | 3 ++-
 forms-flow-web/src/components/Form/constants/FormTable.js   | 6 +++---
 .../src/components/Modeler/Editors/BpmnEditor/index.js      | 1 +
 forms-flow-web/src/components/Modeler/Main.js               | 3 ++-
 .../src/components/Modeler/constants/bpmnTable.js           | 4 ++--
 forms-flow-web/src/containers/Head.js                       | 1 -
 7 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/forms-flow-web/src/components/Application/ApplicationTable.js b/forms-flow-web/src/components/Application/ApplicationTable.js
index 860c7b11d1..cbe89d3678 100644
--- a/forms-flow-web/src/components/Application/ApplicationTable.js
+++ b/forms-flow-web/src/components/Application/ApplicationTable.js
@@ -95,7 +95,7 @@ const ApplicationTable = () => {
 
   const viewSubmissionDetails = (data) => (
     <button
-      className="btn btn-link mt-2"
+      className="btn btn-link text-primary mt-2"
       onClick={() => submissionDetails(data)}
     >
       <Translation>{(t) => t("View Details")}</Translation>{" "}
@@ -135,7 +135,7 @@ const ApplicationTable = () => {
         : `${redirectUrl}form/${formData.formId}/submission/${formData.submissionId}`;
     return (
       <button
-        className="btn btn-link mt-2"
+        className="btn btn-link text-primary mt-2"
         onClick={() => window.open(url, "_blank")}
       >
         <Translation>
@@ -251,7 +251,7 @@ const ApplicationTable = () => {
                   <div className="filter-container-list application-filter-list-view">
                     <button
                       type="button"
-                      className="btn btn-outline-secondary "
+                      className="btn btn-outline-secondary tooltiptext"
                       onClick={() => {
                         setDisplayFilter(true);
                       }}
diff --git a/forms-flow-web/src/components/Form/constants/ClientTable.js b/forms-flow-web/src/components/Form/constants/ClientTable.js
index 14eefd92ec..801a2b2b0c 100644
--- a/forms-flow-web/src/components/Form/constants/ClientTable.js
+++ b/forms-flow-web/src/components/Form/constants/ClientTable.js
@@ -190,6 +190,7 @@ function ClientTable() {
                       }
                       placeholder={t("Search by form title")}
                       style={{ backgroundColor: "#ffff" }}
+                      title={t("Search by form title")}
                     />
                     {search && (
                       <InputGroup.Append onClick={handleClearSearch}>
@@ -218,7 +219,7 @@ function ClientTable() {
                     <tr>
                       <td className="col-4">
                         {!isDesigner && (
-                          <button className="btn btn-light btn-small mr-2"   onClick={() => handleToggle(index) } disabled={!e.description}>
+                          <button title={t("Form Description")} className="btn btn-light btn-small mr-2"   onClick={() => handleToggle(index) } disabled={!e.description}>
                               <i
                             className={`fa ${
                               openIndex === index
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
index 01c4ca0dba..fc571ca790 100644
--- a/forms-flow-web/src/components/Form/constants/FormTable.js
+++ b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -121,7 +121,7 @@ function FormTable() {
 
   const viewOrEdit = (formData) => (
     <button
-      className="btn btn-link mt-2"
+      className="btn btn-link text-primary mt-2"
       onClick={() => viewOrEditForm(formData._id)}
     >
       <Translation>{(t) => t("View Details")}</Translation>{" "}
@@ -301,11 +301,12 @@ function FormTable() {
                         <span> {viewOrEdit(e)}</span>
                       </td>
                       <td>
-                        <Dropdown aria-label="More options">
+                        <Dropdown >
                           <Dropdown.Toggle
                             as={CustomToggle} 
                             id="dropdown-basic"
                             title={t("More options")}
+                            aria-describedby="More-options"
                           >
                             <i className="fa-solid fa-ellipsis"></i>
                           </Dropdown.Toggle>
@@ -351,7 +352,6 @@ function FormTable() {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu>
-                
                     {pageOptions.map((option, index) => (
                   <Dropdown.Item
                     key={index}
diff --git a/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js b/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
index 5bd5f12689..d274b84da3 100644
--- a/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
+++ b/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
@@ -313,6 +313,7 @@ export default React.memo(
                   type="checkbox"
                   checked={applyAllTenants}
                   onClick={handleApplyAllTenants}
+                  title={t("Apply for all tenants")}
                 />{" "}
                 {t("Apply for all tenants")}
               </label>
diff --git a/forms-flow-web/src/components/Modeler/Main.js b/forms-flow-web/src/components/Modeler/Main.js
index 73c53d5c62..1eceeb791c 100644
--- a/forms-flow-web/src/components/Modeler/Main.js
+++ b/forms-flow-web/src/components/Modeler/Main.js
@@ -117,11 +117,12 @@ export default React.memo(() => {
         <input
           ref={uploadFormNode}
           id="inputWorkflow"
-          style={{ display: "none" }}
+          className="d-none"
           type="file"
           name="upload"
           accept=".bpmn, .dmn"
           onChange={(e) => handleChangeFile(e.target.files[0])}
+          title={t("Upload Workflow")}
         />
       </div>
 
diff --git a/forms-flow-web/src/components/Modeler/constants/bpmnTable.js b/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
index afcd4bb0ac..c393daa1ad 100644
--- a/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
+++ b/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
@@ -106,7 +106,7 @@ function BpmnTable() {
                 <th scope="col">{t("Workflow Name")}</th>
                 <th scope="col">{t("Key")}</th>
                 <th scope="col">{t("Type")}</th>
-                <th colSpan="2">
+                <th colSpan="2" aria-label="Search">
                 <InputGroup className="input-group">
               <FormControl
                 value={search}
@@ -160,7 +160,7 @@ function BpmnTable() {
                     <td>{processItem.key}</td>
                     <td>{t("BPMN")}</td>
                     <td className="d-flex justify-content-end w-100">
-                      <button className="btn btn-link" onClick={()=>{gotoEdit(processItem);}}> 
+                      <button className="btn btn-link text-primary" onClick={()=>{gotoEdit(processItem);}}> 
                        <i className="fas fa-edit mr-2"/>
                         {t("Edit Workflow")}</button>
                     </td>
diff --git a/forms-flow-web/src/containers/Head.js b/forms-flow-web/src/containers/Head.js
index b7455b8201..51d6ff03f7 100644
--- a/forms-flow-web/src/containers/Head.js
+++ b/forms-flow-web/src/containers/Head.js
@@ -11,7 +11,6 @@ const Head = React.memo((props) => {
             onClick={item.onClick}
             key={key}
             className={`head-item ${item.name === page ? "head-active" : ""} ${key > 0 ? 'padding-left-60' : ''}`}
-            style={{ color: item.name !== page ? " #949494" : "" }}
           >
             <h3   className="application-head">
               <i