fix: use ring instead of outline on components

app/components/Header.tsx

@@ -41,6 +41,7 @@ function TabLink({ name, to, icon }: TabLinkProps) {
 						'after:absolute after:bottom-0 after:left-3 after:right-3',
 						'after:h-0.5 after:bg-headplane-900 dark:after:bg-headplane-200',
 						'hover:bg-headplane-200 dark:hover:bg-headplane-900',
+						'focus:outline-none focus:ring',
 						isActive ? 'after:visible' : 'after:invisible',
 					)
 				}
@@ -57,7 +58,10 @@ function Link({ href, text }: LinkProps) {
 			href={href}
 			target="_blank"
 			rel="noreferrer"
-			className="hidden sm:block hover:underline text-sm"
+			className={cn(
+				'hidden sm:block hover:underline text-sm',
+				'focus:outline-none focus:ring rounded-md',
+			)}
 		>
 			{text}
 		</a>

app/components/Link.tsx

@@ -24,6 +24,7 @@ export default function Link({
 				'inline-flex items-center gap-x-0.5',
 				'text-blue-500 hover:text-blue-700',
 				'dark:text-blue-400 dark:hover:text-blue-300',
+				'focus:outline-none focus:ring rounded-md',
 				className,
 			)}
 		>

app/components/Tooltip.tsx

@@ -12,7 +12,6 @@ export interface TooltipProps extends AriaTooltipProps {
 	children: [React.ReactElement, React.ReactElement<TooltipBodyProps>];
 }
 
-// TODO: Fix Button accessibility outline + invoke
 function Tooltip(props: TooltipProps) {
 	const state = useTooltipTriggerState({
 		...props,
@@ -37,7 +36,10 @@ function Tooltip(props: TooltipProps) {
 			<button
 				ref={ref}
 				{...triggerProps}
-				className="flex items-center justify-center"
+				className={cn(
+					'flex items-center justify-center',
+					'focus:outline-none focus:ring rounded-xl',
+				)}
 			>
 				{component}
 			</button>

app/routes/machines/components/machine.tsx

@@ -90,10 +90,13 @@ export default function MachineRow({
 	return (
 		<tr
 			key={machine.id}
-			className="group hover:bg-headplane-50 dark:hover:bg-headplane-950"
+			className="'group hover:bg-headplane-50 dark:hover:bg-headplane-950"
 		>
-			<td className="pl-0.5 py-2">
-				<Link to={`/machines/${machine.id}`} className="group/link h-full">
+			<td className="pl-0.5 py-2 focus-within:ring">
+				<Link
+					to={`/machines/${machine.id}`}
+					className={cn('group/link h-full focus:outline-none')}
+				>
 					<p
 						className={cn(
 							'font-semibold leading-snug',