Make settings tabbable

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,

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>
   );
 }

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
+          <button
-            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"
+            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

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"