Improve run test form

[hannaeko]

Purpose

Reposition the focus on various action and fix NS and DS new row handling.

Context

Addresses #446

Changes

• Move the focus back to the domain input when the "clear domain input" button is pressed
• Move the focus to the next "delete" button for NS and DS form rows or the previous one if the last one has been pressed
• Replace disclosure logic with a HTML native detail element (equivalent behaviour)
• Improve visual appearance of the "clear domain input" button when focused
• Fix: Ensure always one empty row is displayed
  How to reproduce bug:
  • Enter "1" in the first nameserver name input
  • Delete second row by pressing the delete row button
  • There is only one row left, and no way to add more row
• Fix: Changing the last empty row always add a new row
  How to reproduce the bug:
  • Enter "1" in the first nameserver name input
  • Enter "2" in the second nameserver name input
  • Clear input of namerserver name input "2"
  • Delete last (third) row by pressing the delete row button
  • Enter "2" in the second nameserver name input again
  • No new row appears
• Move the focus to first invalid input on error
• Add missing error message for keytag field
• Fix: Domain input has a error message description ("Domain name required") before the user has a chance to fill the input.

How to test this PR

Move the focus back to the domain input

• Enter "domain" in the domain input
• Tab to the "Clear domain input" button
• Press Enter
• Check that the domain input is now empty and that the focus is back to the domain input

Move the focus to the delete button

• Enter "1" in the first nameserver name input
• Enter "2" in the second nameserver name input
• Tab to the second delete button
• Press Enter
• Check that the focus is still on the second delete button but there are only two row now
• Press Enter
• Check that nothing has changed (the last row is not deleted to ensure that an empty row is alway present)
• Tab back to the first delete button
• Press Enter
• Check that the focus is still on first delete button, there is now only one row and it is empty
• Repeat for the DS form section

Move the focus to first invalid input (client side validation, keyboard navigation)

• Make sure that the domain input is empty
• Expand the form options
• Click on an nameserver or ds input to focus it
• Press enter to submit
• Check that the domain input is now focused

Move the focus to first invalid input (client side validation, mouse navigation)

• Make sure that the domain input is empty
• Make sure that the focus is not on the input field by clicking somewhere else on the page
• Press the submit button
• Check that the domain input is now focused

Move the focus to first invalid input (server side validation)

• Input "test" in the domain input
• Expand the form options
• Enter "" in the Nameserver's Name field
• Press the submit button
• Check that the Nameserver's Name field is focused

Missing error message for keytag

• Input "bad keytag" in the DS keytag field
• Check that a error message describing the error (not a numeric value) is displayed
• Using Firefox Accessibility inspector, check that the description of the input matches the displayed message

[matsduf]

I have built a GUI package based on 3b64b4f but I do not see any "clear domain input" button. Where is that?

[matsduf]

[marc-vanderwal]

What if you type something in the domain text field? Shouldn’t a button appear in the right hand side of the text box?

[matsduf]

What if you type something in the domain text field? Shouldn’t a button appear in the right hand side of the text box?

Do you mean the "(x)" button?

[marc-vanderwal]

Do you mean the "(x)" button?

Yes, that’s the button.

[matsduf]

How to test this PR

Move the focus back to the domain input

* Enter "domain" in the domain input
* Tab to the "Clear domain input" button
* Press Enter

* Check that the domain input is now empty and that the focus is back to the domain input

It is not.

Move the focus to the delete button

* Enter "1" in the first nameserver name input

* Enter "2" in the second nameserver name input
* Tab to the second delete button
* Press Enter

* Check that the focus is still on the second delete button but there are only two row now

It is not.

* Press Enter
* Check that nothing has changed (the last row is not deleted to ensure that an empty row is alway present)
* Tab back to the first delete button
* Press Enter
* Check that the focus is still on first delete button, there is now only one row and it is empty

Unclear.

[matsduf]

Do you mean the "(x)" button?

Yes, that’s the button.

I was looking for a button with that name. Anyway, it is not working. I am not sure how important it is.

[MichaelTimbert]

I have checked this PR and everything is good for me.

[hannaeko]

@matsduf when you say "it is not working" can you describe a bit more what does or does not happen (is the input not being cleared or the focus not being in the right place, etc.)? Also which browser are you using (I doubt that it matters but we never know)?

I have retested those parts on both Firefox and Chromium without issue.

As for the test that is "unclear", what information is lacking for you to do it?

[matsduf]

@matsduf when you say "it is not working" can you describe a bit more what does or does not happen (is the input not being cleared or the focus not being in the right place, etc.)? Also which browser are you using (I doubt that it matters but we never know)?

I write something in the domain field and press tab to the (x) and press enter. After that the "cursor" is in some undefined place. I have to click the mouse button to get into the field gain to be able to write.

I am using Firefox, and now testing Chrome gives the same result.

As for the test that is "unclear", what information is lacking for you to do it?

Since it did not behave well it was hard to follow the instructions.

I cannot confirm, but I do not want to block the PR.

[hannaeko]

I write something in the domain field and press tab to the (x) and press enter. After that the "cursor" is in some undefined place. I have to click the mouse button to get into the field gain to be able to write.

This PR should be correcting this behaviour (it is the current one), is your test instance/VPS publicly available if I want to check?

[matsduf]

This PR should be correcting this behaviour (it is the current one), is your test instance/VPS publicly available if I want to check?

It is on AWS and if you could provide an IP address (or both v4 and v6) I can open for you in the firewall.

[hannaeko]

It is on AWS and if you could provide an IP address (or both v4 and v6) I can open for you in the firewall.

I've sent you an email with my IP addresses.

[hannaeko]

It looks that the code that you are testing is not the one from this PR

[matsduf]

Now it looks right. Maybe I forgot to reload or something.

[tgreenx]

v2024.1 Release testing

Followed the "How to Test" section, and it works as advertised.