accessibility tweaks

Author: kguzek

src/app/[locale]/(auth)/profile/page.tsx

@@ -32,7 +32,7 @@ export default async function Profile() {
         className="gap-2"
         after={
           <>
-            <div className="my-4 flex flex-col gap-4 sm:flex-row-reverse">
+            <div className="my-4 flex flex-col items-center gap-4 sm:flex-row">
               <LogoutButton />
               <DeleteAccountButton user={user} />
             </div>

src/components/navigation/user-widget.tsx

@@ -22,15 +22,15 @@ export function UserWidget({
   return (
     <div className="grid h-full max-w-[90%] place-items-center font-light sm:max-w-full">
       {user == null ? (
-        <div className="flex flex-col-reverse gap-x-2 gap-y-4 sm:flex-row">
-          <Button asChild variant="glow" className="min-w-28" onClick={closeMenu}>
-            <ClientLink href="/signup">{t("profile.formDetails.signup")}</ClientLink>
-          </Button>
+        <div className="flex flex-col gap-x-2 gap-y-4 sm:flex-row">
           <Button asChild className="min-w-28" onClick={closeMenu}>
             <ClientLink href={`/login?from=${encodeURIComponent(pathname)}`}>
               {t("loginShort")}
             </ClientLink>
           </Button>
+          <Button asChild variant="glow" className="min-w-28" onClick={closeMenu}>
+            <ClientLink href="/signup">{t("profile.formDetails.signup")}</ClientLink>
+          </Button>
         </div>
       ) : (
         <Link

src/components/ui/button.tsx

@@ -94,8 +94,11 @@ export function Button({
       {...props}
       style={getColorMixStyle(sliderProgress, "success", "error")}
       disabled={loading || props.disabled}
+      // use comma notation to return using the original event handler
       onMouseEnter={(event_) => (startHoverTimer(), props.onMouseEnter?.(event_))}
       onMouseLeave={(event_) => (stopHoverTimer(), props.onMouseLeave?.(event_))}
+      onFocus={(event_) => (startHoverTimer(), props.onFocus?.(event_))}
+      onBlur={(event_) => (stopHoverTimer(), props.onBlur?.(event_))}
       onClick={(event_) => click(event_)}
       onTouchMove={(event_) => {
         const touch = event_.touches[0];

src/components/ui/config.ts

@@ -11,7 +11,7 @@ export const buttonVariants = cva(
           "bg-accent shadow-xs text-primary-strong shadow-xs hover:bg-accent/80 hover:text-primary-strong/80",
         cancel: "border-background-soft shadow-xs shadow-xs hover:text-error",
         destructive:
-          "bg-background border-error shadow-xs text-error shadow-xs hover:bg-error hover:text-primary-strong",
+          "bg-transparent border-error shadow-xs text-error shadow-xs hover:bg-error hover:text-primary-strong",
         "super-destructive":
           "relative overflow-hidden bg-success text-primary-strong sm:text-primary hover:text-primary-strong shadow-xs min-w-14",
         outline: