From d4b4e02b62d7762bfd91afaf3a274fbde5068e9b Mon Sep 17 00:00:00 2001 From: lsprr <16653744+lsprr@users.noreply.github.com> Date: Mon, 6 Nov 2023 15:57:49 -0500 Subject: [PATCH] Improve accessibility of the login form - Add ARIA labels to input fields for better screen reader support - Implement keyboard navigation for the login form elements - Fix semantic HTML issues for assistive technologies --- apps/OpenSign/src/routes/Login.js | 84 +++++++++++++++++-------------- 1 file changed, 46 insertions(+), 38 deletions(-) diff --git a/apps/OpenSign/src/routes/Login.js b/apps/OpenSign/src/routes/Login.js index bada3d29d..ba0d74133 100644 --- a/apps/OpenSign/src/routes/Login.js +++ b/apps/OpenSign/src/routes/Login.js @@ -744,7 +744,7 @@ function Login(props) { }; const GetLoginData = async () => { - setState({...state, loading: true}) + setState({ ...state, loading: true }) try { Parse.serverURL = localStorage.getItem("baseUrl"); Parse.initialize(localStorage.getItem("parseAppId")); @@ -925,6 +925,7 @@ function Login(props) { {state.loading && ( <div + aria-live="assertive" style={{ position: "fixed", width: "100vw", @@ -936,63 +937,66 @@ function Login(props) { }} > <div + role="status" style={{ position: "fixed", fontSize: "50px", color: "#3ac9d6", top: "50%", - left: "45%" + left: "50%", + transform: 'translate(-50%, -50%)' }} className="loader-37" - ></div> + > + <span className="sr-only">Loading...</span> + </div> </div> )} {props.isloginVisible && props.isloginVisible ? ( - <div> + <div aria-labelledby="loginHeading" role="region"> <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 "> <div className="w-[250px] h-[66px] inline-block"> {state.hideNav ? ( - <img src={image} width="100%" alt="" /> + <img src={image} width="100%" alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." /> ) : ( - <img src={image} width="100%" alt="" /> + <img src={image} width="100%" alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." /> )} </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2"> - <div className=""> + <div> <div> - <form onSubmit={handleSubmit}> - <h2 className="text-[30px] mt-6">Welcome Back !</h2> - <span className="text-[12px] text-[#878787]"> - Login to your account - </span> - <div className="shadow-md rounded my-4"> + <form onSubmit={handleSubmit} aria-label="Login Form"> + <h1 className="text-[30px] mt-6">Welcome Back!</h1> + <fieldset className="outline outline-1 outline-slate-300/50 my-4"> + <legend className="text-xs font-bold px-6 mt-4">Login to your account</legend> <div className="px-6 py-4"> - <label className="block text-xs">Username</label> + <label className="block text-xs" htmlFor="email">Username</label> <input + id="email" type="text" - className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs" name="email" value={state.email} onChange={handleChange} required /> <hr className="my-2 border-none" /> - <label className="block text-xs">Password</label> + <label className="block text-xs" htmlFor="password">Password</label> <div className="relative"> <input + id="password" type={state.passwordVisible ? "text" : "password"} - className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs" name="password" value={state.password} onChange={handleChange} required /> <span - className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${ - state.passwordVisible - ? "text-[#007bff]" - : "text-black" - }`} + className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${state.passwordVisible + ? "text-[#007bff]" + : "text-black" + }`} onClick={togglePasswordVisibility} > {state.passwordVisible ? ( @@ -1003,32 +1007,32 @@ function Login(props) { </span> </div> </div> - </div> - <div className="flex flex-row justify-between items-center text-xs px-4 py-2"> + </fieldset> + <div className="flex flex-row justify-between items-center px-4 py-2"> <div> - <label className="form-check-label"> + <label className="form-check-label inline-block cursor-pointer" htmlFor="rememberpassword"> <input type="checkbox" - className="form-check-input" + className="form-check-input mr-2" value="" + id="rememberpassword" /> - <span className="text-center pl-1"> - Remember Password - </span> + <span className="text-[13px] pl-1">Remember Password</span> </label> </div> <div> - <span className="text-[13px]"> - <NavLink to={`/forgetpassword`}> - Forgot Password ? - </NavLink> - </span> + <NavLink + to="/forgetpassword" + className="text-[13px] underline focus:outline-none focus:ring-2 focus:ring-blue-600" + > + Forgot Password? + </NavLink> </div> </div> <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2"> <button type="submit" - className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow uppercase" + className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600" disabled={state.loading} > {state.loading ? "Loading..." : "Login"} @@ -1093,7 +1097,7 @@ function Login(props) { }} > {props.appInfo.googleClietId && - props.appInfo.googleClietId !== "" ? ( + props.appInfo.googleClietId !== "" ? ( <GoogleSignInBtn GoogleCred={props.appInfo.googleClietId} thirdpartyLoginfn={thirdpartyLoginfn} @@ -1107,14 +1111,18 @@ function Login(props) { {!state.hideNav && ( <div className="self-center"> <div className="mx-auto md:w-[300px] lg:w-[500px]"> - <img src={login_img} alt="bisec" width="100%" /> + <img src={login_img} alt="The image illustrates a person from behind, seated at a desk with a four-monitor computer setup, in an environment with a light blue and white color scheme, featuring a potted plant to the right." width="100%" /> </div> </div> )} </div> </div> - <div id="snackbar" style={{ backgroundColor: state.toastColor }}> + <div + id="snackbar" + role="alert" + style={{ backgroundColor: state.toastColor }} + > {state.toastDescription} </div> </div>