Skip to main content

AJAX Content

The next mode entry discovers AJAX-added elements that match that mode's target rules.

The same behavior applies to client-rendered content from frameworks such as React, Vue, and Angular. OpenKeyNav runs discovery again on the next mode invocation. Test each dynamic state because visibility, event patterns, Shadow DOM, and embedded content affect coverage.

Here’s how to configure OpenKeyNav to work with AJAX content.

Discovering AJAX-loaded Content​

Keep the existing OpenKeyNav instance when AJAX adds content. The next mode entry runs discovery against the updated document; restart an active mode to refresh its targets.

Example​

Here's an example demonstrating how to use OpenKeyNav with AJAX-loaded content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenKeyNav with AJAX Content</title>
    <script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>
</head>
<body>
    <button id="loadContentBtn">Load More Content</button>
    <div id="contentContainer">
        <!-- Initial content here -->
    </div>

    <script>
        // Initialize OpenKeyNav
        const openKeyNav = new OpenKeyNav();
        openKeyNav.init();

        document.getElementById('loadContentBtn').addEventListener('click', () => {
            // Simulate AJAX content loading
            setTimeout(() => {
                const newContent = `
                    <div class="new-content">
                        <button>New Button 1</button>
                        <button>New Button 2</button>
                    </div>
                `;
                document.getElementById('contentContainer').insertAdjacentHTML('beforeend', newContent);

                // OpenKeyNav discovers the new elements on the next mode initiation
            }, 1000); // Simulate network delay
        });
    </script>
</body>
</html>

Explanation​

  1. Initialization: OpenKeyNav is initialized when the page loads.
  2. AJAX Content Loading: When the "Load More Content" button is clicked, new content is added to the contentContainer after a simulated network delay.
  3. Refreshed discovery: The next mode entry discovers the new buttons. Re-enter an active mode to refresh its current labels.

Summary​

On the next mode initiation, OpenKeyNav discovers newly added elements that match that mode's detection rules while the persistent instance stays in place. Verify label discovery, activation outcomes, focus, semantics, and status feedback after each dynamic update.