From 9c3a4ee91b34f9e1aecb533493e218bc0b031d21 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Mon, 21 Jul 2025 01:40:55 +0200 Subject: [PATCH] chore: remove accessibility utility functions from accessibilityUtils.js as they are no longer needed --- src/utils/accessibilityUtils.js | 221 -------------------------------- 1 file changed, 221 deletions(-) delete mode 100644 src/utils/accessibilityUtils.js diff --git a/src/utils/accessibilityUtils.js b/src/utils/accessibilityUtils.js deleted file mode 100644 index 85489b9..0000000 --- a/src/utils/accessibilityUtils.js +++ /dev/null @@ -1,221 +0,0 @@ -// Accessibility utility functions for ensuring proper button labels - -/** - * Checks if all IconButtons on the page have proper aria-labels - * This function can be called in development to identify missing labels - */ -export const validateIconButtonAccessibility = () => { - if (process.env.NODE_ENV !== 'development') return; - - // Find all IconButton elements - const iconButtons = document.querySelectorAll('[class*="MuiIconButton"]'); - const missingLabels = []; - - iconButtons.forEach((button, index) => { - const hasAriaLabel = button.hasAttribute('aria-label'); - const hasAriaLabelledBy = button.hasAttribute('aria-labelledby'); - const hasTitle = button.hasAttribute('title'); - const isInTooltip = button.closest('[role="tooltip"]') !== null; - - // Check if button has any form of accessible name - if (!hasAriaLabel && !hasAriaLabelledBy && !hasTitle && !isInTooltip) { - missingLabels.push({ - element: button, - index, - classes: button.className, - parentElement: button.parentElement?.tagName, - parentClasses: button.parentElement?.className - }); - } - }); - - if (missingLabels.length > 0) { - console.warn('IconButtons missing accessibility labels:', missingLabels); - return missingLabels; - } - - console.log('✅ All IconButtons have proper accessibility labels'); - return []; -}; - -/** - * Checks if all images on the page have proper alt attributes - * This function can be called in development to identify missing alt text - */ -export const validateImageAccessibility = () => { - if (process.env.NODE_ENV !== 'development') return; - - // Find all img elements - const images = document.querySelectorAll('img'); - const missingAltText = []; - - images.forEach((img, index) => { - const hasAlt = img.hasAttribute('alt'); - const altValue = img.getAttribute('alt'); - const isDecorative = altValue === ''; - const src = img.src; - - // Check if image has alt attribute - if (!hasAlt) { - missingAltText.push({ - element: img, - index, - src: src, - classes: img.className, - parentElement: img.parentElement?.tagName, - parentClasses: img.parentElement?.className, - issue: 'Missing alt attribute' - }); - } else if (altValue && altValue.trim() === '' && !isDecorative) { - // Empty alt text for non-decorative images - missingAltText.push({ - element: img, - index, - src: src, - classes: img.className, - parentElement: img.parentElement?.tagName, - parentClasses: img.parentElement?.className, - issue: 'Empty alt text for informative image' - }); - } - }); - - if (missingAltText.length > 0) { - console.warn('Images missing accessibility alt text:', missingAltText); - return missingAltText; - } - - console.log('✅ All images have proper alt attributes'); - return []; -}; - -/** - * Automatically adds alt attributes to images that are missing them - * This is a fallback solution for development - */ -export const addFallbackAltText = () => { - if (process.env.NODE_ENV !== 'development') return; - - const images = document.querySelectorAll('img:not([alt])'); - - images.forEach((img) => { - const src = img.src || ''; - let fallbackAlt = 'Bild'; - - // Try to determine alt text from src or context - if (src.includes('prod')) { - fallbackAlt = 'Produktbild'; - } else if (src.includes('cat')) { - fallbackAlt = 'Kategoriebild'; - } else if (src.includes('logo')) { - fallbackAlt = 'Logo'; - } else if (src.includes('nopicture')) { - fallbackAlt = 'Kein Bild verfügbar'; - } else if (src.includes('404')) { - fallbackAlt = '404 - Seite nicht gefunden'; - } else if (src.includes('seeds')) { - fallbackAlt = 'Seeds'; - } else if (src.includes('cutlings')) { - fallbackAlt = 'Stecklinge'; - } else if (src.includes('filiale')) { - fallbackAlt = 'Filiale'; - } else if (src.includes('presse')) { - fallbackAlt = 'Presse'; - } - - img.setAttribute('alt', fallbackAlt); - console.warn(`Added fallback alt text "${fallbackAlt}" to image:`, img); - }); -}; - -/** - * Automatically adds aria-labels to IconButtons that are missing them - * This is a fallback solution for development - */ -export const addFallbackAriaLabels = () => { - if (process.env.NODE_ENV !== 'development') return; - - const iconButtons = document.querySelectorAll('[class*="MuiIconButton"]:not([aria-label]):not([aria-labelledby]):not([title])'); - - iconButtons.forEach((button) => { - // Try to determine button function from context - const icon = button.querySelector('[class*="MuiSvgIcon"]'); - const iconClass = icon?.className || ''; - - let fallbackLabel = 'Button'; - - // Determine label based on icon type or context - if (iconClass.includes('Close')) { - fallbackLabel = 'Schließen'; - } else if (iconClass.includes('Search')) { - fallbackLabel = 'Suchen'; - } else if (iconClass.includes('Add')) { - fallbackLabel = 'Hinzufügen'; - } else if (iconClass.includes('Remove')) { - fallbackLabel = 'Entfernen'; - } else if (iconClass.includes('Delete')) { - fallbackLabel = 'Löschen'; - } else if (iconClass.includes('Edit')) { - fallbackLabel = 'Bearbeiten'; - } else if (iconClass.includes('Expand')) { - fallbackLabel = 'Erweitern'; - } else if (iconClass.includes('ShoppingCart')) { - fallbackLabel = 'Warenkorb'; - } else if (iconClass.includes('Zoom')) { - fallbackLabel = 'Vergrößern'; - } - - button.setAttribute('aria-label', fallbackLabel); - console.warn(`Added fallback aria-label "${fallbackLabel}" to IconButton:`, button); - }); -}; - -/** - * Comprehensive accessibility validation - */ -export const validateAllAccessibility = () => { - if (process.env.NODE_ENV !== 'development') return; - - console.log('🔍 Running comprehensive accessibility validation...'); - - const iconButtonIssues = validateIconButtonAccessibility(); - const imageIssues = validateImageAccessibility(); - - if (iconButtonIssues.length === 0 && imageIssues.length === 0) { - console.log('✅ All accessibility checks passed!'); - } else { - console.warn(`❌ Found ${iconButtonIssues.length + imageIssues.length} accessibility issues`); - - // Auto-fix issues in development - if (iconButtonIssues.length > 0) { - addFallbackAriaLabels(); - } - if (imageIssues.length > 0) { - addFallbackAltText(); - } - } -}; - -/** - * Initialize accessibility checking on page load - */ -export const initializeAccessibilityChecking = () => { - if (process.env.NODE_ENV !== 'development') return; - - // Check after initial render - setTimeout(() => { - validateAllAccessibility(); - }, 1000); - - // Check after dynamic content loads - const observer = new MutationObserver(() => { - setTimeout(() => { - validateAllAccessibility(); - }, 100); - }); - - observer.observe(document.body, { - childList: true, - subtree: true - }); -}; \ No newline at end of file