feat: getting rid of tab index -1 and setting form with semantics on login and register

Client/src/Pages/Auth/Login.jsx

@@ -51,6 +51,10 @@ const LandingPage = ({ onContinue }) => {
 									stroke: theme.palette.other.icon,
 								},
 							},
+							"&:focus-visible": {
+								outline: `2px solid ${theme.palette.primary.main}`,
+								outlineOffset: `2px`,
+							},
 						}}
 					>
 						<Mail />
@@ -137,56 +141,68 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
 					<Typography component="h1">Log In</Typography>
 					<Typography>Enter your email address</Typography>
 				</Box>
-				<Box textAlign="left">
-					<form
-						noValidate
-						spellCheck={false}
-						onSubmit={onSubmit}
-					>
-						<Field
-							type="email"
-							id="login-email-input"
-							label="Email"
-							isRequired={true}
-							placeholder="jordan.ellis@domain.com"
-							autoComplete="email"
-							value={form.email}
-							onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
-							onChange={onChange}
-							error={errors.email}
-							ref={inputRef}
-						/>
-					</form>
-				</Box>
-				<Stack
-					direction="row"
-					justifyContent="space-between"
+				<Box
+					textAlign="left"
+					component="form"
+					noValidate
+					spellCheck={false}
+					onSubmit={onSubmit}
+					display="grid"
+					gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
 				>
-					<Button
-						variant="outlined"
-						color="info"
-						onClick={onBack}
-						sx={{
-							px: theme.spacing(5),
-							"& svg.MuiSvgIcon-root": {
-								mr: theme.spacing(3),
-							},
-						}}
-						props={{ tabIndex: -1 }}
+					<Field
+						type="email"
+						id="login-email-input"
+						label="Email"
+						isRequired={true}
+						placeholder="jordan.ellis@domain.com"
+						autoComplete="email"
+						value={form.email}
+						onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
+						onChange={onChange}
+						error={errors.email}
+						ref={inputRef}
+					/>
+					<Stack
+						direction="row"
+						justifyContent="space-between"
 					>
-						<ArrowBackRoundedIcon />
-						Back
-					</Button>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={onSubmit}
-						disabled={errors.email && true}
-						sx={{ width: "30%" }}
-					>
-						Continue
-					</Button>
-				</Stack>
+						<Button
+							variant="outlined"
+							color="info"
+							onClick={onBack}
+							sx={{
+								px: theme.spacing(5),
+								"& svg.MuiSvgIcon-root": {
+									mr: theme.spacing(3),
+								},
+								"&:focus-visible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+								},
+							}}
+						>
+							<ArrowBackRoundedIcon />
+							Back
+						</Button>
+						<Button
+							variant="contained"
+							color="primary"
+							type="submit"
+							disabled={errors.email && true}
+							sx={{
+								width: "30%",
+								"&.Mui-focusVisible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+									boxShadow: `none`,
+								},
+							}}
+						>
+							Continue
+						</Button>
+					</Stack>
+				</Box>
 			</Stack>
 		</>
 	);
@@ -285,8 +301,11 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 								"& svg.MuiSvgIcon-root": {
 									mr: theme.spacing(3),
 								},
+								"&:focus-visible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+								},
 							}}
-							props={{ tabIndex: -1 }}
 						>
 							<ArrowBackRoundedIcon />
 							Back
@@ -294,9 +313,16 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 						<Button
 							variant="contained"
 							color="primary"
-							onClick={onSubmit}
+							type="submit"
 							disabled={errors.password && true}
-							sx={{ width: "30%" }}
+							sx={{
+								width: "30%",
+								"&.Mui-focusVisible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+									boxShadow: `none`,
+								},
+							}}
 						>
 							Continue
 						</Button>

Client/src/Pages/Auth/Register/Register.jsx

@@ -53,6 +53,10 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
 									stroke: theme.palette.other.icon,
 								},
 							},
+							"&:focus-visible": {
+								outline: `2px solid ${theme.palette.primary.main}`,
+								outlineOffset: `2px`,
+							},
 						}}
 					>
 						<Mail />

Client/src/Pages/Auth/Register/StepOne/index.jsx

