Make the welcome bubble a real button
I maintainer di solito rispondono entro 1 giorno
Valutazione
Questa issue non è ancora stata valutata.
Descrizione
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
divfor 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(WelcomeBubbleconstructor).cc-bubbleand.cc-bubble-closeinpackages/widget/src/styles/widget.csspackages/widget/tests/widget.test.tsandpackages/widget/tests/loader.test.ts(search forcc-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 lintandpnpm sizepass
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.
- Lingua principale
- TypeScript
- Stelle
- 13
- Fork
- 7
- Merge medio
- 3h 15m
- PR unite (30g)
- 329
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di codercops/chatcops
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 25/100
codercops/chatcops#546 · 4 commenti ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 64/100
codercops/chatcops#542 · 3 commenti ·
I maintainer di solito rispondono entro 1 giorno
-
Server: validate `rateLimit.windowMs` before creating the limiterForse già presa @ashutoshpalhare l’ha presa 3 giorni fa. Aperta
codercops/chatcops#452 · 1 commento · 1 assegnatario ·
I maintainer di solito rispondono entro 1 giorno
-
Widget: a "New reply" button when the visitor has scrolled upForse già presa @srujankaleru2007 l’ha presa 4 giorni fa. Apertaenhancement widget
codercops/chatcops#420 · 3 commenti · 1 assegnatario ·
I maintainer di solito rispondono entro 1 giorno
-
chatcops test: --url to test a deployed serverForse già presa @srujankaleru2007 l’ha presa 4 giorni fa. Apertaenhancement testing
codercops/chatcops#419 · 3 commenti · 1 assegnatario ·
I maintainer di solito rispondono entro 1 giorno
Tutte le issue di codercops/chatcops
Issue simili
-
Add: Class TV ModaApertacheck:passed streams:add
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 65/100
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 62/100
GiganticMinecraft/seichi-playguide#183 ·
I maintainer di solito rispondono entro 1 giorno
-
area: core complexity: easy impact: medium
Difficoltà 2/5 1-3 ore Idoneità per principianti 86/100
ueberdosis/tiptap#8668 ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
longbridge/nsh#804 ·
I maintainer di solito rispondono entro 1 giorno