improve keyboard navigation on create monitor page

client/src/Components/inputs/Radio.tsx

@@ -42,6 +42,9 @@ export const RadioWithDescription = ({
 				"& .MuiButtonBase-root": {
 					mr: theme.spacing(6),
 				},
+				"&:has(.Mui-focusVisible)": {
+					backgroundColor: theme.palette.action.hover,
+				},
 			}}
 		/>
 	);

client/src/Pages/CreateMonitor/index.tsx

@@ -293,6 +293,9 @@ const CreateMonitorPage = () => {
 			setCurrentStep((step) => step + 1);
 		}
 	};
+
+	const isWizardStep = !isEditMode && currentStep < totalSteps - 1;
+
 	const handleBack = () => setCurrentStep((step) => step - 1);
 
 	// Reset the form when the monitor type changes so stale type-specific fields
@@ -362,6 +365,13 @@ const CreateMonitorPage = () => {
 		logger.debug("Monitor creation validation errors", errors);
 	};
 
+	const handleFormSubmit = isWizardStep
+		? (event: React.FormEvent) => {
+				event.preventDefault();
+				void handleNext();
+			}
+		: handleSubmit(onSubmit, onError);
+
 	const notificationOptions = useMemo(() => {
 		return (notifications ?? []).map((n) => ({
 			...n,
@@ -461,7 +471,7 @@ const CreateMonitorPage = () => {
 		<FormProvider {...form}>
 			<BasePage
 				component="form"
-				onSubmit={handleSubmit(onSubmit, onError)}
+				onSubmit={handleFormSubmit}
 			>
 				<HeaderDeleteControls
 					monitor={existingMonitor}
@@ -909,10 +919,9 @@ const CreateMonitorPage = () => {
 					{!isEditMode && currentStep < totalSteps - 1 ? (
 						<Button
 							key="wizard-next"
-							type="button"
+							type="submit"
 							variant="contained"
 							color="primary"
-							onClick={handleNext}
 						>
 							{t("common.buttons.next")}
 						</Button>

client/src/Utils/Theme/Theme.ts

@@ -124,6 +124,14 @@ export const theme = (mode: string, palette: any) =>
 					disableTouchRipple: true,
 					disableFocusRipple: true,
 				},
+				styleOverrides: {
+					root: ({ theme }) => ({
+						"&.Mui-focusVisible": {
+							outline: `1px solid ${theme.palette.primary.main}`,
+							outlineOffset: 2,
+						},
+					}),
+				},
 			},
 			MuiIconButton: {
 				defaultProps: {