Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

enhancement: Add body scroll lock and top-right close button to README Badge Modal

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#275 2 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@Navid-007 arbeitet bereits daran.

Seit 29.10.2026.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
82/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
nextjs, react, typescript
Bereich
accessibility, frontend

Rechercherichtung

Beginne in src/features/developer/components/user-profile-client.tsx und verfolge, wie badgeDialogOpen das README Badge-Modal steuert. Füge eine Sperre des Scrollens im Hintergrund hinzu, die den vorherigen overflow-Zustand wiederherstellt, wenn der Dialog geschlossen oder ausgehängt wird, und füge oben rechts eine Schaltfläche zum Schließen mit dem angegebenen übersetzten aria label hinzu. Fertig, wenn der Hintergrund nicht mehr scrollt, während das Modal geöffnet ist, und beide Schaltflächen zum Schließen es schließen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

a11y beginner friendly easy enhancement good first issue ui

In src/features/developer/components/user-profile-client.tsx, clicking 'Get README Badge' opens a modal dialog (badgeDialogOpen). When open, mouse wheel scrolling on the backdrop scrolls the underlying page. In addition, the modal only has a bottom 'Close' button without a standard top-right X close icon.

Motivation

Proper modal UX requires locking background scroll and offering an intuitive top-right dismissal button for accessibility and desktop/mobile usability.

Tasks
  • When badgeDialogOpen is true, set document.body.style.overflow = "hidden" (and restore on close/unmount).
  • Add an X icon button in the top-right corner of the dialog header with aria-label={t("profile.close")}.
  • Ensure clicking the X button closes the dialog.
Files to Check
  • src/features/developer/components/user-profile-client.tsx

[!TIP]
🚀 Want to contribute?
Comment assign me to be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨

Vorherrschende Sprache
TypeScript
Sterne
31
Forks
25
Ø Merge
10 Std. 4 Min.
Gemergte PRs (30 T.)
29

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus O2sa/DevImpact

Alle Issues in O2sa/DevImpact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.