Keyboard Navigation and Accessibility

class KeyboardAccessibilityFramework {
    constructor(options = {}) {
        this.config = {
            focusableSelectors: [
                'a[href]',
                'button:not([disabled])',
                'input:not([disabled])',
                'select:not([disabled])',
                'textarea:not([disabled])',
                '[tabindex]:not([tabindex="-1"])',
                '[contenteditable="true"]'
            ].join(', '),
            skipLinkTarget: '#main-content',
            announceChanges: true,
            ...options
        };

        this.focusHistory = [];
        this.trapStack = [];
        this.customKeyHandlers = new Map();
        this.liveRegions = new Map();
        
        this.init();
    }

    init() {
        this.setupSkipLinks();
        this.setupFocusManagement();
        this.setupAriaLiveRegions();
        this.setupKeyboardEventHandlers();
        this.setupFocusIndicators();
    }

    // Skip Links Implementation
    setupSkipLinks() {
        const skipLinksHTML = `
            <div class="skip-links" aria-label="Skip navigation links">
                <a href="#main-content" class="skip-link">Skip to main content</a>
                <a href="#navigation" class="skip-link">Skip to navigation</a>
                <a href="#search" class="skip-link">Skip to search</a>
            </div>
        `;

        const skipContainer = document.createElement('div');
        skipContainer.innerHTML = skipLinksHTML;
        document.body.insertBefore(skipContainer, document.body.firstChild);

        // Style skip links (hidden by default, visible on focus)
        const style = document.createElement('style');
        style.textContent = `
            .skip-links {
                position: absolute;
                top: -1000px;
                left: -1000px;
                z-index: 9999;
            }
            
            .skip-link {
                position: absolute;
                background: #000;
                color: #fff;
                padding: 8px 16px;
                text-decoration: none;
                border-radius: 4px;
                font-weight: bold;
            }
            
            .skip-link:focus {
                position: fixed;
                top: 10px;
                left: 10px;
                z-index: 10000;
            }
        `;
        document.head.appendChild(style);
    }

    // Advanced Focus Management
    setupFocusManagement() {
        let lastFocusedElement = null;

        document.addEventListener('focusin', (e) => {
            const element = e.target;
            
            // Store focus history for restoration
            if (lastFocusedElement && lastFocusedElement !== element) {
                this.focusHistory.push(lastFocusedElement);
                // Keep history manageable
                if (this.focusHistory.length > 10) {
                    this.focusHistory.shift();
                }
            }

            lastFocusedElement = element;
            this.announceFocusChange(element);
        });

        document.addEventListener('focusout', (e) => {
            // Handle focus leaving the document
            setTimeout(() => {
                if (!document.activeElement || document.activeElement === document.body) {
                    this.handleFocusLoss();
                }
            }, 0);
        });
    }

    // ARIA Live Regions for Dynamic Announcements
    setupAriaLiveRegions() {
        // Create polite live region for non-urgent updates
        const politeRegion = document.createElement('div');
        politeRegion.setAttribute('aria-live', 'polite');
        politeRegion.setAttribute('aria-atomic', 'true');
        politeRegion.setAttribute('class', 'sr-only');
        politeRegion.id = 'polite-announcements';
        document.body.appendChild(politeRegion);

        // Create assertive live region for urgent updates
        const assertiveRegion = document.createElement('div');
        assertiveRegion.setAttribute('aria-live', 'assertive');
        assertiveRegion.setAttribute('aria-atomic', 'true');
        assertiveRegion.setAttribute('class', 'sr-only');
        assertiveRegion.id = 'assertive-announcements';
        document.body.appendChild(assertiveRegion);

        this.liveRegions.set('polite', politeRegion);
        this.liveRegions.set('assertive', assertiveRegion);

        // Add screen reader only styles
        const srOnlyStyle = document.createElement('style');
        srOnlyStyle.textContent = `
            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
        `;
        document.head.appendChild(srOnlyStyle);
    }

