/* * O anel de foco do teclado, para o produto inteiro. * * O tema do Angular Material anuncia o foco de um `.md-button` com um véu cinza de 20 % — * `rgba(158, 158, 158, 0.2)`, que sobre o `#FAFAFA` da página dá **1,14:1** — e, antes disso, * apaga o anel nativo do navegador com `.md-button:focus { outline: none }`. O resultado é que * quem navega só pelo teclado não vê onde está: na Busca, as cinco paradas de botão da barra * ficavam invisíveis enquanto as paradas seguintes — os cabeçalhos ordenáveis e as linhas da * lista, componentes novos da reforma — traziam um anel perfeitamente visível * (`BUG-20260916-indicador-de-foco-quase-invisivel-na-barra`, WCAG 2.1 SC 1.4.11, que pede 3:1). * * Esta folha devolve o anel, na mesma cor e espessura que a Busca já usa. Ela não mexe no véu: * o véu continua onde estava, como reforço, e o que decide é o `outline` — uma propriedade que * o tema gerado em tempo de execução não escreve. * * **Por que uma folha só, e por que esta:** * * - Ela precisa vir DEPOIS de `angular-material.min.css`, porque é de lá que sai o * `outline: none` que ela desfaz. A vitória é por ordem de origem, e não por `!important`. * - A folha da própria tela não serve: a view é renderizada antes da moldura, então o * `appendStylesheet` dela entra ANTES do Material (medido: `index.css` na posição 21 do * ``, `angular-material.min.css` na 23). Uma regra de `.md-button` escrita ali perde. * - `style.css` chega a `layout.phtml` e a `report.phtml`, mas não a `login.phtml` nem a * `moved.phtml` — e a tela de login também tem botões do Material. * - A folha de utilitários que chegava às quatro molduras — `.p-8`, `.m-16` e mais 1.277 classes * geradas por escada — também não serviria: uma regra semântica não mora numa folha atômica. * Ela já nem existe: uso real medido de duas classes, e removida por inteiro (ADR-011). * * As quatro molduras a carregam por último, e `IndicadorDeFocoTest` cobra o diretório inteiro: * é o que impede a próxima moldura de nascer sem ela. */ /* * `md-focused` é a classe que o próprio Material aplica — e ele só a aplica quando o foco veio * do teclado ou de código (`MdButtonDirective`, `$mdInteraction.getLastInteractionType()`). * Pendurar o anel nela é o que faz o clique de mouse continuar sem anel nenhum, sem precisar do * `:focus-visible` e das versões de navegador que ele pede. * * O `outline-offset` é NEGATIVO de propósito. Os itens do menu lateral são botões de largura * inteira (305 px) dentro de um `md-sidenav` que corta o que transborda; um anel para fora seria * aparado nas laterais. Para dentro ele nunca é cortado, e é o mesmo `-2px` que `.busca-linha` * já usa pelo mesmo motivo. * * A COR NÃO MORA MAIS AQUI: ela é `--foco-anel`, e o valor de cada tema está em `paleta.css` * (ADR-006). O papel do anel é TINTA — ele se mede contra o que está embaixo —, e por isso ele * é dos tokens que clareiam no escuro (ADR-001): índigo 900 sobre superfície clara, índigo 100 * sobre superfície escura. * * As oito medições que `IndicadorDeFocoTest` cobra, quatro por tema: * * claro #1A237E sobre #FAFAFA (página) 12,69:1 * claro #1A237E sobre #FFFFFF (barra de filtros, menu lateral, diálogo) 13,24:1 * claro #1A237E sobre #E8EAF6 (chip) 11,06:1 * claro #FFFFFF sobre #3F51B5 (barra superior) 6,87:1 * escuro #C5CAE9 sobre #121212 (página) 11,60:1 * escuro #C5CAE9 sobre #1E1E1E (cartão, sidenav) 10,32:1 * escuro #C5CAE9 sobre #2C2C2C (diálogo, menu) 8,64:1 * escuro #FFFFFF sobre #3F51B5 (barra superior) 6,87:1 */ .md-button:not([disabled]).md-focused, a.md-button:not([disabled]):focus-visible { outline: 2px solid var(--foco-anel); outline-offset: -2px; } /* * O LINK QUE NÃO É BOTÃO — a trilha ("Início"), o "Ver no mapa", o link de uma célula de tabela. * * Ele nunca teve regra: o Material não apaga o anel de uma âncora comum, então o navegador dava a * dele e ninguém reparou. O portão de navegador mediu o que o navegador dá: **1 px**, na cor que * ele escolhe (`#EEEEEE` no escuro, 16,15:1 — contraste ótimo e espessura insuficiente). A WCAG * 2.1 SC 1.4.11 pede que o indicador seja perceptível, e o piso que este produto adotou é 2 px; * um link de 1 px ao lado de um botão de 2 px também é incoerência visível. * * `:focus-visible`, e não `:focus`: o anel é para quem navega por teclado. Um clique de ponteiro * num link não deve deixar moldura para trás. * * `outline-offset` POSITIVO aqui, ao contrário dos botões: o link tem o tamanho da palavra, e um * anel para dentro cortaria as letras em vez de cercá-las — é o mesmo raciocínio de * `.busca-ordenar` em `index.css`. */ a:not(.md-button):not([disabled]):focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; } /* * A BARRA SUPERIOR É O CASO À PARTE, e continua sendo — mas não mais por ser "a única superfície * escura do produto". Ela deixou de ser: o tema escuro dá superfície escura à página inteira. * * O que a mantém à parte é outra coisa, e essa não mudou: ela é a única superfície que NÃO * acompanha o tema. `--acao` vale `#3F51B5` nos dois, porque como superfície preenchida o * índigo institucional é o que mantém o produto reconhecível (ADR-001). * * Sobre ela, `--foco-anel` daria 1,93:1 no claro — reprovado — e 4,25:1 no escuro, que passaria. * A exceção continua valendo para os dois assim mesmo: a superfície é a MESMA nos dois temas, e * um anel que trocasse de cor sobre um fundo que não trocou seria uma segunda regra sem nada que * ela respondesse. `--foco-anel-sobre-acao` dá 6,87:1 nos dois, pela mesma razão. * * É ela que carrega as três primeiras paradas de teclado de TODA tela, e é por isso que uma * exceção de sete linhas se paga aqui. */ md-toolbar .md-button:not([disabled]).md-focused, md-toolbar a.md-button:not([disabled]):focus-visible { outline-color: var(--texto-sobre-acao); } /* * A EXCEÇÃO DA EXCEÇÃO: a `md-toolbar` de DENTRO de um diálogo não é a barra da marca. * * `componentes.css` tira dela o preenchimento — `background-color: inherit`, a mesma superfície * do diálogo —, mas o seletor acima casa qualquer `md-toolbar`, e por isso a pegava também. No * tema claro isso é anel `#FFFFFF` sobre superfície `#FFFFFF`: **1:1**, e no "Fechar", que é o * único controle de sair de quase todo diálogo (WCAG 2.1 SC 2.4.7 e 1.4.11). No escuro a * superfície é escura e o branco passava, que é por que só o claro acusava. * * O anel volta a ser `--foco-anel`, o mesmo das outras superfícies: 13,24:1 sobre `#FFFFFF` no * claro, 8,64:1 sobre a `--superficie-elevada` do diálogo no escuro. O `md-dialog` na frente * dá peso (0,3,2) contra (0,3,1), e a regra vence pelos dois lados — peso e ordem. */ md-dialog md-toolbar .md-button:not([disabled]).md-focused, md-dialog md-toolbar a.md-button:not([disabled]):focus-visible { outline-color: var(--foco-anel); } /* * O `md-radio-group` é UM ponto de tabulação, e as setas andam entre as opções — é o padrão ARIA * de `radiogroup`, e o Material o implementa direito: `tabindex="0"` vai para o grupo, e não para * cada rádio. * * O que ele NÃO faz é mostrar o foco. Medido na stack: com o grupo focado pelo teclado ele ganha * `.md-focused` e mais nada — `outline: none`, `box-shadow: none`. O único destaque visível é a * borda âmbar do rádio marcado, que é estado de SELEÇÃO e está lá focado ou não. Quem navega só * pelo teclado não vê onde está (WCAG 2.1 SC 2.4.7). * * O anel vai no rádio MARCADO, e não em volta do grupo inteiro: num `radiogroup` a seta troca a * seleção, de modo que o marcado é sempre o atual — o anel acompanha a navegação em vez de * emoldurar as três opções de uma vez. * * `--foco-anel`, o mesmo dos botões e pelas mesmas medições: 13,24:1 sobre a superfície dos * formulários de relatório e do painel do Panorama no claro, 10,32:1 no escuro. * `outline-offset` negativo porque a linha do rádio ocupa a largura inteira do container, e um * anel para fora seria aparado. * * São 20+ formulários de relatório além do Panorama: o defeito era do produto, e a correção * também. */ md-radio-group:not([disabled]).md-focused md-radio-button.md-checked { outline: 2px solid var(--foco-anel); outline-offset: -2px; } /* * ONDE O ANEL CAI SOBRE A COR DA AÇÃO — duas exceções nomeadas, pelo mesmo motivo do bloco da * barra superior acima. * * `--foco-anel` é um degrau ESCURO do matiz da marca, e é a escolha certa sobre as superfícies * claras onde quase todo controle do produto vive: 13,24:1 sobre a superfície dos formulários de * relatório no claro. Sobre `--acao`, que é o próprio matiz, ele mede **1,93:1** — contra os 3:1 * da WCAG 2.1 SC 1.4.11. * * São dois os controles cujo fundo é `--acao`, e o portão de navegador os mediu lado a lado: * * - **o link de salto**, que é a primeira parada de teclado de toda tela (US-039). Ele tem uma * ironia própria: era o único controle do produto cuja razão de existir é receber foco, e o * único cujo anel sumia ao recebê-lo; * - **o link da página ATUAL da paginação**, que é preenchido para marcar onde a pessoa está. * Este é anterior a esta entrega — vem da consolidação da paginação (task_04) — e nenhuma * leitura de folha o pegaria: as duas regras estão certas em isolamento, e é o PAR que falha. * * `--texto-sobre-acao` é o token do que se põe em cima de `--acao`, e por definição tem contraste * com ele — a mesma saída que a barra superior já usa, com o mesmo token e pela mesma medição. * * `outline-offset` NEGATIVO nos dois: o link de salto está colado no canto da janela, e o link de * paginação é uma pílula justa. Um contorno para fora seria aparado em ambos. */ /* * A FORMA DO SELETOR COPIA A DA REGRA QUE ELA EXCETUA, e isso não é estilo: é aritmética. * * A regra genérica acima é `a:not(.md-button):not([disabled]):focus-visible`, que pesa (0,3,1). * Um `a.salto:focus-visible` pesa (0,2,1) e PERDE — vindo depois, na mesma folha. O portão de * navegador mediu os mesmos 1,93:1 com a correção escrita logo acima dela, que é o modo de falha * mais caro desta folha: a regra existe, está certa, e não vale. * * Repetir os dois `:not()` devolve o empate de peso, e aí a ORDEM decide — que é a alavanca que o * ADR-017 manda usar. */ a.salto:not(.md-button):not([disabled]):focus-visible, a.salto:not(.md-button):not([disabled]):focus { outline: 2px solid var(--texto-sobre-acao); outline-offset: -4px; } .pagination li.active a:focus-visible, .paginacao li.active a:focus-visible { outline-color: var(--texto-sobre-acao); outline-offset: -3px; } /* * OS DOIS CONTROLES QUE NÃO MOSTRAVAM FOCO NENHUM — medidos por `portao-de-estrutura.js` (E2E-052), * que percorre a tela por TAB e lê o indicador de cada parada. * * Nenhum dos dois é regressão desta entrega: os dois vinham assim, e nenhuma leitura de folha os * encontraria, porque em nenhum dos dois a folha errada é a nossa. * * 1. A CAIXA DE SELEÇÃO. O Angular Material não desenha contorno ao focar um `md-checkbox`: ele * acende um disco atrás da caixa, o `::before` do `.md-container`, em `rgba(0,0,0,0.055)`. * Medido: **1,13:1** sobre a superfície branca dos formulários — contra os 3:1 da WCAG 2.1 SC * 1.4.11. É um realce que existe no código e não existe para o olho. * * 2. O AUTOCOMPLETAR. Medido: `border-width: 0px` no contêiner de dentro, com * `md-input-focused` aplicada. Ele tinha um anel aqui, e NÃO TEM MAIS: a exceção nomeada de * `componentes.css` passou a desenhar o contorno no invólucro `md-autocomplete`, que engrossa * para 2px por `:focus-within` como qualquer campo. O anel desta folha, somado a esse contorno, * dava dois indicadores concêntricos no mesmo controle — o que o bloco do foco do campo, lá, * existe para evitar. * * A saída da caixa de seleção é a mesma dos outros controles desta folha, e é a razão de ela * existir: `outline` em `--foco-anel`, que não é pintura de componente e por isso não disputa com * o desenho da biblioteca. * * `.md-focused` é a classe que o PRÓPRIO Material aplica, e ele só a aplica quando o foco veio do * teclado — é o `:focus-visible` dele, disponível em toda versão de navegador que este produto * atende. */ /* * O ANEL VAI NO `md-checkbox` INTEIRO, e não no `.md-container` de dentro — é a mesma escolha do * bloco do `md-radio-group` acima, e pela mesma razão: o rótulo faz parte do controle. * * A caixa sozinha tem 18px de lado. Um anel só em volta dela é um quadrado de 22px numa linha de * texto, e quem navega por teclado precisa achar ONDE está numa lista de opções, não qual pixel * está marcado. Emoldurar o rótulo junto é o que torna a parada visível de relance. * * Foi também o que o portão pediu: com o anel no filho, a medição continuava lendo o disco de * `rgba(0,0,0,0.047)` do `::before` — porque é o host que recebe o foco, e era nele que a régua * procurava. */ md-checkbox:not([disabled]).md-focused { outline: 2px solid var(--foco-anel); outline-offset: 2px; }