Aniworld/src/server/web/static/js/accessibility_features.js

/**
 * Accessibility Features Module
 * Enhances accessibility for all users
 */

(function() {
    'use strict';

    /**
     * Initialize accessibility features
     */
    function initAccessibilityFeatures() {
        setupFocusManagement();
        setupAriaLabels();
        console.log('[Accessibility Features] Initialized');
    }

    /**
     * Setup focus management
     */
    function setupFocusManagement() {
        // Add focus visible class for keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                document.body.classList.add('keyboard-navigation');
            }
        });

        document.addEventListener('mousedown', () => {
            document.body.classList.remove('keyboard-navigation');
        });
    }

    /**
     * Setup ARIA labels for dynamic content
     */
    function setupAriaLabels() {
        // Ensure all interactive elements have proper ARIA labels
        const buttons = document.querySelectorAll('button:not([aria-label])');
        buttons.forEach(button => {
            if (!button.getAttribute('aria-label') && button.title) {
                button.setAttribute('aria-label', button.title);
            }
        });
    }

    /**
     * Announce message to screen readers
     */
    function announceToScreenReader(message, priority = 'polite') {
        const announcement = document.createElement('div');
        announcement.setAttribute('role', 'status');
        announcement.setAttribute('aria-live', priority);
        announcement.setAttribute('aria-atomic', 'true');
        announcement.className = 'sr-only';
        announcement.textContent = message;
        
        document.body.appendChild(announcement);
        
        setTimeout(() => {
            announcement.remove();
        }, 1000);
    }

    // Export functions
    window.Accessibility = {
        announce: announceToScreenReader
    };

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initAccessibilityFeatures);
    } else {
        initAccessibilityFeatures();
    }

})();