improve ui and logs

Author: AlemTuzlak

packages/react-router-devtools/src/client/components/Checkbox.tsx

@@ -37,6 +37,7 @@ export const Icon = ({ name, title, testId, className, size = "sm", ...props }:
 	const isStrokeIcon = strokeIcon.includes(name)
 	const iconClasses = cx(styles.icon.base, className, isEmptyFill && styles.icon.fillTransparent)
 	return (
+		// biome-ignore lint/a11y/noSvgWithoutTitle: i don't want titles on hover
 		<svg
 			className={iconClasses}
 			fill={isEmptyFill ? "none" : "currentColor"}
@@ -47,7 +48,6 @@ export const Icon = ({ name, title, testId, className, size = "sm", ...props }:
 			data-name={name}
 			{...props}
 		>
-			<title>{title ?? name}</title>
 			<defs>
 				<symbol
 					id="Layout"

packages/react-router-devtools/src/client/components/NewRouteForm.tsx

@@ -26,11 +26,11 @@ const Tab = ({
 	const { styles } = useStyles()
 
 	return (
-		// biome-ignore lint/a11y/useKeyWithClickEvents: ignored
-		<div
+		<button
 			data-testid={tab.id}
 			onClick={() => (onClick ? onClick() : setSettings({ activeTab: tab.id as TabsType }))}
 			title={typeof tab.name === "string" ? tab.name : undefined}
+			type="button"
 			className={cx(
 				"group",
 				styles.layout.tabs.tab,
@@ -39,7 +39,7 @@ const Tab = ({
 			)}
 		>
 			<div className={cx(className, styles.layout.tabs.tabIcon)}>{tab.icon}</div>
-		</div>
+		</button>
 	)
 }