Test helper to simulate tabbing

[mydea]

I don't even know if that would really be doable, but it would be awesome to have a test helper to simulate tabbing through a document.

I recently wrote some code for focus trapping, and couldn't really find a way to test if everything works as expected. I tried to do e.g. triggerKeyEvent(myElement, 'keydown', 'Tab') but that did not actually tab to the next element. Calling focus() does focus it, but is not a real substitute for this type of test.

Having something like tab(myElement) and tab(myElement, { backwards: true }) (or similar) would be very helpful for some a11y-related tests!

[dbollinger]

EDIT:

@mydea -- After thinking about the problem of testing my focus trap a bit more, do you need to do anything beyond testing that the "wrapping" aspect of it works as expected?

With that in mind, I found this to be sufficient for my test case:

    this.element.querySelector('#test-button-3').focus();
    await triggerKeyEvent('#test-button-3', 'keydown', TAB_KEY_CODE);
    assert.dom('#test-button-1').isFocused('focus wraps to first element after tabbing from last element');

and you could do something similar to test that shift+tab does the reverse.

[mydea]

Yeah, I did something similar to this in the end, which is OK I guess. But things like testing if the default behavior still works (e.g. if I tab on a non-first/last item, it moves to the next item), is not possible like this, I guess!

[rwjblue]

I'm generally ok with something in this space, but I don't know what the best way to implement it would be...

[mydea]

Yeah, I sadly also don't really have an idea there, otherwise I'd have tried to do a PR myself - but maybe somebody out there has an idea ;)