Detecting focus changes due to TAB or SHIFT + TAB navigation can be tricky, especially when dealing with browser toolbars. Here's a potential solution using JavaScript:

Capture keydown events: Listen for TAB and SHIFT + TAB keydown events.

Check focus direction: Determine if the focus is moving forward (TAB) or backward (SHIFT + TAB).

Handle focus changes: Implement logic to handle focus changes within your application.

Here's a sample code snippet to get you started:

javascript

document.addEventListener('keydown', (event) => {
    if (event.key === 'Tab' || event.key === 'Shift') {
        const currentElement = document.activeElement;
        const nextElement = document.querySelector(':focusable');
        const previousElement = document.querySelector(':focusable + :focusable');

        if (event.key === 'Tab' && nextElement) {
            // Focus moved forward
            console.log('Focus moved forward to:', nextElement);
        } else if (event.key === 'Tab' && previousElement) {
            // Focus moved backward
            console.log('Focus moved backward to:', previousElement);
        }
    }
});

// Helper function to select focusable elements
function getFocusableElements() {
    return Array.from(document.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'));
}

This code listens for keydown events and checks if the focus is moving forward or backward based on the TAB key. You can customize the logic to handle focus changes as needed.

Does this help with your requirements?