tabbable

import { tabbable, focusable, getTabIndex } from 'tabbable'; // Helper to create a DOM structure for testing in a browser or JSDOM environment function createTestDOM(htmlString) { const container = document.createElement('div'); container.innerHTML = htmlString; // Append to body to ensure elements are considered 'attached' for visibility checks document.body.appendChild(container); return container; } const testHtml = ` <div id="root-container"> <button id="btn1">Click Me</button> <input type="text" placeholder="Enter text" /> <a href="#" id="link1">A link</a> <span tabindex="0" id="span1">Custom tabbable</span> <div tabindex="-1" id="div1">Focusable but not tabbable</div> <button disabled id="btn2">Disabled Button</button> <a href="#" style="display: none;" id="link2">Hidden Link</a> <p>Some text</p> <textarea id="textarea1"></textarea> </div> `; const containerElement = createTestDOM(testHtml); console.log('--- Tabbable elements ---'); const tabbableElements = tabbable(containerElement); tabbableElements.forEach(el => { console.log(`Tabbable: ${el.outerHTML}, TabIndex: ${getTabIndex(el)}`); }); console.log('\n--- Focusable elements (including non-tabbable) ---'); const focusableElements = focusable(containerElement); focusableElements.forEach(el => { console.log(`Focusable: ${el.outerHTML}, TabIndex: ${getTabIndex(el)}`); }); // Clean up the added DOM element document.body.removeChild(containerElement);