diff --git a/src/frontend/src/primitives/A.tsx b/src/frontend/src/primitives/A.tsx index 3dc9e69b..5b11cc57 100644 --- a/src/frontend/src/primitives/A.tsx +++ b/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 /** - * 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 diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css index 630c8f8a..b081c857 100644 --- a/src/frontend/src/styles/index.css +++ b/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; +}