fix: add accessible improvements (#2546)

Author: guhrodrrigues

apps/web/src/components/button.tsx

@@ -43,14 +43,14 @@ const getAppearance = (appearance: Appearance) => {
       return [
         'bg-white text-black',
         'hover:bg-white/90',
-        'focus:ring-slate-8 focus:bg-white/90 focus:outline-none focus:ring-2',
+        'focus-visible:ring-slate-10 focus-visible:bg-white/90 focus-visible:outline-none focus-visible:ring-2',
         'selection:text-black',
       ];
     case 'gradient':
       return [
         'bg-gradient border-[#34343A] backdrop-blur-[1.25rem]',
         'hover:bg-gradientHover',
-        'focus:bg-gradientHover focus:outline-none focus:ring-2 focus:ring-white/20',
+        'focus-visible:bg-gradientHover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20',
       ];
     default:
       unreachable(appearance);

apps/web/src/components/sections/integration.tsx

@@ -38,7 +38,7 @@ const IntegrationSection = () => {
                 mouseX.set(e.clientX - left);
                 mouseY.set(e.clientY - top);
               }}
-              className="group relative min-w-full max-w-full sm:min-w-[250px] sm:max-w-[250px] md:min-w-[280px] md:max-w-[280px] rounded-3xl bg-slate-4 p-px"
+              className="group relative min-w-full max-w-full sm:min-w-[250px] sm:max-w-[250px] md:min-w-[280px] md:max-w-[280px] rounded-3xl bg-slate-4 p-px outline-none focus-visible:ring-slate-7 focus-visible:ring-1"
               href={item.href}
             >
               <motion.div

apps/web/src/components/sections/playground/index.tsx

@@ -54,7 +54,7 @@ const PlaygroundSection = () => {
                 <Tabs.Trigger
                   key={tab.value}
                   value={tab.value}
-                  className="group relative px-3 py-2 md:px-4"
+                  className="group relative px-3 py-2 md:px-4 rounded-xl outline-none"
                 >
                   <span
                     className={classNames(
@@ -69,7 +69,7 @@ const PlaygroundSection = () => {
                   <AnimatePresence mode="wait" initial={false}>
                     {activeTab === tab.value && (
                       <motion.div
-                        className="absolute inset-0 size-full rounded-xl bg-gradient-to-b from-zinc-800 to-zinc-950 border border-zinc-800 z-0"
+                        className="absolute inset-0 size-full rounded-xl bg-gradient-to-b from-zinc-800 to-zinc-950 border border-zinc-800 group-focus-visible:ring-slate-8 group-focus-visible:ring-2 z-0"
                         layoutId="activeTab"
                         transition={{
                           type: 'spring',

apps/web/src/components/sections/tools/interactive-demo.tsx

@@ -48,7 +48,7 @@ export const InteractiveDemo = () => {
           <button
             type="button"
             key={tool.title}
-            className="relative px-4 py-3 md:p-6 max-w-md cursor-pointer text-start outline-none group"
+            className="group relative px-4 py-3 md:p-6 max-w-md cursor-pointer text-start outline-none rounded-[20px] focus-visible:ring-slate-8 focus-visible:ring-1"
             onClick={() => {
               setActiveTool(tool.value);
             }}
@@ -58,7 +58,11 @@ export const InteractiveDemo = () => {
               {tool.value === activeTool && (
                 <motion.div
                   layoutId="background"
-                  className="absolute inset-0 -z-10 bg-[#17171799] rounded-[20px] shadow-[0px_32px_64px_-16px_transparent,0px_16px_32px_-8px_transparent,0px_8px_16px_-4px_transparent,0px_4px_8px_-2px_transparent,0px_-8px_16px_-1px_transparent,0px_2px_4px_-1px_transparent,0px_0px_0px_1px_transparent,inset_0px_0px_0px_1px_#ffffff1a,inset_0px_1px_0px_#ffffff26]"
+                  className={classNames(
+                    'absolute inset-0 -z-10 bg-[#17171799] rounded-[20px]',
+                    'shadow-[0px_32px_64px_-16px_transparent,0px_16px_32px_-8px_transparent,0px_8px_16px_-4px_transparent,0px_4px_8px_-2px_transparent,0px_-8px_16px_-1px_transparent,0px_2px_4px_-1px_transparent,0px_0px_0px_1px_transparent,inset_0px_0px_0px_1px_#ffffff1a,inset_0px_1px_0px_#ffffff26]',
+                  )}
+                  onFocus={() => setActiveTool(tool.value)}
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
@@ -134,7 +138,7 @@ export const InteractiveDemo = () => {
                     key={tool.title}
                     value={tool.value}
                     className={classNames(
-                      'relative capitalize px-1 text-sm font-normal transition-colors',
+                      'relative capitalize px-1 text-sm font-normal transition-colors outline-none focus-visible:ring-2 focus-visible:ring-slate-7',
                       tool.value === activeTool
                         ? 'text-cyan-11'
                         : 'text-slate-10 hover:text-slate-12',
@@ -161,7 +165,7 @@ export const InteractiveDemo = () => {
                 <Tabs.Content
                   key={tool.title}
                   value={tool.value}
-                  className="relative z-10 bg-black pl-4 pr-9 pt-3 h-32 max-md:overflow-x-auto"
+                  className="relative z-10 bg-black pl-4 pr-9 pt-3 h-32 max-md:overflow-x-auto outline-none"
                 >
                   {tool.value === 'spam' ? (
                     <div className="flex flex-col items-center justify-center pt-6">

apps/web/src/components/topbar.tsx

@@ -17,7 +17,7 @@ export function Topbar({
       {...props}
     >
       <Link
-        className="-ml-[.375rem] flex scroll-m-2 rounded-md pr-[.375rem] transition-colors focus:outline-none focus:ring focus:ring-slate-4"
+        className="-ml-[.375rem] flex scroll-m-2 rounded-md pr-[.375rem] transition-colors focus:outline-none focus-visible:ring focus-visible:ring-slate-4"
         href="/"
       >
         <Logo />