upskill-event-manager/assets/js/hvac-accessibility.js

/**
 * HVAC Community Events Accessibility Helper
 * 
 * This script helps improve accessibility by:
 * 1. Detecting keyboard navigation to show focus styles only when needed
 * 2. Adding skip links for keyboard users
 */

(function() {
    // Function to run when DOM is fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Add keyboard navigation detection
        function handleFirstTab(e) {
            if (e.keyCode === 9) { // Tab key
                document.body.classList.add('user-is-tabbing');
                
                // Remove the event listener after first tab press
                window.removeEventListener('keydown', handleFirstTab);
                
                // Add listener for mouse use
                window.addEventListener('mousedown', handleMouseDownOnce);
            }
        }
        
        // Remove tabbing class when mouse is used
        function handleMouseDownOnce() {
            document.body.classList.remove('user-is-tabbing');
            
            // Re-add tab listener
            window.removeEventListener('mousedown', handleMouseDownOnce);
            window.addEventListener('keydown', handleFirstTab);
        }
        
        // Add initial keyboard detection
        window.addEventListener('keydown', handleFirstTab);
        
        // Add skip links to all HVAC pages
        const mainContent = document.querySelector('.hvac-content, #primary, .entry-content');
        if (mainContent) {
            // Create skip link
            const skipLink = document.createElement('a');
            skipLink.href = '#content';
            skipLink.className = 'hvac-skip-link';
            skipLink.innerText = 'Skip to main content';
            skipLink.setAttribute('tabindex', '0');
            
            // Add ID to main content
            mainContent.setAttribute('id', 'content');
            
            // Insert skip link as first element in body
            document.body.insertBefore(skipLink, document.body.firstChild);
        }
    });
})();