Bug 98: Dynamic Content Focus Management Failure (F99)

WCAG 2.4.3 (Focus Order) | New content appears but keyboard focus doesn't move to it.

Failure F99: Modal Dialog Appears Without Focus Trap

Click button to open modal (focus will stay on button, not move to modal):

Issue: Modal appears but keyboard focus stays on "Open Settings" button. Screen reader still reading background content. Focus can escape modal (Tab through background links). User confused about what element is active.

Failure F99: Dropdown Menu Without Focus Management

Click dropdown (menu appears but focus doesn't move to first item):

Issue: Dropdown expands but keyboard focus stays on trigger button. Screen reader doesn't announce menu items. User must Tab to reach dropdown options (inefficient).

Failure F99: AJAX Content Loaded Without Announcement

Click to load content (appears silently, focus doesn't move):

'"> Search

Issue: Search results load via AJAX. No focus moved. No aria-live announcement. Screen reader users don't know results appeared (unless they scroll down or refresh screen reader buffer).

Better Approach (For Reference)

Click button for properly managed modal (focus moves TO modal, trapped inside):

Pattern: When modal opens, focus immediately moves to first interactive element inside modal. Tab loops within modal. Escape key closes. Focus returns to trigger button when closed.

Implementation Guide (For Reference)

Key JavaScript patterns:

// When content appears:
const newContent = document.getElementById('results');
newContent.innerHTML = updatedHTML;
newContent.setAttribute('aria-live', 'polite');
// Focus to new content:
newContent.querySelector('h2').focus();
 // For modals, trap focus:
const focusableElements = modal.querySelectorAll
('button, [href], input, select, textarea');
firstElement.focus();
// On Tab at end: cycle back to first
// On Escape: close modal + restore focus
HAL Fixes: HAL detects dynamic content insertion and adds aria-live regions. HAL moves focus to new content when modals/dropdowns/search results appear. HAL implements focus trap for modals/dialogs. HAL announces "X results found" when AJAX loads data. HAL ensures Escape key closes dialogs and returns focus to trigger.