feat: aprimoramentos de performance, UX, SEO e acessibilidade#2
feat: aprimoramentos de performance, UX, SEO e acessibilidade#2
Conversation
Performance: - Adicionar debounce (300ms) nas atualizações do preview para reduzir processamento - Implementar loading states nos botões de exportação PDF/DOCX UX/UI: - Adicionar modo escuro com toggle e persistência em localStorage - Implementar validação visual em tempo real para email e WhatsApp - Adicionar indicador de progresso do preenchimento do formulário - Melhorar feedback visual com estados de sucesso/erro SEO: - Adicionar meta tags completas (description, keywords, OG, Twitter) - Incluir canonical URL e configurações de robots - Melhorar títulos das páginas para SEO Acessibilidade: - Adicionar ARIA labels e attributes em todos os campos do formulário - Implementar aria-invalid, aria-required e aria-describedby - Melhorar navegação por teclado e leitores de tela - Adicionar roles apropriados (alert, list) Design: - Criar e adicionar favicon SVG - Migrar cores hardcoded para variáveis CSS para suportar modo escuro - Melhorar consistência visual entre páginas
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| valor = `${valor.slice(0,9)}-${valor.slice(9)}`; | ||
| formatted = `${formatted.slice(0,9)}-${formatted.slice(9)}`; | ||
| } | ||
| e.target.value = formatted; |
There was a problem hiding this comment.
Bug: WhatsApp Long Number Formatting Flaw
The WhatsApp formatting logic incorrectly slices the formatted string after adding parentheses and spaces. When valor.length >= 10, the code checks the raw digit count but then slices formatted which already contains formatting characters, causing the hyphen to be inserted at the wrong position. For an 11-digit number like "11987654321", this produces "(11) 9876-54321" instead of "(11) 98765-4321".
| async function gerarDOCX() { | ||
| const dados = coletarDados(); | ||
| const { Document, Packer, Paragraph, HeadingLevel, TextRun } = window.docx; | ||
| const btn = event?.target || document.querySelector('.btn:contains("DOCX")'); |
There was a problem hiding this comment.
Bug: Selector Incompatibility Breaks Core Functionality
The selector .btn:contains("DOCX") uses the :contains() pseudo-class which is not supported by native querySelector. This jQuery-specific selector will cause querySelector to throw an error if event?.target is undefined, breaking the fallback button selection logic for the DOCX export function.
Performance:
UX/UI:
SEO:
Acessibilidade:
Design:
Note
Adds persisted dark mode, comprehensive SEO metadata and favicon, form progress + live validation with ARIA, and debounced preview with export loading states.
localStorage(styles.css,gerador.css,index.html,gerador.html,script.js)..progress-*) and visual success/error states for inputs.script.js).index.html,gerador.html).aria-label,aria-required,aria-invalid,aria-describedby,role="alert", and list roles to form controls and errors.favicon.svgand reference it in pages.Written by Cursor Bugbot for commit 3a93c0c. This will update automatically on new commits. Configure here.