debugfest/two-zero-four-eight

Feature Request: Add Accessibility Features and Theme Switcher

Aperta

#4 aperta il 11 ott 2025

Vedi su GitHubGuida contributor
 (1 commento) (0 reazioni) (1 assegnatario)TypeScript (5 fork)auto 404
enhancementgood first issuehacktoberfest

Metriche repository

Star
 (0 stelle)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

The current game design lacks accessibility options such as dark mode and larger/tactile buttons, making it harder for visually impaired or younger players to enjoy. A theme switcher and accessibility improvements can significantly enhance usability.

🎯 Proposed Solution

  • Add a Theme Switcher for light/dark modes.
  • Introduce accessibility settings:
    • Larger buttons.
    • High-contrast color scheme.
    • Keyboard navigation and focus indicators.
  • Save theme and accessibility preferences locally.

✅ Expected Behavior

  • Users can toggle between light and dark modes.
  • Buttons are larger and accessible via keyboard.
  • All UI elements meet WCAG AA contrast standards.

💻 Technical Notes

  • Use CSS variables or Tailwind theme configuration for theming.
  • Ensure ARIA roles for interactive elements.
  • Use prefers-color-scheme media query for default theme detection.

🧪 Test Steps

  1. Switch to Dark Mode → verify consistent UI styling.
  2. Navigate with keyboard → ensure focus states are visible.
  3. Check contrast ratio using Lighthouse Accessibility Audit.

Guida contributor

Direzione di ricerca
Inizia comprendendo la struttura di stile corrente (ad esempio, come sono gestiti i temi). Implementa un contesto React per lo stato del tema e persistilo usando localStorage. Usa proprietà personalizzate CSS per colori e dimensioni. Assicurati che tutti gli elementi interattivi abbiano contorni di focus visibili e attributi ARIA appropriati. Testa con navigazione da tastiera e strumenti di controllo del contrasto.
Tech stack
typescriptreacttailwindcss
Dominio
frontendaccessibility
Tipo issue
Funzionalità
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
ReactGitCSS
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70