accessility changes (#119)

* accessility changes * task page contrast issue resolved
AOT-Technologies · Dec 1, 2023 · 55501c8 · 55501c8
1 parent 179b5fd
commit 55501c8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
@@ -270,32 +270,33 @@ const Roles = React.memo((props: any) => {
   const showCreateModal = () => (
     <div>
       <Modal show={showRoleModal} onHide={handleCloseRoleModal}>
+        <Form>
         <Modal.Header closeButton>
           <Modal.Title>{t("Create Role")}</Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <Form>
             <Form.Group className="mb-3">
-              <Form.Label aria-required>{t("Role Name")}</Form.Label>
-              <i style={{ color: "red" }}>*</i>
+              <Form.Label htmlFor="role-name" aria-required>{t("Role Name")}</Form.Label>
+              <i style={{ color: "#e00" }}>*</i>
               <Form.Control
+                id="role-name"
                 type="text"
                 placeholder={t("Eg: Account Manager")}
                 required
                 onChange={handleChangeName}
                 title={t("Enter role name")}
               />
-              <Form.Label className="mt-2">{t("Description")}</Form.Label>
-              <i style={{ color: "red" }}>*</i>
+              <Form.Label htmlFor="role-description" className="mt-2">{t("Description")}</Form.Label>
+              <i style={{ color: "#e00" }}>*</i>
               <Form.Control
+                id="role-description"
                 as="textarea"
                 placeholder="Eg: Lorem ipsum..."
                 rows={3}
                 onChange={handleChangeDescription}
                 title={t("Enter Description")}
               />
             </Form.Group>
-          </Form>
         </Modal.Body>
         <Modal.Footer>
           <button type="button"
@@ -306,10 +307,12 @@ const Roles = React.memo((props: any) => {
             variant="primary"
             disabled={disabled}
             onClick={handleCreateRole}
+            type="submit"
           >
             {t("Create")}
           </Button>
-        </Modal.Footer>
+          </Modal.Footer>
+        </Form>
       </Modal>
     </div>
   );

diff --git a/forms-flow-theme/src/global.scss b/forms-flow-theme/src/global.scss
@@ -35,7 +35,7 @@
   --color-gray-800: #373a3c;
   --color-gray-900: #212529;
   --color-main-bg: #F7F7F7;
-  --head-inactive: #909090;
+  --head-inactive: var(--color-black);
   --logo-path: "./logo.svg";
   --logo-width: 40px;
   --appname-margin-left: 0px;
@@ -537,7 +537,7 @@ div[disabled] {
 }
 
 .tooltiptext {
-  color: #757575;
+  color: var(--color-gray-800);
 }
 
 .select_download {
@@ -644,7 +644,7 @@ div.upload input[type="file"] {
 }
 
 .head-active {
-  color: var(--color-black);
+  color: var(--color-primary);
   border-bottom: 4px solid  var(--color-primary);
 }
 
@@ -704,4 +704,8 @@ div.upload input[type="file"] {
 
 hr {
   border-top: 2px solid rgba(0,0,0,.1);
+}
+
+.active-link {
+  color: var(--color-primary) !important;
 }