Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#275 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
82/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
nextjs, react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu tại src/features/developer/components/user-profile-client.tsx và theo dõi cách badgeDialogOpen điều khiển modal README Badge. Thêm khóa cuộn nền để khôi phục trạng thái overflow trước đó khi hộp thoại đóng hoặc bị tháo gỡ, đồng thời thêm nút đóng ở góc trên bên phải với aria label đã dịch theo yêu cầu. Hoàn tất khi nền không còn cuộn trong lúc modal mở và một trong hai nút đóng đều có thể đóng modal.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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! ✨

Ngôn ngữ chính
TypeScript
Star
31
Fork
25
Merge trung bình
10 giờ 4 phút
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của O2sa/DevImpact

Tất cả issue của O2sa/DevImpact

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.