/* * Un solo rosso per gli errori, anche dove il rosso lo sceglie una libreria. * * Audit TxDOT §2.6 (DGWGEOWORK-9114, spacchettato in DGWGEOWORK-10135) -- WCAG 2.1 AA, 1.4.3 * Contrast (Minimum): un messaggio d'errore e' testo, e deve stare ad almeno 4,5:1 sul proprio * fondale. I rossi d'errore di Bootstrap, del tema Metronic e di toastr non ci arrivano. * * MISURATO (formula di contrasto WCAG, la stessa di `big.contrastRatio`): * * elemento colori prima dopo * ----------------------------------- -------------------------- ----- ----- * .alert-danger #e73d4a su #fbe1e3 3,29 6,40 (#a4262c su #fdeded) * .alert-danger .alert-link #d71b29 su #fbe1e3 4,16 6,40 * .has-error .help-block, label, ... #e73d4a su #fff 4,07 7,26 * .text-danger (vince Metronic) #ed6b75 su #fff 3,02 7,26 * notifica d'errore toastr #fff su #bd362f all'80% 3,99 7,26 (opaca) * * Il valore e' `--gw-field-error-color` (#a4262c), il rosso dei messaggi di campo di * DGWGEOWORK-9110; il fondo dei riquadri e' `--gw-field-error-bg-color` (#fdeded), la stessa * coppia del messaggio accanto al campo. Un ente che cambia il proprio rosso ridichiara quelle due * variabili nel `:root` del suo CSS, e tutte le regole di questo file lo seguono. * * PERCHE' IL FALLBACK IN OGNI var(). * Le due variabili sono dichiarate nel `:root` di `Scripts/BIG/css/big.css`, che entra solo in * `app.min.css`. Questo foglio sta in `Common/Styles`, servito anche da `common.min.css` alle * pagine prima del login (login, registrazione, errori): li' la variabile non esiste, e * `color: var(--indefinita)` non ricade sul valore di Bootstrap -- la dichiarazione diventa * invalida e il colore si eredita dal padre. Il fallback tiene lo stesso valore. Stessa trappola * spiegata in testa a `textContrast.css` e `fieldBorder.css`. * * PERCHE' QUI E NON NEI FILE DELLE LIBRERIE. * `libs/bootstrap`, `metronic` e `libs/toastr` non sono nostri: si aggiornano sostituendoli, e una * correzione scritta dentro sparirebbe. In `app.min.css` la voce `Common/Styles` viene dopo * Bootstrap, toastr di `libs/` e il tema Metronic, quindi a pari specificita' vince per ordine di * sorgente: le regole qui sotto ripetono i selettori della libreria, senza `!important`, cosi' un * tema cliente puo' ancora sovrascriverle per selettore. * L'eccezione e' toastr: `Scripts/BIG/css/toastr/toastr.css` e' una seconda copia caricata DOPO * `Common/Styles`, con `.toast-error` (0,1,0) per il fondo e `#toast-container > div` (1,0,1) per * l'opacita'. Il fondo lo ridice `big.css`, che arriva dopo; l'opacita' la regola qui sotto con * `#toast-container > .toast-error` (1,1,0). Perche' non tutto con l'id: vedi la regola. * * COSA RIDEFINISCE (trappola T3, frontend-accessibility.md §5b): solo `color`, * `background-color`, `border-color` e, sulla sola notifica d'errore, `opacity`. Nessuna misura, * nessun box-shadow, nessun posizionamento. L'opacita' 0,8 di toastr schiariva il fondo rosso * contro la pagina sottostante -- su una mappa scura o chiara il rapporto cambiava con lo sfondo -- * e la notifica d'errore resta opaca; le altre notifiche (successo, info, avviso) restano come sono. * * L'ERRORE NON E' AFFIDATO AL SOLO COLORE (WCAG 1.4.1): il testo dei messaggi e l'icona della * notifica d'errore restano dove erano. Cambia la tinta, non il segnale. * * COSA QUESTO FILE NON TOCCA. * - I bordi dei campi in errore: li governa gia' `--gw-field-error-color` (App/app.css, * fieldBorder.css, DGWGEOWORK-9110). * - Le regole di `big.css` (`.invalid-fields`, il banner ``, `.__has-error`): * `big.css` e' caricato dopo questo foglio, e si correggono la', dalle sue variabili. */ /* Riquadro d'errore di Bootstrap */ .alert-danger { background-color: var(--gw-field-error-bg-color, #fdeded); border-color: var(--gw-field-error-bg-color, #fdeded); color: var(--gw-field-error-color, #a4262c); } .alert-danger .alert-link { color: var(--gw-field-error-color, #a4262c); } /* Testo d'errore di Bootstrap: stessi selettori di libs/bootstrap/css/bootstrap.css */ .text-danger, a.text-danger:hover, a.text-danger:focus { color: var(--gw-field-error-color, #a4262c); } .has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label, .has-error .input-group-addon, .has-error .form-control-feedback { color: var(--gw-field-error-color, #a4262c); } /* Testo d'errore del tema Metronic: stessi selettori di metronic/assets/global/css/components-md.css */ .form-group.form-md-line-input.has-error label, .form-group.form-md-line-input.has-error .input-group-addon, .form-group.form-md-line-input.has-error .form-control.edited:not([readonly]) ~ label, .form-group.form-md-line-input.has-error .form-control.form-control-static ~ label, .form-group.form-md-line-input.has-error .form-control:focus:not([readonly]) ~ label, .form-group.form-md-line-input.has-error .form-control.focus:not([readonly]) ~ label, .form-group.form-md-line-input.has-error .form-control.edited:not([readonly]) ~ .help-block, .form-group.form-md-line-input.has-error .form-control.form-control-static ~ .help-block, .form-group.form-md-line-input.has-error .form-control:focus:not([readonly]) ~ .help-block, .form-group.form-md-line-input.has-error .form-control.focus:not([readonly]) ~ .help-block, .has-error .md-checkbox label, .has-error.md-checkbox label, .has-error .md-radio label, .has-error.md-radio label { color: var(--gw-field-error-color, #a4262c); } /* * Notifica d'errore (toastr): sul rosso conforme e opaca. Il testo resta il bianco di toastr. * Il FONDO sta su `.toast-error` nudo, (0,1,0) come la libreria, e NON su `#toast-container > ...`: * un CSS dell'ente che ridisegna tutte le notifiche con `.toast` deve continuare a vincere. * BAU-ER lo fa (fondo giallo, `.toast-message { color: black }`): con il fondo rosso imposto da un * selettore con l'id, il testo nero dell'ente sarebbe finito sul rosso a 2,9:1. * Qui vince su `libs/toastr` per ordine di sorgente; sulla seconda copia di toastr, caricata dopo, lo * ridice `big.css`. L'opacita' invece deve battere `#toast-container > div` (1,0,1), e prende l'id. */ .toast-error { background-color: var(--gw-field-error-color, #a4262c); } #toast-container > .toast-error { opacity: 1; }