`;
document.body.appendChild(panel);
this.setupPanelEvents(panel);
}
setupPanelEvents(panel) {
// Toggle panel visibility
const toggle = panel.querySelector('.panel-toggle');
const content = panel.querySelector('.panel-content');
toggle.addEventListener('click', () => {
const isOpen = content.style.display !== 'none';
content.style.display = isOpen ? 'none' : 'block';
toggle.setAttribute('aria-expanded', (!isOpen).toString());
});
// High contrast toggle
const highContrastCheck = panel.querySelector('#high-contrast');
highContrastCheck.addEventListener('change', (e) => {
if (e.target.checked) {
this.enableHighContrast();
} else {
this.disableHighContrast();
}
});
// Color blind mode toggle
const colorBlindCheck = panel.querySelector('#colorblind-mode');
colorBlindCheck.addEventListener('change', (e) => {
if (e.target.checked) {
this.enableColorBlindMode();
} else {
this.disableColorBlindMode();
}
});
// Contrast level change
const levelSelect = panel.querySelector('#contrast-level');
levelSelect.addEventListener('change', (e) => {
this.contrastLevel = e.target.value;
this.validatePageContrast();
});
// Check contrast button
const checkButton = panel.querySelector('#check-contrast');
checkButton.addEventListener('click', () => {
this.validatePageContrast();
});
}
setupKeyboardShortcuts() {
document.addEventListener('keydown', (e) => {
// Ctrl+Shift+C: Toggle high contrast
if (e.ctrlKey && e.shiftKey && e.key === 'C') {
e.preventDefault();
this.toggleHighContrast();
}
// Ctrl+Shift+B: Toggle color blind mode
if (e.ctrlKey && e.shiftKey && e.key === 'B') {
e.preventDefault();
this.toggleColorBlindMode();
}
// Ctrl+Shift+V: Validate contrast
if (e.ctrlKey && e.shiftKey && e.key === 'V') {
e.preventDefault();
this.validatePageContrast();
}
});
}
enableHighContrast() {
this.highContrastMode = true;
document.body.classList.add('high-contrast-mode', 'contrast-enhanced');
// Update checkbox state
const checkbox = document.querySelector('#high-contrast');
if (checkbox) {
checkbox.checked = true;
}
this.announceChange('High contrast mode enabled');
}
disableHighContrast() {
this.highContrastMode = false;
document.body.classList.remove('high-contrast-mode', 'contrast-enhanced');
// Update checkbox state
const checkbox = document.querySelector('#high-contrast');
if (checkbox) {
checkbox.checked = false;
}
this.announceChange('High contrast mode disabled');
}
toggleHighContrast() {
if (this.highContrastMode) {
this.disableHighContrast();
} else {
this.enableHighContrast();
}
}
enableColorBlindMode() {
this.colorBlindMode = true;
document.body.classList.add('colorblind-friendly');
// Add symbols to status indicators
this.addColorBlindSymbols();
const checkbox = document.querySelector('#colorblind-mode');
if (checkbox) {
checkbox.checked = true;
}
this.announceChange('Color blind friendly mode enabled');
}
disableColorBlindMode() {
this.colorBlindMode = false;
document.body.classList.remove('colorblind-friendly');
// Remove symbols
this.removeColorBlindSymbols();
const checkbox = document.querySelector('#colorblind-mode');
if (checkbox) {
checkbox.checked = false;
}
this.announceChange('Color blind friendly mode disabled');
}
toggleColorBlindMode() {
if (this.colorBlindMode) {
this.disableColorBlindMode();
} else {
this.enableColorBlindMode();
}
}
addColorBlindSymbols() {
// Add symbols to elements that rely on color
document.querySelectorAll('.text-success, .bg-success, .btn-success').forEach(el => {
if (!el.querySelector('.cb-symbol')) {
const symbol = document.createElement('span');
symbol.className = 'cb-symbol';
symbol.textContent = '✓ ';
symbol.setAttribute('aria-hidden', 'true');
el.insertBefore(symbol, el.firstChild);
}
});
document.querySelectorAll('.text-danger, .bg-danger, .btn-danger').forEach(el => {
if (!el.querySelector('.cb-symbol')) {
const symbol = document.createElement('span');
symbol.className = 'cb-symbol';
symbol.textContent = '✗ ';
symbol.setAttribute('aria-hidden', 'true');
el.insertBefore(symbol, el.firstChild);
}
});
document.querySelectorAll('.text-warning, .bg-warning, .btn-warning').forEach(el => {
if (!el.querySelector('.cb-symbol')) {
const symbol = document.createElement('span');
symbol.className = 'cb-symbol';
symbol.textContent = '⚠ ';
symbol.setAttribute('aria-hidden', 'true');
el.insertBefore(symbol, el.firstChild);
}
});
}
removeColorBlindSymbols() {
document.querySelectorAll('.cb-symbol').forEach(symbol => {
symbol.remove();
});
}
enableForcedColors() {
document.body.classList.add('forced-colors-mode');
this.announceChange('System high contrast mode detected');
}
validatePageContrast() {
const issues = [];
const elements = this.getTextElements();
elements.forEach(element => {
const contrast = this.analyzeElementContrast(element);
if (contrast.ratio < contrast.required) {
issues.push({
element: element,
ratio: contrast.ratio,
required: contrast.required,
colors: contrast.colors
});
}
});
this.reportContrastIssues(issues);
return issues;
}
getTextElements() {
// Get all elements with text content
const selector = 'p, span, div, a, button, h1, h2, h3, h4, h5, h6, .btn, .form-control, .card-text, .nav-link, .dropdown-item';
return Array.from(document.querySelectorAll(selector)).filter(el => {
return el.textContent.trim().length > 0 &&
this.isVisible(el) &&
!el.closest('.sr-only, .visually-hidden');
});
}
isVisible(element) {
const style = window.getComputedStyle(element);
return style.display !== 'none' &&
style.visibility !== 'hidden' &&
style.opacity !== '0' &&
element.offsetWidth > 0 &&
element.offsetHeight > 0;
}
analyzeElementContrast(element) {
const style = window.getComputedStyle(element);
const textColor = this.rgbToHex(style.color);
const backgroundColor = this.getBackgroundColor(element);
const ratio = this.calculateContrastRatio(textColor, backgroundColor);
const fontSize = parseFloat(style.fontSize);
const fontWeight = style.fontWeight;
const isLargeText = fontSize >= 18 || (fontSize >= 14 && (fontWeight === 'bold' || fontWeight >= 700));
const requiredRatio = this.wcagRatios[this.contrastLevel][isLargeText ? 'large' : 'normal'];
return {
ratio: ratio,
required: requiredRatio,
colors: {
text: textColor,
background: backgroundColor
},
isLargeText: isLargeText,
passes: ratio >= requiredRatio
};
}
getBackgroundColor(element) {
let bgColor = 'rgba(0, 0, 0, 0)';
let currentElement = element;
while (currentElement && currentElement !== document.body) {
const style = window.getComputedStyle(currentElement);
const currentBg = style.backgroundColor;
if (currentBg && currentBg !== 'rgba(0, 0, 0, 0)' && currentBg !== 'transparent') {
bgColor = currentBg;
break;
}
currentElement = currentElement.parentElement;
}
// Default to white if no background found
if (bgColor === 'rgba(0, 0, 0, 0)') {
bgColor = 'rgb(255, 255, 255)';
}
return this.rgbToHex(bgColor);
}
rgbToHex(rgb) {
// Handle different RGB formats
if (rgb.startsWith('#')) {
return rgb;
}
const match = rgb.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/);
if (match) {
const r = parseInt(match[1]);
const g = parseInt(match[2]);
const b = parseInt(match[3]);
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}
return '#000000'; // fallback
}
calculateContrastRatio(color1, color2) {
const lum1 = this.getLuminance(color1);
const lum2 = this.getLuminance(color2);
const brightest = Math.max(lum1, lum2);
const darkest = Math.min(lum1, lum2);
return (brightest + 0.05) / (darkest + 0.05);
}
getLuminance(color) {
const rgb = this.hexToRgb(color);
const [r, g, b] = rgb.map(c => {
c = c / 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
});
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
hexToRgb(hex) {
const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : [0, 0, 0];
}
reportContrastIssues(issues) {
// Remove existing contrast warnings
document.querySelectorAll('.contrast-warning').forEach(warning => {
warning.remove();
});
if (issues.length === 0) {
this.showContrastReport('All contrast ratios meet WCAG ' + this.contrastLevel + ' standards.', 'success');
return;
}
// Add warnings to problematic elements
issues.forEach((issue, index) => {
this.addContrastWarning(issue.element, issue, index);
});
this.showContrastReport(`Found ${issues.length} contrast issues.`, 'warning');
}
addContrastWarning(element, issue, index) {
const warning = document.createElement('div');
warning.className = 'contrast-warning';
warning.innerHTML = `