/* * Il confine dei pulsanti chiari dice DOVE si clicca, come il contorno di un campo dice dove si * scrive: WCAG 2.1 AA 1.4.11 (Non-text Contrast) gli chiede almeno 3:1 sul fondale. Nessuno dei * due pulsanti chiari dell'applicazione ci arrivava (DGWGEOWORK-10138, audit TxDOT §2.6, * indice DGWGEOWORK-9114). * * I DUE PULSANTI. * - `.btn-default` di Bootstrap: Previous, Cancel, «Back to detail view», Discard. Bordo #ccc, e * in hover #adadad: il confine si schiariva proprio sotto il mouse. * - `.btn.default` di Metronic: il pulsante solo icona della lente accanto ai campi di ricerca * degli elenchi (template, pratiche da firmare, anagrafiche, tenant...). Bordo UGUALE al fondo * (#e1e5ec): il confine non c'era affatto, c'era solo la differenza fra il fondo grigio e il * bianco della pagina. * * MISURATO (formula di contrasto WCAG, sullo stile calcolato del pulsante vero nell'app in * esecuzione, 20/10/2026, in locale): * * bordo su #fff su #f5f5f5 su #f3f5f9 su #eee * -------------------------------- ------- ---------- ---------- ------- * #ccc .btn-default a riposo 1,61 1,47 1,47 1,38 * #adadad .btn-default in hover 2,24 2,06 2,06 1,93 * #e1e5ec .btn.default (lente) 1,26 1,16 1,16 1,09 * #767676 (questo file) 4,54 4,17 4,16 3,91 * * PERCHE' #767676, E PERCHE' LA STESSA VARIABILE DEI CAMPI. * E' `--gw-field-border-color` di `fieldBorder.css`: il perche' del valore (tiene su tutti i * pannelli grigi dell'applicazione, non solo sul bianco) e' scritto la', e non si ricopia qui. * Usare la stessa variabile da' un confine solo a campi e pulsanti chiari: nei gruppi * `.input-group` la lente si sovrappone di 1px al campo (`margin-left: -1px` di Bootstrap), e due * grigi diversi sullo stesso pixel si vedrebbero come una cucitura. E un tema cliente che * ridichiara la variabile sposta campi e pulsanti insieme. * * LA DECISIONE, DETTA ESPLICITAMENTE. * La guida «Understanding 1.4.11» non chiede un confine a un pulsante che ha un testo visibile: * il testo basta a dire che li' c'e' un controllo. Si e' scelto di seguire l'auditor lo stesso * (Francesco Cauzzi, 19/10/2026, descrizione di DGWGEOWORK-10138), sapendo che il cambio si vede * su ogni pulsante chiaro di ogni cliente. * * PERCHE' COSI' TANTI SELETTORI. * Bootstrap e Metronic ridichiarano il bordo in ogni stato (hover, focus, active, aperto, * disabilitato), ognuno con la sua specificita': fino a (0,3,0) per Bootstrap, (0,5,0) per * Metronic. Una regola sola sul pulsante a riposo vincerebbe solo a riposo, e il confine * tornerebbe chiaro col mouse sopra -- il caso che l'audit segnala. Qui si ripetono GLI STESSI * selettori delle due librerie, cosi' ogni regola ha la specificita' di quella che sostituisce e * vince per ORDINE DI SORGENTE: in `app.min.css` la cartella `Common/Styles` sta dopo * `libs/bootstrap/css/bootstrap.css` e dopo `metronic/assets/global/css/components-md.css`, e nel * layout frontend `common.min.css` e' l'ultimo dei fogli. Non si sale di specificita' apposta: * il CSS del tenant entra DOPO il bundle (`App/common/services/appSession.js`), e un tema che * ridisegna `.btn-default:hover` con lo stesso selettore deve continuare a vincere. Niente * `!important`, per la stessa ragione. * * IL DISABILITATO. * Bootstrap tiene il disabilitato identico a riposo e in hover (non reagisce al mouse): qui lo * stesso, quindi anche le sue regole ricevono la variabile. Resta riconoscibile per * `opacity: .65` e `cursor: not-allowed` di `.btn[disabled]`, che questo file non tocca. * WCAG 1.4.11 esenta i controlli inattivi. * * TRAPPOLA T3 (frontend-accessibility.md §5b): SOLO IL COLORE. * Tranne che sul «Back» del form di accesso, che un bordo non ce l'ha (ultimo blocco del file). * Larghezza, stile, raggio, padding, ombra e fondo restano quelli delle librerie: un bordo che * cambia spessore sposterebbe ogni riga di pulsanti dell'applicazione. Nessun bordo viene * aggiunto -- viene reso visibile quello che c'era gia'. * * COSA QUESTO FILE NON TOCCA, DELIBERATAMENTE. * - `.btn.btn-outline.default`: e' il pulsante "contornato" di Metronic, nessun markup lo usa. * - `.btn.default.btn-no-border`: e' senza bordo per scelta, e nessun markup lo usa. Se un giorno * lo si usasse, in hover riceverebbe il bordo da questo file (stessa specificita', ordine dopo). * - Il colore del testo e dell'icona: il testo di `.btn-default` e' gia' a 12,63:1, l'icona della * lente (#666) a 4,54:1 sul fondo a riposo e 3,48:1 in hover. Sotto 3:1 (2,84) solo mentre il * tasto del mouse e' premuto sopra il pulsante (`:active:hover`), che e' un istante e non uno * stato: la lente non resta mai `.active`. * * COSA QUESTO FILE NON PROTEGGE. * Le spec di `Tests/Tests.GeoWorks.Web/App/common/lightButtonBorder.test.js` iniettano i fogli * veri nell'ordine del bundle e misurano il colore calcolato: tengono le librerie e questo file, * non il CSS di un tenant, che sta nel database dell'installazione. */ /* Bootstrap `.btn-default`: gli stessi selettori di libs/bootstrap/css/bootstrap.css, stato per stato, compresi quelli del disabilitato. */ .btn-default, .btn-default:focus, .btn-default.focus, .btn-default:hover, .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle, .btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus, .open > .btn-default.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default.focus { border-color: var(--gw-field-border-color); } /* Metronic `.btn.default` (la lente della ricerca): gli stessi selettori di metronic/assets/global/css/components-md.css, stato per stato. */ .btn.default:not(.btn-outline), .btn.default:not(.btn-outline):focus, .btn.default:not(.btn-outline).focus, .btn.default:not(.btn-outline):hover, .btn.default:not(.btn-outline):active, .btn.default:not(.btn-outline).active, .open > .btn.default:not(.btn-outline).dropdown-toggle, .btn.default:not(.btn-outline):active:hover, .btn.default:not(.btn-outline):active:focus, .btn.default:not(.btn-outline):active.focus, .btn.default:not(.btn-outline).active:hover, .btn.default:not(.btn-outline).active:focus, .btn.default:not(.btn-outline).active.focus, .open > .btn.default:not(.btn-outline).dropdown-toggle:hover, .open > .btn.default:not(.btn-outline).dropdown-toggle:focus, .open > .btn.default:not(.btn-outline).dropdown-toggle.focus, .btn.default:not(.btn-outline).disabled:hover, .btn.default:not(.btn-outline).disabled:focus, .btn.default:not(.btn-outline).disabled.focus, .btn.default:not(.btn-outline)[disabled]:hover, .btn.default:not(.btn-outline)[disabled]:focus, .btn.default:not(.btn-outline)[disabled].focus, fieldset[disabled] .btn.default:not(.btn-outline):hover, fieldset[disabled] .btn.default:not(.btn-outline):focus, fieldset[disabled] .btn.default:not(.btn-outline).focus { border-color: var(--gw-field-border-color); } /* * Il «Back» del form di accesso (Login, ForgotPassword, Register, ResetPassword...). * * Qui il pulsante NON HA un bordo: `Views/Account/_Layout.css` glielo toglie * (`.login .content .form-actions .btn-default { border: none }`), e il suo confine e' solo il * bianco del pulsante contro il grigio del riquadro (#eceef1): 1,16:1. Con l'ombra interna #767676 * il confine e' a 3,91:1 sul riquadro e 4,37:1 sul fondo del pulsante in hover (#fafaff). Scurire un bordo che non * c'e' non serve, e rimetterlo allargherebbe il pulsante di 2px senza poterlo compensare (il * padding la' e' `!important`). Il confine si disegna allora con un'ombra INTERNA da 1px dello * stesso grigio, che sta dentro il riquadro e non sposta niente; dopo, separata da una virgola, * l'ombra di elevazione che Metronic gia' dava in quello stato (components-md.css, `.md-shadow-z-1`, * `-z-2-hover`, `-z-3-hover`), ricopiata perche' `box-shadow` non si somma: si sostituisce. * * Specificita' (0,5,0) e (0,6,0): batte `.btn:not(.md-skip):not(...):not(...)` di Metronic * (0,4,0) a riposo e (0,5,0) in hover e premuto, qualunque sia l'ordine dei fogli. Non tocca * l'anello di focus: quello e' `!important` (focusVisible.css), e a fuoco il confine lo fa lui. * Il fallback #767676 serve per la stessa ragione di `fieldBorder.css`: la variabile c'e' in * `common.min.css`, ma un layout che caricasse solo `_Layout.css` non l'avrebbe. */ .login .content .form-actions .btn.btn-default { box-shadow: inset 0 0 0 1px var(--gw-field-border-color, #767676), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); } .login .content .form-actions .btn.btn-default:hover { box-shadow: inset 0 0 0 1px var(--gw-field-border-color, #767676), 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.26); } .login .content .form-actions .btn.btn-default:active { box-shadow: inset 0 0 0 1px var(--gw-field-border-color, #767676), 0 8px 18px rgba(0, 0, 0, 0.22), 0 6px 6px rgba(0, 0, 0, 0.26); }