@@ -37,21 +37,28 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 
 	return (
 		<>
+			{/* TODO this stack should be a component */}
 			<Stack
-				gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+				gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
 				textAlign="center"
 			>
 				<Box>
 					<Typography component="h1">Sign Up</Typography>
 					<Typography>Enter your personal details</Typography>
 				</Box>
-				<Box textAlign="left">
+
+				<Box
+					textAlign="left"
+					component="form"
+					noValidate
+					spellCheck={false}
+					onSubmit={onSubmit}
+					display="grid"
+					gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
+				>
 					<Box
-						component="form"
-						noValidate
-						spellCheck={false}
-						onSubmit={onSubmit}
-						mb={theme.spacing(10)}
+						display="grid"
+						gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
 					>
 						<Field
 							id="register-firstname-input"
@@ -64,14 +71,6 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 							error={errors.firstName}
 							ref={inputRef}
 						/>
-					</Box>
-					<Box
-						component="form"
-						noValidate
-						spellCheck={false}
-						onSubmit={onSubmit}
-						mb={theme.spacing(5)}
-					>
 						<Field
 							id="register-lastname-input"
 							label="Surname"
@@ -83,36 +82,48 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 							error={errors.lastName}
 						/>
 					</Box>
+					<Stack
+						direction="row"
+						justifyContent="space-between"
+					>
+						{/* TODO buttons should be  a component should be a component */}
+						<Button
+							variant="outlined"
+							color="info"
+							onClick={onBack}
+							sx={{
+								px: theme.spacing(5),
+								"& svg.MuiSvgIcon-root": {
+									mr: theme.spacing(3),
+								},
+
+								"&:focus-visible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+								},
+							}}
+						>
+							<ArrowBackRoundedIcon />
+							Back
+						</Button>
+						<Button
+							variant="contained"
+							color="primary"
+							type="submit"
+							disabled={(errors.firstName || errors.lastName) && true}
+							sx={{
+								width: "30%",
+								"&.Mui-focusVisible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+									boxShadow: `none`,
+								},
+							}}
+						>
+							Continue
+						</Button>
+					</Stack>
 				</Box>
-				<Stack
-					direction="row"
-					justifyContent="space-between"
-				>
-					<Button
-						variant="outlined"
-						color="info"
-						onClick={onBack}
-						sx={{
-							px: theme.spacing(5),
-							"& svg.MuiSvgIcon-root": {
-								mr: theme.spacing(3),
-							},
-						}}
-						props={{ tabIndex: -1 }}
-					>
-						<ArrowBackRoundedIcon />
-						Back
-					</Button>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={onSubmit}
-						disabled={(errors.firstName || errors.lastName) && true}
-						sx={{ width: "30%" }}
-					>
-						Continue
-					</Button>
-				</Stack>
 			</Stack>
 		</>
 	);

Client/src/Pages/Auth/Register/StepThree/index.jsx

@@ -47,39 +47,44 @@ function StepThree({ onSubmit, onBack }) {
 					spellCheck={false}
 					onSubmit={onSubmit}
 					textAlign="left"
+					display="grid"
+					gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
 					sx={{
-						display: "grid",
-						gap: theme.spacing(8),
 						"& .input-error": {
 							display: "none",
 						},
 					}}
 				>
-					<Field
-						type="password"
-						id="register-password-input"
-						name="password"
-						label="Password"
-						isRequired={true}
-						placeholder="Create a password"
-						autoComplete="current-password"
-						value={form.password}
-						onChange={handleChange}
-						error={errors.password && errors.password[0]}
-						ref={inputRef}
-					/>
-					<Field
-						type="password"
-						id="register-confirm-input"
-						name="confirm"
-						label="Confirm password"
-						isRequired={true}
-						placeholder="Confirm your password"
-						autoComplete="current-password"
-						value={form.confirm}
-						onChange={handleChange}
-						error={errors.confirm && errors.confirm[0]}
-					/>
+					<Box
+						display="grid"
+						gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+					>
+						<Field
+							type="password"
+							id="register-password-input"
+							name="password"
+							label="Password"
+							isRequired={true}
+							placeholder="Create a password"
+							autoComplete="current-password"
+							value={form.password}
+							onChange={handleChange}
+							error={errors.password && errors.password[0]}
+							ref={inputRef}
+						/>
+						<Field
+							type="password"
+							id="register-confirm-input"
+							name="confirm"
+							label="Confirm password"
+							isRequired={true}
+							placeholder="Confirm your password"
+							autoComplete="current-password"
+							value={form.confirm}
+							onChange={handleChange}
+							error={errors.confirm && errors.confirm[0]}
+						/>
+					</Box>
 					<Stack
 						gap={theme.spacing(4)}
 						mb={{ xs: theme.spacing(6), sm: theme.spacing(8) }}
@@ -133,7 +138,6 @@ function StepThree({ onSubmit, onBack }) {
 									outlineOffset: "4px",
 								},
 							}}
