sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 04:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/AchievementButton.svelte
View File

@@ -43,11 +43,6 @@
color: var(--color-primary); color: var(--color-primary);
} }
.achievement-button .qh-label {
color: var(--color-text-secondary);
margin-right: 0.35rem;
}
.achievement-button .qh-value { .achievement-button .qh-value {
font-weight: 600; font-weight: 600;
display: flex; display: flex;

13
src/pages/FlagQuiz.svelte
View File

@@ -415,7 +415,18 @@
<!-- Reset Confirmation Dialog --> <!-- Reset Confirmation Dialog -->
{#if showResetConfirmation} {#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-dialog">
<div class="confirmation-header"> <div class="confirmation-header">
<h3>⚠️ Reset All Data</h3> <h3>⚠️ Reset All Data</h3>