💄(keyboard) better handling of focus ring

some focus rings were shown even when we only used the mouse. this
globally fixes that

src/frontend/src/primitives/A.tsx

@@ -5,8 +5,8 @@ const link = cva({
   base: {
     textDecoration: 'underline',
     textUnderlineOffset: '2',
-    transition: 'all 200ms',
     cursor: 'pointer',
+    borderRadius: 2,
     '_ra-hover': {
       textDecoration: 'none',
     },
@@ -26,7 +26,7 @@ const link = cva({
 export type AProps = LinkProps & RecipeVariantProps<typeof link>
 
 /**
- * anchor component styled with underline
+ * anchor component styled with underline. Used mostly for external links. Use Link for internal links
  */
 export const A = ({ size, ...props }: AProps) => {
   return <Link {...props} className={link({ size })} />

src/frontend/src/styles/index.css

@@ -6,3 +6,15 @@ body,
 #root {
   height: 100%;
 }
+
+* {
+  outline: none;
+}
+
+[data-rac][data-focus-visible],
+:is(a, button, input, select, textarea):not([data-rac]):focus-visible {
+  outline: 2px solid black;
+  outline-offset: 1px;
+  outline-color: Highlight;
+  outline-color: -webkit-focus-ring-color;
+}