seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

chore: remove accessibility utility functions from accessibilityUtils.js as they are no longer needed

Browse Source
This commit is contained in:
sebseb7
2025-07-21 01:40:55 +02:00
parent bad176a6d1
commit 9c3a4ee91b
1 changed files with 0 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/utils/accessibilityUtils.js
View File

@@ -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
});
};