feat: aria labels for login flow related elements (#355)

NeuraLegion · Jul 31, 2024 · f7c5f5f · f7c5f5f
1 parent 048fc6d
commit f7c5f5f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/client/src/pages/auth/Login/Login.tsx b/client/src/pages/auth/Login/Login.tsx
@@ -147,11 +147,13 @@ export const Login: FC = () => {
       <div className="login-form">
         <form onSubmit={sendUser}>
           <div className="form-group">
-            <label>Authentication Type</label>
+            <label htmlFor="authType">Authentication Type</label>
             <select
               className="form-control"
               name="op"
+              id="authType"
               placeholder="Authentication Type"
+              aria-label="Authentication Type"
               value={mode}
               onChange={onSelectMode}
             >
@@ -189,23 +191,27 @@ export const Login: FC = () => {
           )}
 
           <div className="form-group">
-            <label>Email</label>
+            <label htmlFor="email">Email</label>
             <input
               className="au-input au-input--full"
               type="text"
               name="user"
+              id="email"
               placeholder="Email"
+              aria-label="Email"
               value={user}
               onInput={onInput}
             />
           </div>
           <div className="form-group">
-            <label>Password</label>
+            <label htmlFor="password">Password</label>
             <input
               className="au-input au-input--full"
               type="password"
               name="password"
+              id="password"
               placeholder="Password"
+              aria-label="Password"
               value={password}
               onInput={onInput}
             />
@@ -222,6 +228,7 @@ export const Login: FC = () => {
           <button
             className="au-btn au-btn--block au-btn--green m-b-20"
             type="submit"
+            aria-label="Sign in"
           >
             sign in
           </button>
@@ -237,7 +244,9 @@ export const Login: FC = () => {
         <div className="register-link">
           <p>
             Don't have an account?{' '}
-            <Link to={RoutePath.Register}>Sign Up Here</Link>
+            <Link to={RoutePath.Register} aria-label="Sign Up">
+              Sign Up Here
+            </Link>
           </p>
         </div>
       </div>

diff --git a/client/src/pages/auth/LoginNew/LoginNew.tsx b/client/src/pages/auth/LoginNew/LoginNew.tsx
@@ -45,19 +45,22 @@ export const LoginNew: FC = () => {
       <div className="login-form">
         <form onSubmit={sendUser}>
           <div className="form-group">
-            <label>Email</label>
+            <label htmlFor="email">Email</label>
             <input
               className="au-input au-input--full"
               type="text"
               name="user"
+              id="email"
               placeholder="Email"
+              aria-label="Email"
               value={user}
               onInput={onInput}
             />
           </div>
           <button
             className="au-btn au-btn--block au-btn--green m-b-20"
             type="submit"
+            aria-label="Proceed to password entry"
           >
             Enter password
           </button>
@@ -73,7 +76,9 @@ export const LoginNew: FC = () => {
         <div className="register-link">
           <p>
             Don't have an account?{' '}
-            <Link to={RoutePath.Register}>Sign Up Here</Link>
+            <Link to={RoutePath.Register} aria-label="Sign Up">
+              Sign Up Here
+            </Link>
           </p>
         </div>
       </div>

diff --git a/client/src/pages/auth/LoginNew/PasswordCheck.tsx b/client/src/pages/auth/LoginNew/PasswordCheck.tsx
@@ -85,14 +85,22 @@ export const PasswordCheck: FC = () => {
       <div className="login-form">
         <form onSubmit={sendUser}>
           <div className="form-group">
-            <label>Username:</label>
-            <input value={form.user} name="user" readOnly />
-            <label>Enter Password:</label>
+            <label htmlFor="username">Username:</label>
+            <input
+              id="username"
+              value={form.user}
+              name="user"
+              readOnly
+              aria-label="Username"
+            />
+            <label htmlFor="password">Enter Password:</label>
             <input
               className="au-input au-input--full"
               type="password"
               name="password"
+              id="password"
               placeholder="Password"
+              aria-label="Password"
               value={password}
               onInput={onInput}
             />
@@ -110,6 +118,7 @@ export const PasswordCheck: FC = () => {
           <button
             className="au-btn au-btn--block au-btn--green m-b-20"
             type="submit"
+            aria-label="Sign in"
           >
             sign in
           </button>
@@ -125,7 +134,9 @@ export const PasswordCheck: FC = () => {
         <div className="register-link">
           <p>
             Don't have an account?{' '}
-            <Link to={RoutePath.Register}>Sign Up Here</Link>
+            <Link to={RoutePath.Register} aria-label="Sign Up">
+              Sign Up Here
+            </Link>
           </p>
         </div>
       </div>

diff --git a/client/src/pages/main/Header/Sign.tsx b/client/src/pages/main/Header/Sign.tsx
@@ -56,6 +56,8 @@ export const Sign: FC = () => {
             to={RoutePath.Home}
             className="get-started-btn scrollto"
             onClick={logout}
+            role="button"
+            aria-label="Log out"
           >
             Log out {userName}
           </Link>
@@ -72,10 +74,17 @@ export const Sign: FC = () => {
           <a
             href={`${RoutePath.Login}?logobgcolor=transparent`}
             className="get-started-btn scrollto"
+            role="button"
+            aria-label="Sign in"
           >
             Sign in
           </a>
-          <a href={RoutePath.LoginNew} className="get-started-btn scrollto">
+          <a
+            href={RoutePath.LoginNew}
+            className="get-started-btn scrollto"
+            role="button"
+            aria-label="2-step Sign in"
+          >
             2-step Sign in
           </a>
         </>