Enhance accessibility: Add ARIA roles and keyboard navigation to reset confirmation dialog in FlagQuiz page; remove unused CSS class from AchievementButton component

This commit is contained in:
sHa
2025-08-11 16:15:58 +03:00
parent 292c7e88b6
commit 21e400e989
2 changed files with 12 additions and 6 deletions

View File

@@ -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>