-							props={{ tabIndex: -1 }}
 						>
 							<ArrowBackRoundedIcon />
 							Back
@@ -147,7 +151,14 @@ function StepThree({ onSubmit, onBack }) {
 								form.confirm.length === 0 ||
 								Object.keys(errors).length !== 0
 							}
-							sx={{ width: "30%" }}
+							sx={{
+								width: "30%",
+								"&.Mui-focusVisible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+									boxShadow: `none`,
+								},
+							}}
 						>
 							Continue
 						</Button>

Client/src/Pages/Auth/Register/StepTwo/index.jsx

@@ -44,58 +44,70 @@ function StepTwo({ form, errors, onSubmit, onChange, onBack }) {
 					<Typography component="h1">Sign Up</Typography>
 					<Typography>Enter your email address</Typography>
 				</Box>
-				<Box textAlign="left">
-					<Box
-						component="form"
-						noValidate
-						spellCheck={false}
-						onSubmit={onSubmit}
-						mb={theme.spacing(5)}
-					>
-						<Field
-							type="email"
-							id="register-email-input"
-							label="Email"
-							isRequired={true}
-							placeholder="jordan.ellis@domain.com"
-							autoComplete="email"
-							value={form.email}
-							onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
-							onChange={onChange}
-							error={errors.email}
-							ref={inputRef}
-						/>
-					</Box>
-				</Box>
-				<Stack
-					direction="row"
-					justifyContent="space-between"
+
+				<Box
+					component="form"
+					textAlign="left"
+					noValidate
+					spellCheck={false}
+					onSubmit={onSubmit}
+					mb={theme.spacing(5)}
+					display="grid"
+					gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
 				>
-					<Button
-						variant="outlined"
-						color="info"
-						onClick={onBack}
-						sx={{
-							px: theme.spacing(5),
-							"& svg.MuiSvgIcon-root": {
-								mr: theme.spacing(3),
-							},
-						}}
-						props={{ tabIndex: -1 }}
+					<Field
+						type="email"
+						id="register-email-input"
+						label="Email"
+						isRequired={true}
+						placeholder="jordan.ellis@domain.com"
+						autoComplete="email"
+						value={form.email}
+						onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
+						onChange={onChange}
+						error={errors.email}
+						ref={inputRef}
+					/>
+					<Stack
+						direction="row"
+						justifyContent="space-between"
 					>
-						<ArrowBackRoundedIcon />
-						Back
-					</Button>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={onSubmit}
-						disabled={errors.email && true}
-						sx={{ width: "30%" }}
-					>
-						Continue
-					</Button>
-				</Stack>
+						<Button
+							variant="outlined"
+							color="info"
+							onClick={onBack}
+							sx={{
+								px: theme.spacing(5),
+								"& svg.MuiSvgIcon-root": {
+									mr: theme.spacing(3),
+								},
+								"&:focus-visible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+								},
+							}}
+						>
+							<ArrowBackRoundedIcon />
+							Back
+						</Button>
+						<Button
+							variant="contained"
+							color="primary"
+							onClick={onSubmit}
+							disabled={errors.email && true}
+							sx={{
+								width: "30%",
+								"&.Mui-focusVisible": {
+									outline: `2px solid ${theme.palette.primary.main}`,
+									outlineOffset: `2px`,
+									boxShadow: `none`,
+								},
+							}}
+						>
+							Continue
+						</Button>
+					</Stack>
+				</Box>
 			</Stack>
 		</>
 	);