From 9f41228a0c450a67267ce6ad42820654285be296 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Tue, 21 Nov 2023 19:24:45 +0100
Subject: [PATCH] Make settings tabbable

---
 src/components/Button.tsx           | 2 +-
 src/components/layout/Sidebar.tsx   | 7 ++++---
 src/pages/settings/CaptionsPart.tsx | 7 ++++---
 src/pages/settings/ThemePart.tsx    | 5 +++--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 07417aff..4f36093f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -37,7 +37,7 @@ export function Button(props: Props) {
     colorClasses = "bg-buttons-danger hover:bg-buttons-dangerHover text-white";
 
   let classes = classNames(
-    "cursor-pointer inline-flex items-center justify-center rounded-lg font-medium transition-[transform,background-color] duration-100 active:scale-105 md:px-8",
+    "tabbable cursor-pointer inline-flex items-center justify-center rounded-lg font-medium transition-[transform,background-color] duration-100 active:scale-105 md:px-8",
     props.padding ?? "px-4 py-3",
     props.className,
     colorClasses,
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 87cc4db5..2386af49 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -24,10 +24,11 @@ export function SidebarLink(props: {
   onClick?: () => void;
 }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={props.onClick}
       className={classNames(
-        "w-full px-3 py-2 flex items-center space-x-3 cursor-pointer rounded my-2",
+        "tabbable w-full px-3 py-2 flex items-center space-x-3 cursor-pointer rounded my-2",
         props.active
           ? "bg-settings-sidebar-activeLink text-settings-sidebar-type-activated"
           : null
@@ -41,6 +42,6 @@ export function SidebarLink(props: {
         icon={props.icon}
       />
       <span>{props.children}</span>
-    </div>
+    </button>
   );
 }
diff --git a/src/pages/settings/CaptionsPart.tsx b/src/pages/settings/CaptionsPart.tsx
index 0aa0b52c..43e3b351 100644
--- a/src/pages/settings/CaptionsPart.tsx
+++ b/src/pages/settings/CaptionsPart.tsx
@@ -35,12 +35,13 @@ export function CaptionPreview(props: {
               "radial-gradient(102.95% 87.07% at 100% 100%, #EEAA45 0%, rgba(165, 186, 151, 0.56) 54.69%, rgba(74, 207, 254, 0.00) 100%), linear-gradient(180deg, #48D3FF 0%, #3B27B2 100%)",
           }}
         >
-          <div
-            className="bg-black absolute right-3 top-3 text-white bg-opacity-25 duration-100 transition-[background-color,transform] active:scale-110 hover:bg-opacity-50 p-2 rounded-md cursor-pointer"
+          <button
+            type="button"
+            className="tabbable bg-black absolute right-3 top-3 text-white bg-opacity-25 duration-100 transition-[background-color,transform] active:scale-110 hover:bg-opacity-50 p-2 rounded-md cursor-pointer"
             onClick={props.onToggle}
           >
             <Icon icon={props.fullscreen ? Icons.X : Icons.EXPAND} />
-          </div>
+          </button>
 
           <div className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] bottom-0 p-4">
             <div
diff --git a/src/pages/settings/ThemePart.tsx b/src/pages/settings/ThemePart.tsx
index 01829041..9130dadf 100644
--- a/src/pages/settings/ThemePart.tsx
+++ b/src/pages/settings/ThemePart.tsx
@@ -30,13 +30,14 @@ function ThemePreview(props: {
 }) {
   return (
     <div
-      className={classNames(props.selector, "cursor-pointer group")}
+      className={classNames(props.selector, "cursor-pointer group tabbable")}
       onClick={props.onClick}
     >
       {/* Little card thing */}
       <div
+        tabIndex={0}
         className={classNames(
-          "w-full h-32 relative rounded-lg border bg-gradient-to-br from-themePreview-primary/20 to-themePreview-secondary/10 bg-clip-content transition-colors duration-150",
+          "tabbable scroll-mt-32 w-full h-32 relative rounded-lg border bg-gradient-to-br from-themePreview-primary/20 to-themePreview-secondary/10 bg-clip-content transition-colors duration-150",
           props.active
             ? "border-themePreview-primary"
             : "border-transparent group-hover:border-white/20"