Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Make the welcome bubble a real button

Cerrado
  • ¿Algo no está bien?
#336 3 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@kachamsiddarth ya está trabajando en esto.

Desde el 26/10/2026.

  • #383 de @kachamsiddarth — fusionado

Evaluación

Este issue todavía no se ha evaluado.

Descripción

accessibility enhancement good first issue hacktoberfest widget

The welcome bubble ("Need help? Chat with us!") opens the chat when clicked, but it's a div with a click listener. Keyboard and screen reader users can't reach it or tell it does anything. Only its small close button is a real button.

What to do

  • Render the bubble's text as a <button type="button"> that opens the chat. Keep the close button as a separate button next to it, not inside it (a button inside a button is invalid HTML).
  • Keep the look the same. The wrapper can stay a div for positioning.
  • Keep the existing behavior: clicking the text opens the chat, the close button only hides the bubble.

Where to look

  • packages/widget/src/dom/bubble.ts (WelcomeBubble constructor)
  • .cc-bubble and .cc-bubble-close in packages/widget/src/styles/widget.css
  • packages/widget/tests/widget.test.ts and packages/widget/tests/loader.test.ts (search for cc-bubble)

Acceptance criteria

  • The bubble text is a <button> reachable with Tab, and Enter or Space opens the chat
  • The close button is a sibling, not a child, of that button
  • No visual change (a before and after screenshot in the PR)
  • Tests for keyboard activation and for dismiss
  • Changeset for @chatcops/widget (patch)
  • pnpm test:coverage, pnpm lint and pnpm size pass

The chat panel (dist/chatcops.panel.js) has a 14 kB gzip budget and about 800 B of it is left, shared by several open issues. Keep the change small, and check pnpm size before you open the PR.

Lenguaje dominante
TypeScript
Estrellas
13
Forks
7
Merge medio
3 h 28 min
PR fusionados (30 d)
296

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codercops/chatcops

Todos los issues de codercops/chatcops

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.