[FIX] V3 polish: spotlight ARIA su top-nav + CSP font segnala-anonimo
- aria-guide "Mostrami dov'è": ora aggancia le voci del menu IN ALTO V3 (data-nav aggiunto in topnav-v3.js su voci dirette + mega-link). Se la voce è in un mega-menu, lo apre (.aria-guide-open) e ci punta lo spotlight; coach "menu in alto". Fallback navigazione invariato. (Prima cercava .sidebar-nav V2.) - segnala-anonimo.html: CSP font-src 'self' → 'self' data: (sbloccato il font data: embeddato, niente più violazione CSP). - Cache-buster: topnav-v3.js/common.js ?v=20260627t, aria-guide.js ?v=20260627t. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
95e77a668a
commit
a71d1a096d
+21
-8
@@ -79,13 +79,15 @@
|
||||
'.aria-guide-coach .row{margin-top:8px;display:flex;gap:8px;justify-content:flex-end}',
|
||||
'.aria-guide-coach button{border:none;border-radius:7px;padding:6px 12px;font:600 12px system-ui;cursor:pointer}',
|
||||
'.aria-guide-go{background:#0066CC;color:#fff}.aria-guide-x{background:#1e3a5f;color:#cbd5e1}',
|
||||
'.nav-item.aria-guide-open .mega,.nav-item.aria-guide-open .mega.no-promo{display:flex!important}',
|
||||
'@media (prefers-reduced-motion:reduce){.aria-guide-spot,.aria-guide-ptr{transition:none;animation:none}}'
|
||||
].join('\n');
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
var _open = null;
|
||||
var _open = null, _openMega = null;
|
||||
function dismiss() {
|
||||
if (_openMega) { _openMega.classList.remove('aria-guide-open'); _openMega = null; }
|
||||
if (!_open) return;
|
||||
_open.forEach(function (el) { if (el && el.parentNode) el.parentNode.removeChild(el); });
|
||||
document.removeEventListener('keydown', onKey, true);
|
||||
@@ -100,19 +102,29 @@
|
||||
*/
|
||||
function pointTo(nav, label) {
|
||||
dismiss();
|
||||
var el = document.querySelector('.sidebar-nav a[data-nav="' + nav + '"]');
|
||||
var href = el ? el.getAttribute('href') : (nav + '.html');
|
||||
var rect = el && el.getBoundingClientRect();
|
||||
// fallback: niente sidebar visibile → vai diretto
|
||||
if (!el || !rect || rect.width === 0 || rect.height === 0) { window.location.href = href; return false; }
|
||||
|
||||
injectCss();
|
||||
// V3: menu IN ALTO (data-nav su voci dirette e mega-link). Fallback compat sidebar V2.
|
||||
var el = document.querySelector('.bar-nav [data-nav="' + nav + '"]')
|
||||
|| document.querySelector('[data-nav="' + nav + '"]')
|
||||
|| document.querySelector('.sidebar-nav a[data-nav="' + nav + '"]');
|
||||
var href = el ? (el.getAttribute('href') || (nav + '.html')) : (nav + '.html');
|
||||
// Se la voce è dentro un mega-menu (dropdown chiuso), aprilo per renderla visibile.
|
||||
var megaItem = (el && el.closest && el.closest('.mega')) ? el.closest('.nav-item') : null;
|
||||
if (megaItem) megaItem.classList.add('aria-guide-open');
|
||||
try { window.scrollTo({ top: 0, behavior: 'auto' }); } catch (e) {}
|
||||
var rect = el && el.getBoundingClientRect();
|
||||
// fallback: voce non trovata/visibile → vai diretto
|
||||
if (!el || !rect || rect.width === 0 || rect.height === 0) {
|
||||
if (megaItem) megaItem.classList.remove('aria-guide-open');
|
||||
window.location.href = href; return false;
|
||||
}
|
||||
|
||||
var ov = document.createElement('div'); ov.className = 'aria-guide-ov';
|
||||
var spot = document.createElement('div'); spot.className = 'aria-guide-spot';
|
||||
var ptr = document.createElement('div'); ptr.className = 'aria-guide-ptr';
|
||||
ptr.innerHTML = '<svg viewBox="0 0 24 24" fill="#0066CC" stroke="#fff" stroke-width="1.2"><path d="M5 3l14 8-6 1.5L9.5 19 5 3z"/></svg>';
|
||||
var coach = document.createElement('div'); coach.className = 'aria-guide-coach';
|
||||
coach.innerHTML = 'Eccolo: <b>' + (label || nav) + '</b><br><span style="opacity:.85">È nel menu a sinistra. Vuoi che ti ci porti?</span>'
|
||||
coach.innerHTML = 'Eccolo: <b>' + (label || nav) + '</b><br><span style="opacity:.85">È nel menu in alto. Vuoi che ti ci porti?</span>'
|
||||
+ '<div class="row"><button class="aria-guide-x" type="button">Chiudi</button><button class="aria-guide-go" type="button">Vai →</button></div>';
|
||||
|
||||
document.body.appendChild(ov);
|
||||
@@ -137,6 +149,7 @@
|
||||
coach.querySelector('.aria-guide-go').addEventListener('click', function () { window.location.href = href; });
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
_open = [ov, spot, ptr, coach];
|
||||
_openMega = megaItem;
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -985,7 +985,7 @@ function switchLang(lang) {
|
||||
if (!window.__ariaGuideLoaded) {
|
||||
window.__ariaGuideLoaded = true;
|
||||
var ag = document.createElement('script');
|
||||
ag.src = 'js/aria-guide.js?v=20260624f';
|
||||
ag.src = 'js/aria-guide.js?v=20260627t';
|
||||
ag.async = true;
|
||||
document.body.appendChild(ag);
|
||||
}
|
||||
|
||||
@@ -110,6 +110,8 @@
|
||||
'Monitoraggio': 'nav.grp_monitoring', 'Lex e ISO': 'nav.grp_lexiso', 'AI': 'nav.grp_ai', 'Guida': 'nav.grp_guide'
|
||||
};
|
||||
function i18nAttr(key) { return key ? ' data-i18n="' + key + '"' : ''; }
|
||||
// data-nav = href senza .html → aggancio per il puntatore guida ARIA (aria-guide.js).
|
||||
function navAttr(href) { return ' data-nav="' + esc(String(href).replace(/\.html$/, '')) + '"'; }
|
||||
|
||||
function esc(s) {
|
||||
return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
|
||||
@@ -136,7 +138,7 @@
|
||||
function renderMega(g) {
|
||||
var colsHtml = g.cols.map(function (col) {
|
||||
var links = col.links.map(function (l) {
|
||||
return '<a class="mega-link" href="' + esc(l.href) + '">' +
|
||||
return '<a class="mega-link"' + navAttr(l.href) + ' href="' + esc(l.href) + '">' +
|
||||
'<span class="mega-ic"><i data-lucide="' + esc(l.ic) + '" class="ic"></i></span>' +
|
||||
'<span><b' + i18nAttr(I18N_BY_HREF[l.href]) + '>' + esc(l.b) + '</b><span>' + esc(l.s) + '</span></span></a>';
|
||||
}).join('');
|
||||
@@ -154,14 +156,14 @@
|
||||
if (g.href && !g.cols) {
|
||||
// Voce diretta (Dashboard, Calendario)
|
||||
return '<div class="nav-item">' +
|
||||
'<a class="' + cls + '"' + aria + ' href="' + esc(g.href) + '">' +
|
||||
'<a class="' + cls + '"' + aria + navAttr(g.href) + ' href="' + esc(g.href) + '">' +
|
||||
'<i data-lucide="' + esc(g.icon) + '" class="ic"></i>' +
|
||||
'<span' + i18n + '>' + esc(g.label) + '</span></a></div>';
|
||||
}
|
||||
// Gruppo con mega-menu. Il link "testa" punta alla prima voce del gruppo.
|
||||
var firstHref = g.cols[0].links[0].href;
|
||||
return '<div class="nav-item">' +
|
||||
'<a class="' + cls + '"' + aria + ' href="' + esc(firstHref) + '">' +
|
||||
'<a class="' + cls + '"' + aria + navAttr(firstHref) + ' href="' + esc(firstHref) + '">' +
|
||||
'<i data-lucide="' + esc(g.icon) + '" class="ic"></i>' +
|
||||
'<span' + i18n + '>' + esc(g.label) + '</span>' +
|
||||
'<i data-lucide="chevron-down" class="caret"></i></a>' +
|
||||
|
||||
Reference in New Issue
Block a user