0

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.

Nan
  • 95
  • 1
  • 8
  • Have you tried set field value - https://github.com/pa11y/pa11y#set-field-value – tarzen chugh May 03 '18 at 08:44
  • Hi Tarzen, thanks for getting back. Yes that's the only thing I can do with actions in setting the form field. I've given an example above as how I did set the form fields for #firstName and #lastName. It looks like when the value is set in the form field, it does not trigger dom events, so react's virtual dom is not getting updated. So when the submit button is clicked to trigger validations, it checks it in the virtual dom and shows that none of the fields are populated. – Nan May 03 '18 at 08:56

1 Answers1

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

hollsk
  • 3,124
  • 24
  • 34
  • 1
    Thank you @hollsk. I've passed it on to our front end developer to see if they could help with watching for input event on field changes. – Nan May 09 '18 at 07:09