fix: improve a11y in LoginForm

Author: grzegorzpokorski

src/app/[channel]/(main)/login/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 import { Loader } from "@/ui/atoms/Loader";
-import { LoginForm } from "@/ui/components/LoginForm";
+import { LoginForm } from "@/ui/components/LoginForm/LoginForm";
 
 export default function LoginPage() {
 	return (

src/app/[channel]/(main)/orders/page.tsx

@@ -1,6 +1,6 @@
 import { CurrentUserOrderListDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
-import { LoginForm } from "@/ui/components/LoginForm";
+import { LoginForm } from "@/ui/components/LoginForm/LoginForm";
 import { OrderListItem } from "@/ui/components/OrderListItem";
 
 export default async function OrderPage() {

src/ui/components/LoginForm.tsx renamed to src/ui/components/LoginForm/LoginForm.tsx

@@ -1,10 +1,11 @@
+import { LoginButton } from "./components/LoginButton";
 import { saleorAuthClient } from "@/app/config";
 
 export async function LoginForm() {
 	return (
 		<div className="mx-auto mt-16 w-full max-w-lg">
 			<form
-				className="rounded border p-8 shadow-md"
+				className="flex flex-col gap-y-2 rounded border p-8 shadow-md"
 				action={async (formData) => {
 					"use server";
 
@@ -23,39 +24,30 @@ export async function LoginForm() {
 					}
 				}}
 			>
-				<div className="mb-2">
-					<label className="sr-only" htmlFor="email">
-						Email
-					</label>
+				<label>
+					<span className="sr-only">Email</span>
 					<input
 						type="email"
 						name="email"
 						placeholder="Email"
 						className="w-full rounded border bg-neutral-50 px-4 py-2"
+						required
 					/>
-				</div>
-				<div className="mb-4">
-					<label className="sr-only" htmlFor="password">
-						Password
-					</label>
+				</label>
+				<label>
+					<span className="sr-only">Password</span>
 					<input
 						type="password"
 						name="password"
 						placeholder="Password"
 						autoCapitalize="off"
 						autoComplete="off"
 						className="w-full rounded border bg-neutral-50 px-4 py-2"
+						required
 					/>
-				</div>
-
-				<button
-					className="rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700"
-					type="submit"
-				>
-					Log In
-				</button>
+				</label>
+				<LoginButton />
 			</form>
-			<div></div>
 		</div>
 	);
 }

src/ui/components/LoginForm/components/LoginButton.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+export const LoginButton = () => {
+	const { pending } = useFormStatus();
+	return (
+		<button
+			className="mt-2 self-start rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700 aria-disabled:opacity-80"
+			type="submit"
+			aria-disabled={pending}
+		>
+			{pending ? "Processing..." : "Log In"}
+		</button>
+	);
+};