Launcher

(function(){
const PANEL_ID = ‘wcag-lookup-container’;
const TARGET_URL = ‘https://tristenb.com/wcag-lookup/’;

if (document.getElementById(PANEL_ID)) {
const panel = document.getElementById(PANEL_ID);
panel.style.display = panel.style.display === ‘none’ ? ‘flex’ : ‘none’;
if (panel.style.display === ‘flex’) document.getElementById(‘wcag-search-input’).focus();
return;
}

const container = document.createElement(‘div’);
container.id = PANEL_ID;
Object.assign(container.style, {
position: ‘fixed’, top: ’20px’, right: ’20px’, width: ‘400px’, height: ’85vh’,
backgroundColor: ‘#ffffff’, boxShadow: ‘0 4px 24px rgba(0,0,0,0.3)’, zIndex: ‘2147483647’,
borderRadius: ‘8px’, padding: ’20px’, boxSizing: ‘border-box’,
fontFamily: ‘system-ui, -apple-system, sans-serif’, display: ‘flex’, flexDirection: ‘column’, border: ‘1px solid #ccc’
});

container.innerHTML = `

Search Criteria:

`;
document.body.appendChild(container);

const searchInput = document.getElementById(‘wcag-search-input’);
const resultsWrapper = document.getElementById(‘wcag-results-wrapper’);
const liveAnnouncer = document.getElementById(‘wcag-live-announcer’);
const statusText = document.getElementById(‘wcag-status-text’);
let wcagData = [];

window.addEventListener(‘keydown’, e => {
if (e.altKey && e.shiftKey && e.key.toLowerCase() === ‘a’) {
e.preventDefault();
const p = document.getElementById(PANEL_ID);
if (p) { p.style.display = p.style.display === ‘none’ ? ‘flex’ : ‘none’; if(p.style.display===’flex’) searchInput.focus(); }
}
if (e.key === ‘Escape’ && container.contains(document.activeElement)) container.style.display = ‘none’;
});

document.getElementById(‘wcag-close-btn’).addEventListener(‘click’, () => container.style.display = ‘none’);

container.addEventListener(‘keydown’, e => {
const items = Array.from(resultsWrapper.querySelectorAll(‘[tabindex=”0″]’));
const idx = items.indexOf(document.activeElement);
if (e.key === ‘ArrowDown’) { e.preventDefault(); if (document.activeElement === searchInput && items.length > 0) { items[0].focus(); } else if (idx < items.length - 1) { items[idx + 1].focus(); } } if (e.key === 'ArrowUp') { e.preventDefault(); if (idx === 0) { searchInput.focus(); } else if (idx > 0) { items[idx – 1].focus(); } }
});

function renderList(items) {
if (items.length === 0) { resultsWrapper.innerHTML = ‘

No matching criteria found.

‘; return; }
resultsWrapper.innerHTML = items.map(item => `

`).join(”);
}

fetch(TARGET_URL)
.then(res => res.text())
.then(html => {
const doc = new DOMParser().parseFromString(html, ‘text/html’);
const rows = Array.from(doc.querySelectorAll(‘table tr’)).filter(r => r.querySelector(‘td’));
wcagData = rows.map(r => {
const c = r.querySelectorAll(‘td’);
return { id: c[0]?.textContent.trim()||”, title: c[1]?.textContent.trim()||”, level: c[2]?.textContent.trim()||”, description: c[3]?.textContent.trim()||” };
});
resultsWrapper.innerHTML = ”;
renderList(wcagData);
searchInput.focus();
}).catch(err => { statusText.textContent = “Error parsing table rows.”; });
})();