Use an accessible dialog for the How to Play popup

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/components/HowToPlay.tsx

@@ -1,5 +1,6 @@
 import { useLanguage } from "@/LanguageContext";
 import { translations } from "@/translations";
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from "@headlessui/react";
 import React from "react";
 
 interface HowToPlayProps {
@@ -10,25 +11,27 @@ interface HowToPlayProps {
 const HowToPlay: React.FC<HowToPlayProps> = ({ open, onClose }) => {
   const { language } = useLanguage();
   const t = translations[language];
-  if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80" onClick={onClose}>
-      <div className="relative max-w-md rounded-lg bg-gray-300 p-8" onClick={(e) => e.stopPropagation()}>
-        <button
-          onClick={onClose}
-          className="absolute top-2 right-4 cursor-pointer text-4xl text-gray-500 hover:text-gray-900"
-          aria-label="Close"
-        >
-          &times;
-        </button>
-        <p className="text-accent-primary mb-4 text-2xl font-bold">{t.howToPlayTitle}</p>
-        <ul className="list-disc space-y-2 text-gray-700">
-          <li>{t.howToPlay1}</li>
-          <li>{t.howToPlay2}</li>
-          <li>{t.howToPlay3}</li>
-        </ul>
+    <Dialog open={open} onClose={onClose} className="relative z-50">
+      <DialogBackdrop className="fixed inset-0 bg-black/80" />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <DialogPanel className="relative max-w-md rounded-lg bg-gray-300 p-8">
+          <button
+            onClick={onClose}
+            className="absolute top-2 right-4 cursor-pointer text-4xl text-gray-500 hover:text-gray-900"
+            aria-label={t.close}
+          >
+            &times;
+          </button>
+          <DialogTitle className="text-accent-primary mb-4 text-2xl font-bold">{t.howToPlayTitle}</DialogTitle>
+          <ul className="list-disc space-y-2 text-gray-700">
+            <li>{t.howToPlay1}</li>
+            <li>{t.howToPlay2}</li>
+            <li>{t.howToPlay3}</li>
+          </ul>
+        </DialogPanel>
       </div>
-    </div>
+    </Dialog>
   );
 };
 

src/app/translations.ts

@@ -25,6 +25,7 @@ export const translations = {
     goalReached: "You named {count} UiO Gamers in {time}!",
     guessFailed: "Something went wrong. Please try again.",
     sessionExpired: "Your session has expired. Reload the page to log in again.",
+    close: "Close",
   },
   no: {
     submittedAnswers: "Dine svar",
@@ -51,5 +52,6 @@ export const translations = {
     goalReached: "Du navnga {count} UiO-Gamere på {time}!",
     guessFailed: "Noe gikk galt. Prøv igjen.",
     sessionExpired: "Økten din har utløpt. Last inn siden på nytt for å logge inn igjen.",
+    close: "Lukk",
   },
 };