// const originalAddEventListener = EventTarget.prototype.addEventListener;
|
//
|
// // Override addEventListener to wrap handlers with logging
|
// EventTarget.prototype.addEventListener = function(type, handler, options) {
|
// if (!['mousemove', 'load','mousedown', 'DOMContentLoaded'].includes(type)) { // Only log 'change' events, or remove this condition for all events
|
// const wrappedHandler = function(event) {
|
// console.log(`🎯 ${type} event triggered on:`, event.target);
|
// console.log(`📋 Handler function:`, handler);
|
// console.log(`📊 Event details:`, event);
|
// console.trace('Call stack:'); // Shows where the event was triggered from
|
//
|
// // Call the original handler
|
// return handler.apply(this, arguments);
|
// };
|
//
|
// // Call the original addEventListener with our wrapped handler
|
// return originalAddEventListener.call(this, type, wrappedHandler, options);
|
// } else {
|
// // For non-change events, use original behavior
|
// return originalAddEventListener.call(this, type, handler, options);
|
// }
|
// };
|
|
// A11yHelper - Centralized accessibility functionality
|
class A11yHelper {
|
constructor() {
|
this.liveRegion = document.querySelector('.screen-reader-text.live-region');
|
if(!this.liveRegion){
|
console.log('No accessibility region.');
|
}
|
}
|
|
announce(message, priority = 'polite') {
|
if (!this.liveRegion) return;
|
|
// Set priority - use 'assertive' for critical updates
|
this.liveRegion.setAttribute('aria-live', priority);
|
|
// Clear and set with small delay to ensure announcement
|
this.liveRegion.textContent = '';
|
setTimeout(() => {
|
this.liveRegion.textContent = message;
|
}, 50);
|
}
|
|
announceItems(count, isAppending = false, hasMore = true) {
|
const action = isAppending ? 'Added' : 'Loaded';
|
const more = hasMore ? '. More available to load.' : '. No more available to load.';
|
this.announce(`${action} ${count} new items${more}`);
|
}
|
|
announceEmpty(isFavourites = false) {
|
const message = isFavourites
|
? "No favourites found. Try adding some items to your collection."
|
: "No items found matching your current filters.";
|
this.announce(message);
|
}
|
|
announceNavigation(current, total, isFirst = false, isLast = false) {
|
if (isFirst) {
|
this.announce('At first image');
|
} else if (isLast) {
|
this.announce('At last image');
|
} else {
|
this.announce(`Image ${current} of ${total}`);
|
}
|
}
|
|
trapFocus(element, returnFocus = null) {
|
if (!element) return () => {};
|
|
const focusableElements = element.querySelectorAll(
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
);
|
|
if (!focusableElements.length) return () => {};
|
|
const firstElement = focusableElements[0];
|
const lastElement = focusableElements[focusableElements.length - 1];
|
|
// Store previously focused element
|
const previousFocus = returnFocus || document.activeElement;
|
|
// Focus first element
|
firstElement.focus();
|
|
// Handle keyboard navigation
|
const handler = (e) => {
|
if (e.key !== 'Tab') return;
|
|
if (e.shiftKey && document.activeElement === firstElement) {
|
lastElement.focus();
|
e.preventDefault();
|
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
firstElement.focus();
|
e.preventDefault();
|
}
|
};
|
|
element.addEventListener('keydown', handler);
|
|
// Return cleanup function
|
return () => {
|
element.removeEventListener('keydown', handler);
|
if (previousFocus && typeof previousFocus.focus === 'function') {
|
previousFocus.focus();
|
}
|
};
|
}
|
|
makeNavigable(elements, activationCallback) {
|
if (!elements || !elements.length) return;
|
|
Array.from(elements).forEach(element => {
|
if (element.getAttribute('data-keyboard-nav')) return;
|
|
element.setAttribute('data-keyboard-nav', 'true');
|
element.setAttribute('tabindex', '0');
|
|
element.addEventListener('keydown', e => {
|
if (e.key === 'Enter' || e.key === ' ') {
|
e.preventDefault();
|
if (activationCallback) {
|
activationCallback(element);
|
} else {
|
const link = element.querySelector('a');
|
if (link) link.click();
|
}
|
}
|
});
|
});
|
}
|
}
|
|
document.addEventListener('DOMContentLoaded', function() {
|
window.jvbA11y = new A11yHelper();
|
});
|
