Accessibility changes (AOT-Technologies#1789)

* list-view fixes * accessibility changes * submission page contrast issue resolved * updated
Bonymol-aot · Dec 1, 2023 · fd2fcf7 · fd2fcf7
1 parent c2fbfa9
commit fd2fcf7
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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