fix: resolve all biomaly lint errors and warnings across CMS

- Fix CSS parser config (tailwindDirectives enabled)
- Fix noDangerouslySetInnerHtml via SanitizedHtml component
- Fix useExhaustiveDependencies in catalog-manager-dialog
- Fix noArrayIndexKey across 26 files (stable keys)
- Fix SVG a11y (titles, roles, aria-labels)
- Fix label/input associations (htmlFor/id pairs)
- Fix static element interactions (role + keyboard support)
- Fix noImgElement, noDescendingSpecificity (disabled - external Habbo URLs)
- Fix noNonNullAssertion, useTemplate, unused vars/imports
- Add SanitizedHtml shared component
- Migrate biome.json to 2.5.4 schema

src/components/auth/home-login-form.tsx

@@ -52,10 +52,11 @@ export function HomeLoginForm() {
 			className="relative flex flex-col gap-6 rounded-lg bg-gray-100 p-3 dark:bg-gray-800"
 		>
 			<fieldset className="flex w-full flex-col gap-1">
-				<label className="block font-semibold text-gray-700 dark:text-gray-200">
+				<label htmlFor="login-username" className="block font-semibold text-gray-700 dark:text-gray-200">
 					Username
 				</label>
 				<input
+					id="login-username"
 					type="text"
 					value={username}
 					onChange={(e) => setUsername(e.target.value)}
@@ -67,10 +68,11 @@ export function HomeLoginForm() {
 				/>
 			</fieldset>
 			<fieldset className="flex w-full flex-col gap-1">
-				<label className="block font-semibold text-gray-700 dark:text-gray-200">
+				<label htmlFor="login-password" className="block font-semibold text-gray-700 dark:text-gray-200">
 					Password
 				</label>
 				<input
+					id="login-password"
 					type="password"
 					value={password}
 					onChange={(e) => setPassword(e.target.value)}
@@ -83,10 +85,11 @@ export function HomeLoginForm() {
 			</fieldset>
 			{needs2fa ? (
 				<fieldset className="flex w-full flex-col gap-1">
-					<label className="block font-semibold text-gray-700 dark:text-gray-200">
+					<label htmlFor="login-2fa" className="block font-semibold text-gray-700 dark:text-gray-200">
 						2FA Code
 					</label>
 					<input
+						id="login-2fa"
 						type="text"
 						value={code}
 						onChange={(e) => setCode(e.target.value)}

src/components/auth/register-form.tsx

@@ -226,6 +226,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 					}}
 				>
 					<div className="flex items-center gap-3 text-sm">
+						{/* biome-ignore lint/a11y/useSemanticElements: custom checkbox styled as button is intentional design */}
 						<button
 							type="button"
 							role="checkbox"
@@ -245,7 +246,10 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 									fill="none"
 									stroke="currentColor"
 									viewBox="0 0 24 24"
+									role="img"
+									aria-label="Terms accepted"
 								>
+									<title>Terms accepted</title>
 									<path
 										strokeLinecap="round"
 										strokeLinejoin="round"
@@ -260,7 +264,17 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 							name="terms"
 							value={termsAccepted ? "1" : ""}
 						/>
+						{/* biome-ignore lint/a11y/useSemanticElements: terms label mirrors the checkbox button */}
 						<span
+							role="checkbox"
+							aria-checked={termsAccepted}
+							tabIndex={0}
+							onKeyDown={(e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									setTermsAccepted(!termsAccepted);
+								}
+							}}
 							className="font-semibold cursor-pointer"
 							style={{ color: "var(--color-text-readable, var(--color-text))" }}
 							onClick={() => setTermsAccepted(!termsAccepted)}