debugfest/two-zero-four-eight

Feature Request: Add Accessibility Features and Theme Switcher

Offen

#4 geöffnet am 11.10.2025

Auf GitHub ansehenContributor Guide
 (1 Kommentar) (0 Reaktionen) (1 zugewiesene Person)TypeScript (5 Forks)auto 404
enhancementgood first issuehacktoberfest

Repository-Metriken

Stars
 (0 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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.

Contributor Guide

Research-Richtung
Beginnen Sie damit, die aktuelle Stilstruktur zu verstehen (z.B. wie Themen verwaltet werden). Implementieren Sie einen React Kontext für den Themenzustand und persistieren Sie ihn mit localStorage. Verwenden Sie CSS Benutzerdefinierte Eigenschaften für Farben und Größen. Stellen Sie sicher, dass alle interaktiven Elemente sichtbare Fokusumrandungen und korrekte ARIA Attribute haben. Testen Sie mit Tastaturnavigation und Kontrastprüfwerkzeugen.
Tech Stack
typescriptreacttailwindcss
Domain
frontendaccessibility
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Halber Tag
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactGitCSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70