    // Keyboard Event Handling System
    setupKeyboardEventHandlers() {
        document.addEventListener('keydown', (e) => {
            // Handle escape key globally
            if (e.key === 'Escape') {
                this.handleEscapeKey(e);
                return;
            }

            // Handle custom key combinations
            const keyCombo = this.getKeyCombo(e);
            if (this.customKeyHandlers.has(keyCombo)) {
                e.preventDefault();
                this.customKeyHandlers.get(keyCombo)(e);
                return;
            }

            // Handle tab navigation
            if (e.key === 'Tab') {
                this.handleTabNavigation(e);
            }

            // Handle arrow key navigation in component
            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                this.handleArrowNavigation(e);
            }
        });
    }

    // Enhanced Focus Indicators
    setupFocusIndicators() {
        const style = document.createElement('style');
        style.textContent = `
            /* Enhanced focus indicators */
            *:focus {
                outline: 3px solid #4285f4;
                outline-offset: 2px;
                border-radius: 2px;
            }

            /* High contrast mode support */
            @media (prefers-contrast: high) {
                *:focus {
                    outline: 3px solid currentColor;
                    outline-offset: 2px;
                }
            }

            /* Reduced motion support */
            @media (prefers-reduced-motion: no-preference) {
                *:focus {
                    transition: outline-color 0.2s ease;
                }
            }

            /* Custom focus for buttons */
            button:focus,
            [role="button"]:focus {
                outline: 3px solid #4285f4;
                outline-offset: 2px;
                background-color: rgba(66, 133, 244, 0.1);
            }

            /* Focus within containers */
            .focus-within-highlight:focus-within {
                box-shadow: 0 0 0 2px #4285f4;
            }
        `;
        document.head.appendChild(style);
    }

    // Focus Trap Implementation
    createFocusTrap(container) {
        const focusableElements = container.querySelectorAll(this.config.focusableSelectors);
        
        if (focusableElements.length === 0) {
            console.warn('No focusable elements found in focus trap container');
            return null;
        }

        const firstFocusable = focusableElements[0];
        const lastFocusable = focusableElements[focusableElements.length - 1];

        const trapHandler = (e) => {
            if (e.key !== 'Tab') return;

            if (e.shiftKey) {
                // Shift + Tab (backward)
                if (document.activeElement === firstFocusable) {
                    e.preventDefault();
                    lastFocusable.focus();
                }
            } else {
                // Tab (forward)
                if (document.activeElement === lastFocusable) {
                    e.preventDefault();
                    firstFocusable.focus();
                }
            }
        };

        container.addEventListener('keydown', trapHandler);

        const trap = {
            container,
            handler: trapHandler,
            activate: () => {
                // Store currently focused element for restoration
                this.focusHistory.push(document.activeElement);
                this.trapStack.push(trap);
                firstFocusable.focus();
                this.announce('Dialog opened', 'assertive');
            },
            deactivate: () => {
                container.removeEventListener('keydown', trapHandler);
                const trapIndex = this.trapStack.indexOf(trap);
                if (trapIndex > -1) {
                    this.trapStack.splice(trapIndex, 1);
                }
                // Restore focus to previously focused element
                const previousFocus = this.focusHistory.pop();
                if (previousFocus) {
                    previousFocus.focus();
                }
                this.announce('Dialog closed', 'assertive');
            }
        };

        return trap;
    }

    // Component-Specific Navigation Patterns
    setupComponentNavigation(element, pattern = 'linear') {
        const patterns = {
            linear: this.setupLinearNavigation.bind(this),
            grid: this.setupGridNavigation.bind(this),
            tree: this.setupTreeNavigation.bind(this),
            tabs: this.setupTabNavigation.bind(this),
            menu: this.setupMenuNavigation.bind(this)
        };

        if (patterns[pattern]) {
            patterns[pattern](element);
        }
    }

    // Linear Navigation (Lists, Toolbars)
    setupLinearNavigation(container) {
        const items = container.querySelectorAll('[role="option"], [role="menuitem"], [role="tab"]');
        let currentIndex = 0;

        const navigate = (direction) => {
            items[currentIndex].setAttribute('tabindex', '-1');
            
            if (direction === 'next') {
                currentIndex = (currentIndex + 1) % items.length;
            } else if (direction === 'previous') {
                currentIndex = (currentIndex - 1 + items.length) % items.length;
            }

            items[currentIndex].setAttribute('tabindex', '0');
            items[currentIndex].focus();
            this.announce(`Item ${currentIndex + 1} of ${items.length}`, 'polite');
        };

        container.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowDown':
                case 'ArrowRight':
                    e.preventDefault();
                    navigate('next');
                    break;
                case 'ArrowUp':
                case 'ArrowLeft':
                    e.preventDefault();
                    navigate('previous');
                    break;
                case 'Home':
                    e.preventDefault();
                    currentIndex = 0;
                    navigate('first');
                    break;
                case 'End':
                    e.preventDefault();
                    currentIndex = items.length - 1;
                    navigate('last');
                    break;
            }
        });

        // Set initial tabindex
        items.forEach((item, index) => {
            item.setAttribute('tabindex', index === 0 ? '0' : '-1');
        });
    }

    // Grid Navigation (Data Tables, Image Galleries)
    setupGridNavigation(container) {
        const cells = Array.from(container.querySelectorAll('[role="gridcell"], [role="cell"]'));
        const columns = parseInt(container.getAttribute('aria-colcount') || 
                       container.querySelector('[role="row"]').children.length);
        
        let currentRow = 0;
        let currentCol = 0;

        const navigate = (direction) => {
            const currentIndex = currentRow * columns + currentCol;
            cells[currentIndex].setAttribute('tabindex', '-1');

            switch (direction) {
                case 'up':
                    currentRow = Math.max(0, currentRow - 1);
                    break;
                case 'down':
                    currentRow = Math.min(Math.floor(cells.length / columns) - 1, currentRow + 1);
                    break;
                case 'left':
                    currentCol = Math.max(0, currentCol - 1);
                    break;
                case 'right':
                    currentCol = Math.min(columns - 1, currentCol + 1);
                    break;
            }

            const newIndex = currentRow * columns + currentCol;
            if (cells[newIndex]) {
                cells[newIndex].setAttribute('tabindex', '0');
                cells[newIndex].focus();
                this.announce(`Row ${currentRow + 1}, Column ${currentCol + 1}`, 'polite');
            }
        };

        container.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowUp':
                    e.preventDefault();
                    navigate('up');
                    break;
                case 'ArrowDown':
                    e.preventDefault();
                    navigate('down');
                    break;
                case 'ArrowLeft':
                    e.preventDefault();
                    navigate('left');
                    break;
                case 'ArrowRight':
                    e.preventDefault();
                    navigate('right');
                    break;
            }
        });

        // Set initial tabindex
        cells.forEach((cell, index) => {
            cell.setAttribute('tabindex', index === 0 ? '0' : '-1');
        });
    }

    // Utility Methods
    getFocusableElements(container = document) {
        return container.querySelectorAll(this.config.focusableSelectors);
    }

    announce(message, priority = 'polite') {
        if (!this.config.announceChanges) return;

        const region = this.liveRegions.get(priority);
        if (region) {
            region.textContent = message;
            // Clear after announcement to allow re-announcement of same message
            setTimeout(() => {
                region.textContent = '';
            }, 1000);
        }
    }

    handleEscapeKey(event) {
        // Close any active focus traps (modals, dropdowns)
        if (this.trapStack.length > 0) {
            const activeTrap = this.trapStack[this.trapStack.length - 1];
            activeTrap.deactivate();
        }
    }

    getKeyCombo(event) {
        const parts = [];
        if (event.ctrlKey) parts.push('Ctrl');
        if (event.altKey) parts.push('Alt');
        if (event.shiftKey) parts.push('Shift');
        if (event.metaKey) parts.push('Meta');
        parts.push(event.key);
        return parts.join('+');
    }

    // Custom keyboard shortcuts
    registerKeyboardShortcut(keyCombo, handler) {
        this.customKeyHandlers.set(keyCombo, handler);
    }

    // Focus restoration
    restorePreviousFocus() {
        const previousElement = this.focusHistory.pop();
        if (previousElement && document.contains(previousElement)) {
            previousElement.focus();
        }
    }

    announceFocusChange(element) {
        if (!this.config.announceChanges) return;

        const role = element.getAttribute('role');
        const label = element.getAttribute('aria-label') || 
                     element.getAttribute('aria-labelledby') && 
                     document.getElementById(element.getAttribute('aria-labelledby'))?.textContent ||
                     element.textContent || 
                     element.value || 
                     element.alt || 
                     element.title;

        if (label) {
            const announcement = role ? `${role}, ${label}` : label;
            this.announce(announcement, 'polite');
        }
    }
}

