diff --git a/app/components/Header.tsx b/app/components/Header.tsx index aa2ec0a..547bd8c 100644 --- a/app/components/Header.tsx +++ b/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} diff --git a/app/components/Link.tsx b/app/components/Link.tsx index 9a44a76..4eecced 100644 --- a/app/components/Link.tsx +++ b/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, )} > diff --git a/app/components/Tooltip.tsx b/app/components/Tooltip.tsx index 31120dc..d1671de 100644 --- a/app/components/Tooltip.tsx +++ b/app/components/Tooltip.tsx @@ -12,7 +12,6 @@ export interface TooltipProps extends AriaTooltipProps { children: [React.ReactElement, React.ReactElement]; } -// TODO: Fix Button accessibility outline + invoke function Tooltip(props: TooltipProps) { const state = useTooltipTriggerState({ ...props, @@ -37,7 +36,10 @@ function Tooltip(props: TooltipProps) { diff --git a/app/routes/machines/components/machine.tsx b/app/routes/machines/components/machine.tsx index fa1af58..db955f7 100644 --- a/app/routes/machines/components/machine.tsx +++ b/app/routes/machines/components/machine.tsx @@ -90,10 +90,13 @@ export default function MachineRow({ return ( - - + +