Componentes
56. Atividade e comentários
seed-componentes.md v1.43 · §56seção 62 de 9856-atividade-e-comentarios-estavel-f7-3-2026-08-16.md · MD5 7d4e2011Título completo no canon: Atividade e comentários — estável (F7.3, 2026-08-16) · CM1–CM12 · integrado ao gabarito A8
A fronteira que esta seção existia para resolver — e ela caiu do lado fácil. A F7.3 abriu com uma dúvida estrutural registrada: o dispositivo C85 do
estudo-clickup-completo.mddescrevia o comentário como cartão dentro do cartão do objeto, o que é peça em peça e o CP2 proíbe no caso base. A saída seria escrever uma exceção (CP2-c) ou rebaixar o comentário a linha. A rodada zero barrou a produção: um dispositivo observado não é leitura do arquétipo, ainda mais quando esse dispositivo É a fronteira em disputa.A navegação real aconteceu em 2026-08-16, autorizada pelo Rafael, em modo somente leitura. E a leitura desfez a premissa: o comentário NÃO é cartão. É bloco com avatar, autoria, texto e rodapé — sem borda, sem sombra, sem raio —, dentro de um painel que é a peça. Medido no nosso gabarito depois de implementado:
border 0px · box-shadow none · border-radius 0px. Não há peça dentro de peça, e o CP2 não precisa de exceção. ACP2-cfica DESCARTADA.Base. Rodada zero: navegação real (4 telas, sessão logada da SEED, somente leitura, sem reprodução de dado de cliente). R1/R2/R3: herdadas do §49 no que se aplica — disclosure (
aria-expanded+aria-controls), revelação poropacitye nuncavisibility(Spectrum, nov/2025), e o padrão de menu button do WAI-ARIA para o botão dividido do composer.
56.1 Os contratos#
| # | Contrato | O que ele descarta, e por quê |
|---|---|---|
| CM1 | O comentário é BLOCO, não cartão: avatar, autoria, horário, texto, rodapé — sem borda, sem sombra, sem raio | Cartão. Ele criaria peça dentro de peça, que o CP2 proíbe, para separar coisas que o espaço já separa |
| CM2 | DOIS PESOS no mesmo fluxo, e são duas anatomias declaradas. Comentário: bloco com avatar e ações. Evento de sistema: linha compacta, com marcador, sem avatar e sem ações — ele registra, não conversa | Uma anatomia só, com variação de estilo. Evento com botão de responder convida a conversar com o log |
| CM3 | A atividade é painel IRMÃO do corpo, com rolagem própria | Ser mais uma seção do corpo rolável: a conversa some quando o registro é longo, e é justamente nela que se decide o que fazer |
| CM4 | A atividade acompanha o registro corrente e é substituída junto com ele ao navegar entre irmãos (PD3) | Painel de atividade global |
| CM5 | No hover e no :focus-within, o cabeçalho TROCA o metadado pela ação: as ações de gestão entram no lugar do horário |
Empilhar ações ao lado do horário — o cabeçalho do comentário é estreito, e disputar espaço ali faz a autoria quebrar em duas linhas. Dispositivo distinto do PD9, onde as ações são reveladas sem tirar nada do lugar |
| CM6 | Menção é TEXTO em cor de link, inline | Chip. Chip é a taxonomia de status do §22, e usar a mesma forma para pessoa faria a régua mentir |
| CM7 | Sequência de eventos colapsa atrás de um disclosure, com aria-expanded + aria-controls, e o rótulo diz quantos itens aparecem |
Mostrar tudo. Uma sequência de eventos automáticos empurra a conversa para fora da tela |
| CM8 | Ações permanentes no rodapé (curtir, reagir, Responder) e ações de gestão no cabeçalho, reveladas. Duas zonas, dois propósitos | Zona única: reagir é frequente e precisa estar sempre visível; atribuir e excluir não |
| CM9 | O composer é FIXO no rodapé do painel | Composer no fim da lista: escrever passaria a depender de rolar até o fim de algo que cresce |
| CM10 | O envio é sempre EXPLÍCITO, por botão dividido (§54): ação padrão "Comentar" e variantes no menu | Enter envia. Num campo onde se escreve parágrafo técnico, Enter enviando é perda de trabalho |
| CM11 | Filtro "só comentários" esconde os eventos; o contador do cabeçalho conta COMENTÁRIOS e não muda ao filtrar | Contador de itens visíveis: um número que muda quando se filtra deixa de ser referência |
| CM12 | A autoria nunca quebra em duas linhas; quem cede por falta de largura é o horário (LD7) | Deixar o nome quebrar. Sem saber quem disse, o comentário não serve; sem o minuto exato, serve |
56.2 Números MEDIDOS na produção#
| Medida | Valor |
|---|---|
| Largura do painel de atividade (regime modal) | 340px |
Limiar em que a atividade empilha abaixo do corpo (container query peca) |
760px |
| Altura máxima do painel empilhado | 340px |
| Alvo das ações de gestão do comentário | 44 × 32px |
| Alvo do filtro, do disclosure e do botão dividido | 44px no eixo curto |
| Pares de cor medidos (com §54) | 42 pares × 2 temas = 84 · 0 |
56.3 Acessibilidade#
- O painel é
<section>nomeada poraria-labelledby; a lista é<ol>— a ordem importa. - Nada depende de hover:
:focus-withinrevela as mesmas ações, e o alvo tem 44px de largura. - O disclosure de sequência e o filtro declaram estado (
aria-expanded,aria-pressed) e o filtro anuncia a mudança em live region. - O botão dividido do composer implementa o teclado do WAI-ARIA por inteiro: ↓ abre no primeiro item, ↑ no último, setas circulam, Home/End vão às pontas, Esc fecha e devolve o foco ao gatilho; e o gatilho nunca executa a ação padrão (BD7).
- Contraste: um achado real. O marcador do evento de sistema nasceu com
border-default, que mede 1,49 sobre branco e 2,32 no escuro — reprova o SC 1.4.11 nos dois temas. Daria para declará-lo decorativo (um bullet não porta informação), mas seria conveniência: ele é a única pista de que ali começa um item, e pista que some no monitor ruim não é pista. Recebeu a mesma tinta do texto que marca (text-muted) e passa com folga.
56.4 Validação#
| Camada | Placar |
|---|---|
suite-detalhe.mjs — blocos CM (11 guardas) e BD (8 guardas) |
parte dos 73 · 0 |
suite-composicao.mjs (render, 2 temas) |
33 · 0 |
suite-container.mjs — blocos CQ e RF |
13 · 0 |
contraste-f73.py — 42 pares × 2 temas |
84 · 0 |
56.5 Pendências#
| # | Pendência | Por que fica aberta |
|---|---|---|
| CM-P1 | Thread de respostas não tem leitura: nenhum comentário do ambiente visitado tinha resposta encadeada, então não há contador de respostas nem anatomia de tópico observados | Escrever de dedução repetiria o erro que a rodada zero existe para impedir. Nasce quando houver caso real para navegar |
| CM-P2 | Anexo dentro do comentário foi visto no fluxo (evento "anexou arquivo") mas não como conteúdo do comentário | Idem |
| CM-P3 | Comentário resolvido / atribuído aparece no menu de variantes do composer e não tem estado visual especificado | Depende de decidir se resolver oculta o tópico ou só o marca — decisão de produto, não de DS |
PROMOÇÃO DE §57 E §58 A
estável— 2026-08-16. Veredito do Rafael sobre os dois gabaritos, depois do conserto dos dois defeitos que ele achou no A5: "tudo ok, pode prosseguir". Com isso a F7.4 fica com dois dos três arquétipos entregues e promovidos; o terceiro, A15 carga de trabalho, está BLOQUEADO por ausência de instância no ambiente de referência — o workspace não tem visualização de carga criada, e criar uma seria ação de escrita, proibida no modo somente leitura. Registrado na §14.1 doestudo-clickup-completo.md.
Também cita o §56: banco-escolha, tela-detalhe.