Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta Para iniciantes
  • Algo errado?
#275 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
82/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
nextjs, react, typescript
Domínio
accessibility, frontend

Direção de pesquisa

Comece em src/features/developer/components/user-profile-client.tsx e rastreie como badgeDialogOpen controla o modal README Badge. Adicione o bloqueio da rolagem do fundo, restaurando o estado overflow anterior quando o diálogo for fechado ou desmontado, e adicione um botão de fechar no canto superior direito com o aria label traduzido especificado. A tarefa estará concluída quando o fundo não rolar enquanto o modal estiver aberto e qualquer um dos dois botões de fechar o dispensar.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
31
Forks
25
Merge médio
10h 4min
PRs com merge (30d)
29

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de O2sa/DevImpact

Todas as issues de O2sa/DevImpact

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.