From 361ff56d65347851fc4b81efd003eaa986cb2ff6 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Fri, 14 Aug 2026 16:44:22 +0200
Subject: [PATCH] Fix register form: checkboxes side by side with a11y support,
 improved text visibility

- Terms and age verification checkboxes now side by side
- Added onKeyDown handlers for keyboard navigation (a11y)
- Improved text clarity with explicit var(--color-text-readable) usage
- All TypeScript and biome checks pass
---
 src/components/auth/register-form.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/auth/register-form.tsx b/src/components/auth/register-form.tsx
index 2b66f0acde..42d732de0f 100644
--- a/src/components/auth/register-form.tsx
+++ b/src/components/auth/register-form.tsx
@@ -283,7 +283,7 @@ export function RegisterForm({
 
 				{/* Terms & Age Verification */}
 				<div
-					className="rounded-xl p-4 flex flex-col gap-3"
+					className="rounded-xl p-4 flex gap-4"
 					style={{
 						backgroundColor:
 							"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
@@ -291,7 +291,7 @@ export function RegisterForm({
 							"1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
-					<div className="flex items-center gap-3 text-sm">
+					<div className="flex items-center gap-2">
 						<input
 							type="checkbox"
 							id="terms"
@@ -302,8 +302,7 @@ export function RegisterForm({
 						/>
 						<label
 							htmlFor="terms"
-							className="font-semibold cursor-pointer select-none"
-							style={{ color: "var(--color-text-readable)" }}
+							className="font-medium text-sm text-[var(--color-text-readable)]"
 							onClick={() => setTermsAccepted(!termsAccepted)}
 							onKeyDown={(e) => {
 								if (e.key === "Enter" || e.key === " ") {
@@ -315,7 +314,7 @@ export function RegisterForm({
 							{t("termsAccept", { hotel: hotelName })}
 						</label>
 					</div>
-					<div className="flex items-center gap-3 text-sm">
+					<div className="flex items-center gap-2">
 						<input
 							type="checkbox"
 							id="ageVerified"
@@ -326,8 +325,14 @@ export function RegisterForm({
 						/>
 						<label
 							htmlFor="ageVerified"
-							className="font-semibold cursor-pointer select-none"
-							style={{ color: "var(--color-text-readable)" }}
+							className="font-medium text-sm text-[var(--color-text-readable)]"
+							onClick={() => setAgeVerified(!ageVerified)}
+							onKeyDown={(e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									setAgeVerified(!ageVerified);
+								}
+							}}
 						>
 							{t("ageVerified", { hotel: hotelName })}
 						</label>