Tabbable styles in header & footer

src/components/LinksDropdown.tsx

@@ -55,7 +55,7 @@ function DropdownLink(props: {
       onClick={props.onClick}
       href={props.href}
       className={classNames(
-        "cursor-pointer flex gap-3 items-center m-4 font-medium transition-colors duration-100",
+        "tabbable cursor-pointer flex gap-3 items-center m-3 p-1 rounded font-medium transition-colors duration-100",
         props.highlight
           ? "text-dropdown-highlight hover:text-dropdown-highlightHover"
           : "text-dropdown-text hover:text-white",
@@ -72,7 +72,7 @@ function CircleDropdownLink(props: { icon: Icons; href: string }) {
   return (
     <GoToLink
       href={props.href}
-      className="w-11 h-11 rounded-full bg-dropdown-contentBackground text-dropdown-text hover:text-white transition-colors duration-100 flex justify-center items-center"
+      className="tabbable w-11 h-11 rounded-full bg-dropdown-contentBackground text-dropdown-text hover:text-white transition-colors duration-100 flex justify-center items-center"
     >
       <Icon className="text-2xl" icon={props.icon} />
     </GoToLink>
@@ -100,12 +100,18 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
   }, []);
 
   const toggleOpen = useCallback(() => {
+    console.log("yay");
     setOpen((s) => !s);
   }, []);
 
   return (
     <div className="relative is-dropdown">
-      <div className="cursor-pointer" onClick={toggleOpen}>
+      <div
+        className="cursor-pointer tabbable rounded-full"
+        tabIndex={0}
+        onClick={toggleOpen}
+        onKeyUp={(evt) => evt.key === "Enter" && toggleOpen()}
+      >
         {props.children}
       </div>
       <Transition animation="slide-down" show={open}>

src/components/layout/Footer.tsx

@@ -14,7 +14,7 @@ function FooterLink(props: {
     <a
       href={props.href}
       target="_blank"
-      className="inline-flex items-center space-x-3 transition-colors duration-200 hover:text-type-emphasis"
+      className="tabbable rounded py-2 px-3 inline-flex items-center space-x-3 transition-colors duration-200 hover:text-type-emphasis"
       rel="noreferrer"
     >
       <Icon icon={props.icon} className="text-2xl" />
@@ -50,7 +50,7 @@ export function Footer() {
           </h3>
           <p className="mt-3">{t("footer.legal.disclaimerText")}</p>
         </div>
-        <div className="space-x-[2rem]">
+        <div className="space-x-[0.5rem] -ml-3">
           <FooterLink icon={Icons.GITHUB} href={conf().GITHUB_LINK}>
             {t("footer.links.github")}
           </FooterLink>
@@ -61,7 +61,7 @@ export function Footer() {
             <Dmca />
           </div>
         </div>
-        <div className="hidden items-center justify-end md:flex">
+        <div className="hidden items-center justify-end md:flex -mr-3">
           <Dmca />
         </div>
       </WideContainer>

src/components/layout/Navigation.tsx

@@ -65,14 +65,14 @@ export function Navigation(props: NavigationProps) {
           </div>
           <div className="pointer-events-auto px-7 py-5 relative flex flex-1 items-center">
             <div className="flex items-center flex-1 space-x-3">
-              <Link className="block" to="/">
+              <Link className="block tabbable rounded-full" to="/">
                 <BrandPill clickable />
               </Link>
               <a
                 href={conf().DISCORD_LINK}
                 target="_blank"
                 rel="noreferrer"
-                className="text-xl text-white"
+                className="text-xl text-white tabbable rounded-full"
               >
                 <IconPatch icon={Icons.DISCORD} clickable downsized />
               </a>
@@ -80,7 +80,7 @@ export function Navigation(props: NavigationProps) {
                 href={conf().GITHUB_LINK}
                 target="_blank"
                 rel="noreferrer"
-                className="text-xl text-white"
+                className="text-xl text-white tabbable rounded-full"
               >
                 <IconPatch icon={Icons.GITHUB} clickable downsized />
               </a>

src/setup/index.css

@@ -214,3 +214,8 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
 .grecaptcha-badge {
   display: none !important;
 }
+
+.tabbable:focus {
+  outline: 1px solid theme('colors.themePreview.primary');
+  box-shadow: 0 0 10px theme('colors.themePreview.secondary');
+}