Padrões de Qualidade de Componentes Salesforce

Aplique estas verificações a todos os LWCs, componentes Aura e páginas Visualforce que você escrever ou revisar.

Seção 1 — Padrões de Qualidade LWC

1.1 Seleção de Padrão de Acesso a Dados

Escolha o padrão de acesso a dados correto antes de escrever o código do controlador JavaScript:

1.2 Regras de Segurança

1.3 Padrões de SLDS 2 e Estilização

• Nunca codifique cores: color: #FF3366 → use color: var(--slds-c-button-brand-color-background) ou um token SLDS semântico.
• Nunca substitua classes SLDS com !important — componha com propriedades CSS personalizadas.
• Use componentes base <lightning-*> onde quer que existam: lightning-button, lightning-input, lightning-datatable, lightning-card, etc.
• Componentes base incluem SLDS 2 integrado, modo escuro e acessibilidade — evite reimplementar seu comportamento.
• Se estiver usando CSS personalizado, teste em modo claro e modo escuro antes de declarar como concluído.

1.4 Requisitos de Acessibilidade (WCAG 2.1 AA)

Todo componente LWC deve passar em todos estes antes de ser considerado concluído:

• Todas as entradas de formulário têm <label> ou aria-label — nunca use placeholder como o único rótulo
• Todos os botões apenas com ícone têm alternative-text ou aria-label descrevendo a ação
• Todos os elementos interativos são alcançáveis e operáveis por teclado (Tab, Enter, Espaço, Escape)
• A cor não é o único meio de transmitir status — combine com texto, ícone ou atributos aria-*
• Mensagens de erro são associadas à sua entrada via aria-describedby
• O gerenciamento de foco está correto em modais — o foco se move para dentro do modal ao abrir e volta ao fechar

1.5 Regras de Comunicação de Componentes

Para componentes de tela do Flow:

• Eventos que precisam alcançar o tempo de execução do Flow devem definir bubbles: true e composed: true.
• Exponha @api value para ligação bidirecional com a variável do Flow.

1.6 Regras de Desempenho JavaScript

• Sem efeitos colaterais em connectedCallback: ele é executado em cada anexo do DOM — evite DML, computação pesada ou mutações de estado de renderização aqui.
• Proteja renderedCallback: sempre use uma proteção booleana para evitar loops de renderização infinitos.
• Evite armadilhas de propriedade reativa: definir uma propriedade reativa dentro de renderedCallback causa uma nova renderização — use-a apenas quando necessário e protegida.
• Não armazene grandes conjuntos de dados no estado do componente — pagine ou transmita grandes resultados em vez disso.

1.7 Requisitos de Teste Jest

Todo componente que lida com interação do usuário ou recupera dados Apex deve ter um teste Jest:

// Expectativas mínimas de cobertura de teste

…