diff --git a/src/components/LinksDropdown.tsx b/src/components/LinksDropdown.tsx index b4e94337..7ba4737a 100644 --- a/src/components/LinksDropdown.tsx +++ b/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 ( @@ -100,12 +100,18 @@ export function LinksDropdown(props: { children: React.ReactNode }) { }, []); const toggleOpen = useCallback(() => { + console.log("yay"); setOpen((s) => !s); }, []); return (
-
+
evt.key === "Enter" && toggleOpen()} + > {props.children}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 910e337e..b86dac16 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -14,7 +14,7 @@ function FooterLink(props: { @@ -50,7 +50,7 @@ export function Footer() {

{t("footer.legal.disclaimerText")}

-
+
{t("footer.links.github")} @@ -61,7 +61,7 @@ export function Footer() {
-
+
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index 237e6899..7ed1bc4f 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -65,14 +65,14 @@ export function Navigation(props: NavigationProps) {
- + @@ -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" > diff --git a/src/setup/index.css b/src/setup/index.css index cbf38334..57409891 100644 --- a/src/setup/index.css +++ b/src/setup/index.css @@ -213,4 +213,9 @@ 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'); } \ No newline at end of file