NIN-11 | Improve accessibility for Modal and Button components

__tests__/components/Modal.test.tsx

@@ -335,7 +335,7 @@ describe("Modal", () => {
         expect(screen.getByRole("dialog")).toBeInTheDocument();
       });
 
-      const confirmButton = screen.getByRole("button", { name: "Confirm" });
+      const confirmButton = screen.getByRole("button", { name: "Confirm Test Modal" });
       await user.click(confirmButton);
 
       await waitFor(() => {
@@ -363,7 +363,7 @@ describe("Modal", () => {
         expect(screen.getByRole("dialog")).toBeInTheDocument();
       });
 
-      const footerButton = screen.getByRole("button", { name: "Close Modal" });
+      const footerButton = screen.getByRole("button", { name: "Close Modal Test Modal" });
       await user.click(footerButton);
 
       await waitFor(() => {

app/components/ControllerPlayground/index.tsx

@@ -106,7 +106,7 @@ export function ControllerPlayground() {
             ? "Cheat detected"
             : modalType === "reset"
             ? "Reset progress confirmation"
-            : undefined
+            : "Welcome to Nintroller"
         }
         onConfirm={modalType === "reset" ? handleResetProgress : undefined}
       >

app/components/ui/Button.tsx

@@ -10,6 +10,7 @@ type Props = {
   className?: string;
   variant?: "primary" | "secondary" | "emerald";
   fullWidth?: boolean;
+  "aria-label"?: string;
 };
 
 export const Button = forwardRef<HTMLButtonElement, Props>(
@@ -20,6 +21,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
       className = "",
       variant = "primary",
       fullWidth = false,
+      "aria-label": ariaLabel,
     },
     ref
   ) => {
@@ -28,6 +30,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
         ref={ref}
         type="button"
         onClick={onClick}
+        aria-label={ariaLabel}
         className={cx(
           "cursor-pointer rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200",
           variant === "primary"

app/components/ui/Modal/content/AuthorContent.tsx

@@ -10,6 +10,7 @@ export function AuthorContent() {
           href="https://daviddomingo.dev"
           target="_blank"
           rel="noopener noreferrer"
+          aria-label="Visit daviddomingo.dev - David Domingo's website"
           className="relative h-24 w-24 perspective-1000 coin-flip-container cursor-pointer"
         >
           <div className="relative h-full w-full preserve-3d transition-transform duration-700 coin-flip-inner">
@@ -41,22 +42,24 @@ export function AuthorContent() {
       <p className="text-center">Built and maintained by</p>
       <div className="space-y-2">
         <p className="flex items-center justify-center gap-2">
-          <GitHubIcon className="h-5 w-5 text-emerald-400" />
+          <GitHubIcon className="h-5 w-5 text-emerald-400" aria-hidden="true" />
           <Link
             href="https://github.com/avicrayyy"
             target="_blank"
             rel="noopener noreferrer"
+            aria-label="View @avicrayyy on GitHub"
             className="font-pixel text-emerald-400 underline hover:text-emerald-300 transition-colors"
           >
             @avicrayyy
           </Link>
         </p>
         <p className="flex items-center justify-center gap-2">
-          <GlobeIcon className="h-5 w-5 text-emerald-400" />
+          <GlobeIcon className="h-5 w-5 text-emerald-400" aria-hidden="true" />
           <Link
             href="https://daviddomingo.dev"
             target="_blank"
             rel="noopener noreferrer"
+            aria-label="Visit daviddomingo.dev"
             className="font-pixel text-emerald-400 underline hover:text-emerald-300 transition-colors"
           >
             daviddomingo.dev

app/components/ui/Modal/index.tsx

@@ -134,6 +134,7 @@ export function Modal({
             }}
             fullWidth
             variant="emerald"
+            aria-label={`${footerButtonText} ${title}`}
           >
             {footerButtonText}
           </Button>