From 21e400e98962354b905d96b3f271d78e4265e5bf Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Mon, 11 Aug 2025 16:15:58 +0300
Subject: [PATCH] Enhance accessibility: Add ARIA roles and keyboard navigation
 to reset confirmation dialog in FlagQuiz page; remove unused CSS class from
 AchievementButton component

---
 src/components/AchievementButton.svelte |  5 -----
 src/pages/FlagQuiz.svelte               | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/AchievementButton.svelte b/src/components/AchievementButton.svelte
index 249185f..947ebdd 100644
--- a/src/components/AchievementButton.svelte
+++ b/src/components/AchievementButton.svelte
@@ -43,11 +43,6 @@
     color: var(--color-primary);
   }
 
-  .achievement-button .qh-label {
-    color: var(--color-text-secondary);
-    margin-right: 0.35rem;
-  }
-
   .achievement-button .qh-value {
     font-weight: 600;
     display: flex;
diff --git a/src/pages/FlagQuiz.svelte b/src/pages/FlagQuiz.svelte
index b283b6f..ea4026e 100644
--- a/src/pages/FlagQuiz.svelte
+++ b/src/pages/FlagQuiz.svelte
@@ -415,7 +415,18 @@
 
   <!-- Reset Confirmation Dialog -->
   {#if showResetConfirmation}
-    <div class="confirmation-overlay" on:click={(e) => e.target === e.currentTarget && cancelReset()}>
+    <div
+      class="confirmation-overlay"
+      role="button"
+      tabindex="0"
+      aria-label="Close confirmation dialog (click background or press Escape)"
+      on:click={(e) => e.target === e.currentTarget && cancelReset()}
+      on:keydown={(e) => {
+        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+          cancelReset();
+        }
+      }}
+    >
       <div class="confirmation-dialog">
         <div class="confirmation-header">
           <h3>⚠️ Reset All Data</h3>