add title to agent connection type in all systems table

internal/site/src/components/routes/system.tsx

@@ -24,7 +24,7 @@ import MemChart from "@/components/charts/mem-chart"
 import SwapChart from "@/components/charts/swap-chart"
 import TemperatureChart from "@/components/charts/temperature-chart"
 import { getPbTimestamp, pb } from "@/lib/api"
-import { ChartType, ConnectionType, Os, SystemStatus, Unit } from "@/lib/enums"
+import { ChartType, ConnectionType, connectionTypeLabels, Os, SystemStatus, Unit } from "@/lib/enums"
 import { batteryStateTranslations } from "@/lib/i18n"
 import {
 	$allSystemsByName,
@@ -442,15 +442,14 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 										</TooltipTrigger>
 										{system.info.ct && (
 											<TooltipContent>
-												{system.info.ct === ConnectionType.WebSocket ? (
-													<div className="flex gap-1 items-center">
-														<WebSocketIcon className="size-4" /> WebSocket
-													</div>
-												) : (
-													<div className="flex gap-1 items-center">
-														<ChevronRightSquareIcon className="size-4" strokeWidth={2} /> SSH
-													</div>
-												)}
+												<div className="flex gap-1 items-center">
+													{system.info.ct === ConnectionType.WebSocket ? (
+														<WebSocketIcon className="size-4" />
+													) : (
+														<ChevronRightSquareIcon className="size-4" strokeWidth={2} />
+													)}
+													{connectionTypeLabels[system.info.ct as ConnectionType]}
+												</div>
 											</TooltipContent>
 										)}
 									</Tooltip>

internal/site/src/components/routes/system/network-sheet.tsx

@@ -7,6 +7,7 @@ import ChartTimeSelect from "@/components/charts/chart-time-select"
 import { useNetworkInterfaces } from "@/components/charts/hooks"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { DialogTitle } from "@/components/ui/dialog"
 import { $userSettings } from "@/lib/stores"
 import { decimalString, formatBytes, toFixedFloat } from "@/lib/utils"
 import type { ChartData } from "@/types"
@@ -39,9 +40,10 @@ export default memo(function NetworkSheet({
 
 	return (
 		<Sheet open={netInterfacesOpen} onOpenChange={setNetInterfacesOpen}>
+			<DialogTitle className="sr-only">{t`Network`}</DialogTitle>
 			<SheetTrigger asChild>
 				<Button
-					aria-label={t`View more`}
+					title={t`View more`}
 					variant="outline"
 					size="icon"
 					className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3"
@@ -50,7 +52,7 @@ export default memo(function NetworkSheet({
 				</Button>
 			</SheetTrigger>
 			{hasOpened.current && (
-				<SheetContent className="overflow-auto w-200 !max-w-full p-4 sm:p-6">
+				<SheetContent aria-describedby={undefined} className="overflow-auto w-200 !max-w-full p-4 sm:p-6">
 					<ChartTimeSelect className="w-[calc(100%-2em)]" />
 					<ChartCard
 						empty={dataEmpty}