/* * I controlli propri della griglia ui-grid: i campi filtro sotto le intestazioni, il paginatore e * la casella di selezione della riga. * * Audit TxDOT §2.6 (DGWGEOWORK-9114, spacchettato in DGWGEOWORK-10137) -- WCAG 2.1 AA, 1.4.11 * Non-text Contrast: il confine di un controllo dice dove si scrive o dove si clicca, e deve stare * ad almeno 3:1 sul fondo attorno. La griglia e' in ogni elenco dell'applicazione (pratiche, * ricerche, dizionari, log), quindi l'auditor l'ha incontrata ovunque: «Essential UI boundaries and * control states do not consistently meet minimum non-text contrast». * * MISURATO (formula di contrasto WCAG, su `getComputedStyle` nella «Draft list» e nei contatori del * Demo locale, 20/10/2026; gli stessi valori su RULIS stage il 19/10): * * controllo colori prima dopo * ---------------------------------------- ---------------------------- ----- ----- * campo filtro, a riposo e col mouse sopra bordo #d4d4d4 su #f3f3f3 1,34 4,09 * (dentro il campo: su #fff) 1,48 4,54 * tendina filtro (filtri a scelta) bordo #d4d4d4 su #f3f3f3 1,34 4,09 * pulsanti del paginatore bordo #ccc su #fff 1,61 4,54 * col mouse sopra bordo #adadad su #fff 2,24 4,54 * numero di pagina, «items per page» bordo #ccc su #fff 1,61 4,54 * casella di selezione, riga non selezionata spunta #333 al 10% su #f0f0ee 1,19 3,98 (riquadro) * casella di selezione, riga selezionata riquadro su #C9DDE1 -- 3,23 * spunta #333 su #C9DDE1 -- 8,97 * * Il colore e' `--gw-field-border-color` (#767676), lo stesso dei campi del resto dell'applicazione * (`fieldBorder.css`): un filtro della griglia e' un campo come gli altri, e un grigio nuovo * avrebbe dato due confini diversi per la stessa cosa. La variabile e' dichiarata in * `fieldBorder.css`, che sta in questa stessa cartella, quindi in ogni bundle in cui entra questo * foglio (`app.min.css`, `common.min.css`) e' definita. Un ente che la ridichiara nel proprio * `:root` cambia anche questi controlli. * * LA CASELLA DI SELEZIONE, E PERCHE' NON BASTAVA ALZARE L'OPACITA'. * La libreria disegna i due stati con lo STESSO glifo, il segno di spunta: al 10% la riga non * selezionata, al 100% la selezionata (`ui-grid.css:1393-1399`). Portare il 10% a 3:1 avrebbe dato * una spunta leggibile su una riga NON selezionata, cioe' un controllo che dice il contrario di * quello che e'. Qui la riga non selezionata mostra un riquadro vuoto, la selezionata lo stesso * riquadro con la spunta dentro: i due stati si distinguono per la forma, non per il colore * (1.4.1). Il riquadro e' un `box-shadow` inset sullo pseudo-elemento del glifo, che e' 14x14 px e * non ha un'ombra sua: nessuna misura cambia. Vale anche per la casella «seleziona tutto» * nell'intestazione, che usa la stessa classe. * * PERCHE' QUI E NON NEL FOGLIO DELLA LIBRERIA. * `libs/angular-ui-grid/` si aggiorna sostituendolo, e una correzione scritta dentro sparirebbe * (stesso principio di `fieldBorder.css` per la skin di TinyMCE). In `app.min.css` la voce * `Common/Styles` viene dopo `libs/angular-ui-grid/4.12.4/ui-grid.css` (bundles.json), quindi le * regole ripetono i selettori della libreria con la stessa specificita' e vincono per ordine di * sorgente, senza `!important`: un tema cliente che ridisegna la griglia per selettore continua a * vincere. * * COSA RIDEFINISCE (trappola T3, frontend-accessibility.md §5b): `border-color` di filtri e * paginatore; `opacity`, `color` e `box-shadow` del solo `::before` della casella di selezione. * Nessuna misura, nessun margine, nessuna `position`, nessun `outline`. Lo stato disabilitato dei * pulsanti del paginatore resta quello della libreria (opacita' 0,65, e le sue regole * `[disabled]:hover/:focus` sono piu' specifiche di queste). L'anello di focus resta quello globale * di `focusVisible.css`; li' sta anche l'eccezione per le intestazioni di colonna, che sono dentro * contenitori con `overflow: hidden`. * * COSA NON TOCCA. * - Le celle e i loro template: le griglie hanno `columnDefs` personalizzabili a runtime dai * BigSetting (trappola T5), e nessuna regola qui guarda dentro `.ui-grid-cell-contents`. * - Le linee della griglia (`#d4d4d4` fra colonne e righe): separano, non sono il confine di un * controllo. * - `ReteCivica/retecivica.html`, pagina statica col proprio bundle `retecivica-page.min.css`, che * non carica `Common/Styles` (e quindi nemmeno l'anello di focus e il bordo dei campi). */ /* Campi filtro sotto le intestazioni. Stessi selettori della libreria, hover compreso: la libreria ridichiara #d4d4d4 su `:hover`, e senza quella regola il bordo tornerebbe chiaro col mouse sopra. */ input[type="text"].ui-grid-filter-input, input[type="text"].ui-grid-filter-input:hover, select.ui-grid-filter-select, select.ui-grid-filter-select:hover { border-color: var(--gw-field-border-color); } /* Paginatore: pulsanti, numero di pagina, «items per page». Il colore resta lo stesso in hover, focus e active: la libreria li schiariva a #adadad/#8c8c8c, cioe' sotto il confine a riposo. */ .ui-grid-pager-control button, .ui-grid-pager-control button:hover, .ui-grid-pager-control button:focus, .ui-grid-pager-control button:active, .ui-grid-pager-control button:active:hover, .ui-grid-pager-control button:active:focus, .ui-grid-pager-control input, .ui-grid-pager-row-count-picker select { border-color: var(--gw-field-border-color); } /* Casella di selezione, riga non selezionata: riquadro vuoto. Il glifo resta nel DOM ma trasparente, cosi' la sua scatola tiene la stessa misura. */ .ui-grid-selection-row-header-buttons::before { opacity: 1; color: transparent; box-shadow: inset 0 0 0 1px var(--gw-field-border-color); } /* Riga selezionata (e «seleziona tutto» acceso): lo stesso riquadro con la spunta. Il colore della spunta torna quello del testo della cella, come nella libreria. */ .ui-grid-selection-row-header-buttons.ui-grid-row-selected::before, .ui-grid-selection-row-header-buttons.ui-grid-all-selected::before { color: inherit; }