Pa11y 5 Accessibility Testing using Actions unable to set form fields in a react js app

Question

Using Pa11y 5 actions I tried to set a form developed using react-js. By taking regular screenshots I can see that data is being set.

Example:

'set field #firstName to John',
'set field #lastName to Doe'

But when the following action is made:

'click element #submitbutton

JavaScript validation kicks in and shows that all form fields are incomplete. When I asked a developer here about it, he said, Dom events are not firing, can you do something like keyboard type kind of thing to set the value into the form fields. So his expectation was for me to be able to do something like the below in action statements:

'type John into field #firstName',
'type Doe into field #lastName'

Now I know pa11y 5 does not support such an action, but is there any other way I can use actions to actually 'type' the values, rather than set the values silently and react-js does not react to the changes until the cursor is left the field (like tab away from the field) or when a button is actually pressed.

Any help in setting values that actually gets react-js all excited about will really be appreciated.

Thanks.

Answer 1

Pa11y fires an input event on field changes. We recommend watching for that DOM event instead, as it's more robust across input methods.

This issue has a little more detail: https://github.com/pa11y/pa11y/issues/384