added aria attributes to forms (#535)

UniKonf · Jul 28, 2023 · 76b8aba · 76b8aba
1 parent 5627ca6
commit 76b8aba
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx
@@ -110,7 +110,11 @@ export default function LogIn({ setModal }: setModalType) {
     }
   };
   return (
-    <form onSubmit={handleFormSubmit(submitData)} aria-label="Login-form">
+    <form
+      onSubmit={handleFormSubmit(submitData)}
+      aria-label="Login-form"
+      role="form"
+    >
       <ToastContainer
         position="bottom-center"
         autoClose={5000}
@@ -124,7 +128,7 @@ export default function LogIn({ setModal }: setModalType) {
         theme={theme}
       />
       <fieldset className="mt-2 text-center font-sans text-base font-semibold">
-        Login with your email
+        <legend>Login with your email</legend>
         <hr className="mt-3" />
       </fieldset>
       <div className="dark:text-black">
@@ -136,6 +140,8 @@ export default function LogIn({ setModal }: setModalType) {
             placeholder="Email"
             aria-label="Enter your email"
             aria-describedby="email-error"
+            required
+            aria-required="true"
           />
           {errors.email && (
             <div
@@ -156,11 +162,14 @@ export default function LogIn({ setModal }: setModalType) {
               className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
               aria-label="Enter your password"
               aria-describedby="password-error"
+              required
+              aria-required="true"
             />
             <button
               className="absolute inset-y-0 right-1 flex items-center px-4 text-gray-600 md:right-16"
               onClick={(e) => togglePasswordVisibility(e)}
               aria-label={isPasswordVisible ? 'Hide Password' : 'Show Password'}
+              type="button"
             >
               {isPasswordVisible ? (
                 <svg

diff --git a/src/components/Auth/Register.tsx b/src/components/Auth/Register.tsx
@@ -116,9 +116,13 @@ export default function SignUp({ setModal }: setModalType) {
   };
 
   return (
-    <form onSubmit={handleFormSubmit(submitData)} aria-label="Register form">
+    <form
+      onSubmit={handleFormSubmit(submitData)}
+      aria-label="Register form"
+      role="form"
+    >
       <fieldset className="mt-2 text-center font-sans text-base font-semibold ">
-        Sign up with your email
+        <legend>Sign up with your email</legend>
         <hr className="mt-3" />
       </fieldset>
 
@@ -131,6 +135,8 @@ export default function SignUp({ setModal }: setModalType) {
             placeholder="Enter Your Name"
             aria-label="Enter your name"
             aria-describedby="name-error"
+            required
+            aria-required="true"
           />
           {errors.name && (
             <p
@@ -151,6 +157,8 @@ export default function SignUp({ setModal }: setModalType) {
             placeholder="Email"
             aria-label="Enter your email"
             aria-describedby="email-error"
+            required
+            aria-required="true"
           />
           {errors.email && (
             <p
@@ -170,6 +178,8 @@ export default function SignUp({ setModal }: setModalType) {
             placeholder="Create New Password"
             aria-label="Enter your password"
             aria-describedby="password-error"
+            required
+            aria-required="true"
           />
           {errors.password && (
             <p
@@ -189,6 +199,8 @@ export default function SignUp({ setModal }: setModalType) {
             placeholder="Confirm Password"
             aria-label="Confirm your password"
             aria-describedby="confirmPassword-error"
+            required
+            aria-required="true"
           />
           {errors.confirmPassword && (
             <p