Test keyboard navigation for accessibility

[lazarljubenovic]

What problem does this feature solve?

When testing a component such as a dropdown, it's important to test if it works properly with the keyboard. For example, when opening a dropdown, by using the Tab key the user should not be able to leave the popover (trapped focus), up/down arrows should navigate through the options, pressing Esc should close it, etc.

I cannot seem to find any way to test for this. A similar issue was brought up already, but it was quickly dismissed. It looks like the docs mention the keyboard but it seems like that only applies to actual listeners. For example, if I have a button like

<button @click="trigger()">Button</button>

and I try to do

wrapper.find('button').trigger('keydown.enter')

that doesn't register (I think) because I never explicitly do

<button @keydown.enter="trigger()">Button</button>.

This means that I'm unable to test the Tab key properly, which is crucial for keyboard navigation. The same with .focus().

What does the proposed API look like?

Something like wrapper.keyboard.press('tab') and wrapper.focus()?

[lmiller1990]

It sounds like this more towards the end to end test side of things... I sense a real browser (not the usual vue-test-utils and JSDOM) combo will not be adequate to fully test this.

In the case that this is something vue-test-utils can accomplish, I'd like an API like this:

const input = wrapper.find('button')
input.focus()
input.trigger('tab')

Or instead of the last line, require the user to create their own event with new Event.

I have a feelling this is more to do with SDOM thing rather than vue-test-utils. It doesn't seem like the above is testing anything unique to Vue.

I am not sure if this will work in JSDOM, but in a browser you can emulate the tab event like this:

var ev = document.createEvent('Events');
ev.initEvent('keydown', true, true);
ev.keyCode = 9;
ev.which = 9;
ev.charCode = 0;
ev.key = 'Tab'
ev.code = 'Tab'

const wrapperEl = wrapper.find('input')
wrapperEl.focus() // or wrapperEl.element.focus() ?
el.dispatchEvent(ev) // or maybe wrapperEl.element.dispatchEvent(ev) ?
expect(document.activeElement).toBe(wrapperEl.element)

I did not test this code so it might not work as is, but something along those lines certainly should work, assuming JSDOM implements all of the required spec.

[Jinjiang]

I am not sure if this will work in JSDOM, but in a browser you can emulate the tab event like this:

I met the same problem these days. And I found a discussion: jsdom/jsdom#2102 seems that JSDOM doesn't support TAB navigation. That might be really difficult to do this in Vue Test Utils expect JSDOM makes it happen.

Thanks.

[eddyerburgh]

As @Jinjiang says, this is because the feature is not implemented by JSDOM. We won't add a workaround to Vue Test Utils