Describe the bug
I use a keyboard for most of my web navigation. When I am on a user's dashboard (/[username]) and I press the Tab key to cycle through the buttons (like "Customize", "Copy Markdown", or the Theme toggles), I can't tell which element I am currently focused on.
Expected behavior
There should be a highly visible outline or glow around interactive elements when they receive keyboard focus.
Possible Solution
It looks like we might have globally disabled the default browser outline, but didn't replace it with custom Tailwind classes. We should add focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:outline-none to all interactive button and a tags in the UI components.
Describe the bug
I use a keyboard for most of my web navigation. When I am on a user's dashboard (
/[username]) and I press theTabkey to cycle through the buttons (like "Customize", "Copy Markdown", or the Theme toggles), I can't tell which element I am currently focused on.Expected behavior
There should be a highly visible outline or glow around interactive elements when they receive keyboard focus.
Possible Solution
It looks like we might have globally disabled the default browser outline, but didn't replace it with custom Tailwind classes. We should add
focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:outline-noneto all interactivebuttonandatags in the UI components.