// Enhanced Component Example: Accessible Modal Dialog
class AccessibleModal {
    constructor(triggerElement, modalElement) {
        this.trigger = triggerElement;
        this.modal = modalElement;
        this.keyboardFramework = new KeyboardAccessibilityFramework();
        this.focusTrap = null;
        
        this.init();
    }

    init() {
        // Set up ARIA attributes
        this.modal.setAttribute('role', 'dialog');
        this.modal.setAttribute('aria-modal', 'true');
        this.modal.setAttribute('aria-labelledby', 'modal-title');
        this.modal.setAttribute('aria-describedby', 'modal-description');

        // Setup event listeners
        this.trigger.addEventListener('click', () => this.open());
        this.trigger.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.open();
            }
        });

        const closeButton = this.modal.querySelector('[data-close-modal]');
        if (closeButton) {
            closeButton.addEventListener('click', () => this.close());
        }
    }

    open() {
        this.modal.style.display = 'block';
        this.modal.setAttribute('aria-hidden', 'false');
        
        // Create and activate focus trap
        this.focusTrap = this.keyboardFramework.createFocusTrap(this.modal);
        this.focusTrap.activate();

        // Prevent background scroll
        document.body.style.overflow = 'hidden';

        // Add backdrop click to close
        this.modal.addEventListener('click', this.handleBackdropClick.bind(this));
    }

    close() {
        this.modal.style.display = 'none';
        this.modal.setAttribute('aria-hidden', 'true');
        
        // Deactivate focus trap and restore focus
        if (this.focusTrap) {
            this.focusTrap.deactivate();
            this.focusTrap = null;
        }

        // Restore background scroll
        document.body.style.overflow = '';

        // Remove backdrop click handler
        this.modal.removeEventListener('click', this.handleBackdropClick);
    }

    handleBackdropClick(e) {
        if (e.target === this.modal) {
            this.close();
        }
    }
}

// Usage Example
document.addEventListener('DOMContentLoaded', () => {
    // Initialize the keyboard accessibility framework
    const keyboardFramework = new KeyboardAccessibilityFramework({
        announceChanges: true,
        skipLinkTarget: '#main-content'
    });

    // Register custom keyboard shortcuts
    keyboardFramework.registerKeyboardShortcut('Alt+M', () => {
        document.querySelector('#main-menu').focus();
    });

    keyboardFramework.registerKeyboardShortcut('Alt+S', () => {
        document.querySelector('#search-input').focus();
    });

    // Setup component navigation patterns
    const toolbar = document.querySelector('[role="toolbar"]');
    if (toolbar) {
        keyboardFramework.setupComponentNavigation(toolbar, 'linear');
    }

    const dataGrid = document.querySelector('[role="grid"]');
    if (dataGrid) {
        keyboardFramework.setupComponentNavigation(dataGrid, 'grid');
    }

    // Initialize accessible modals
    document.querySelectorAll('[data-modal-trigger]').forEach(trigger => {
        const modalId = trigger.getAttribute('data-modal-trigger');
        const modal = document.getElementById(modalId);
        if (modal) {
            new AccessibleModal(trigger, modal);
        }
    });
});