A11y

src/app/(tools)/layout.tsx

@@ -43,7 +43,7 @@ export default function ToolsLayout({
           href="https://github.com/t3dotgg/quickpic"
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:underline"
+          className="hover:underline text-white"
         >
           View on GitHub
         </a>

src/app/(tools)/rounded-border/rounded-tool.tsx

@@ -200,13 +200,18 @@ export function RoundedTool() {
       <div className="flex flex-col gap-4 p-4">
         <p className="text-center">Round the corners of any image</p>
         <div className="flex justify-center">
-          <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
-            <span>Upload Image</span>
+          <label
+            htmlFor="roundedImageInput"
+            tabIndex={0}
+            className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-orange-400"
+          >
+            Upload Image
             <input
               type="file"
               onChange={handleFileUpload}
               accept="image/*"
               className="hidden"
+              id="roundedImageInput"
             />
           </label>
         </div>

src/app/(tools)/square-image/square-tool.tsx

@@ -117,13 +117,18 @@ export const SquareTool: React.FC = () => {
           Create square images with custom backgrounds. Fast and free.
         </p>
         <div className="flex justify-center">
-          <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
-            <span>Upload Image</span>
+          <label
+            htmlFor="squareImageInput"
+            tabIndex={0}
+            className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-orange-400"
+          >
+            Upload Image
             <input
               type="file"
               onChange={handleImageUpload}
               accept="image/*"
               className="hidden"
+              id="squareImageInput"
             />
           </label>
         </div>

src/app/(tools)/svg-to-png/svg-tool.tsx

@@ -2,9 +2,7 @@
 import { usePlausible } from "next-plausible";
 import { useMemo, useState } from "react";
 import { useLocalStorage } from "@/hooks/use-local-storage";
-
 import { type ChangeEvent } from "react";
-
 type Scale = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 
 function scaleSvg(svgContent: string, scale: Scale) {
@@ -185,12 +183,17 @@ export function SVGTool() {
           Make SVGs into PNGs. Also makes them bigger. (100% free btw.)
         </p>
         <div className="flex justify-center">
-          <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
-            <span>Upload SVG</span>
+          <label
+            htmlFor="svgInput"
+            tabIndex={0}
+            className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-orange-400"
+          >
+            Upload SVG
             <input
               type="file"
               onChange={handleFileUpload}
               accept=".svg"
+              id="svgInput"
               className="hidden"
             />
           </label>

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function Home() {
           href="https://github.com/t3dotgg/quickpic"
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:underline"
+          className="hover:underline text-white"
         >
           View on GitHub
         </a>