Better keyboard navigation

[hannaeko]

Purpose

Some elements on the "run test" page and "result" page were not focusable or if they were not actionable. This PR tries to improve overall keyboard accessibility.

Context

n/a

Changes

Full keyboard navigation is now possible across all pages.

• Advanced option switches is now a styled checkbox and behave as one.
• Make the module "boxes" in the results focusable and expandable when Enter key is pressed.
• Log level filtering can be toggled using keyboard.
• The history button is now a actual button and not a link.
• Filter buttons in history modal are now button and not a broken radio input anymore.
• Some css cleanup.

Note: The language menu has not been changed even thought it is not possible to focus the "links" as it is already undergoing major changes in https://github.com/zonemaster/zonemaster-gui/pull/337 so I let the work be done there.

How to test this PR

Try to use the gui without a mouse (use the TAB to move the focus forward and SHIFT + TAB to move it backward).

To quickly check that all elements are focusable using tab, Firefox accessibility inspector can be used to show the tab order. This does not replace tests to check that the elements are actionable and behave correctly.

Non exhaustive list of navigation paths to test:

• Change the language
  • Starting from the start of the page, press TAB three times to focus the language dropdown.
  • Press SPACE to expend the list, select the desired language using the UP and DOWN keys then confirm by pressing ENTER.
• Simple domain test
  • Starting from the start of the page, press TAB 4 times to focus the domain input.
  • Type the domain of your choice then press ENTER to start the test.
  • Alternatively after typing the domain, press TAB twice to focus the Run button, then press ENTER to start the test.
• Test options
  • Repeat the previous steps to fill the domain input.
  • Press TAB three times to focus the options switch, the press ENTER to show the test options.
  • Try to bring the focus to the add row delete row button for both NS and DS. Press ENTER to execute the action while having the buttons focused.
  • Try to bring the focus to the fetch data buttons and press ENTER to execute the desired action.
  • Pressing ENTER while focusing on a input should submit the form.
• Test results
  • After executing a test or accessing a result directly, bring the focus to the "actions" button (history, export, share).
  • Press ENTER while having the history button selected should show the history modal.
  • Press TAB to focus the history filter buttons (all, delegated, undeletaged), use ENTER to filter the history results.
  • Navigate to the test history list and display the result for a given test by pressing ENTER while having the link to this test focused.
  • Bring the focus back to the close button and press ENTER to close the history modal.
  • Move the focus forward and focus on the export button.
  • Open the export dropdown by pressing ENTER.
  • Navigate to one of the format and press ENTER to export the result to the given format.
  • Either move the focus out of the dropdown content or go back to have the export button focused and press ENTER.
  • Move the focus forward to the share button.
  • Press enter to open the drop down.
  • Navigate to the copy button then press ENTER.
  • The link should have been copied to the clipboard.
  • Move the focus forward to the result filter buttons.
    • Press ENTER to filter the given level.
    • Check that the result are correctly filtered.
    • Check that the tooltip associated to the button that is being focused is displayed.
  • Move the focus forward and select one of the module.
  • Pressing ENTER should toggle the display of the test cases associated to this module.
  • Pressing TAB again should bring the focus to the first test case of this module.
  • Pressing ENTER should show the messages of the focused test case.
• Link in footers
  • Starting from the start of the page, press TAB until you reach the footer.
  • the program version text should be focusable, when focused the version tooltip should be visible.

[matsduf]

I wanted to test, but I failed to build. See #343.

[hannaeko]

I can run a test and select "history", but how do I select the history list that I want to view?

I tested it and I did it like this:

1. Tab until "History" is selected.
2. Press "Enter" to open the modal.
3. Tab until the link to the test you want to see is selected.
4. Press "Enter" to load this test.
5. Press "Escape" to close the modal. (Or Shit + Tab until the close button is selected and press Enter)

If I press Enter on "options" nothing happens.

By default checkbox are toggled using "Space" (this is a browser behaviour).

I can select "filter text" but I cannot select the all-info-notice-warning-error-critcal buttons.

When I press tab, the filer buttons are focused after the "Share" button. Then I can press Enter on any of them to filter. I you can not do that we should investigate.

How do I select FAQ?

When you press Tab just after loading the page. The focus start with the Zonemaster logo then moves to the navigation menu links. If when you press Tab the focus is past the navigation menu, use Shift + Tab to go back until you are focusing "FAQ".

[matsduf]

I tested it and I did it like this:

1. Tab until "History" is selected.

Yes.

2. Press "Enter" to open the modal.

Yes.

3. Tab until the link to the test you want to see is selected.

First "X" is selected. Tab to "All". Tab to "Delegated". Tab to "Undelegated". Pressing "Enter" on any of these will do as expected.

Pressing tab again, and I am out of the modal. I am out of the Zonemaster page. I will end up on the web browser menu. This is Firefox.

In Chrome I come to the first in the history list, and it seems to work as you expect.

If I press Enter on "options" nothing happens.

By default checkbox are toggled using "Space" (this is a browser behaviour).

OK, then it works in both Firefox and Chrome.

I can select "filter text" but I cannot select the all-info-notice-warning-error-critcal buttons.

When I press tab, the filer buttons are focused after the "Share" button. Then I can press Enter on any of them to filter. I you can not do that we should investigate.

Works in Chrome, but not in Firefox.

How do I select FAQ?

When you press Tab just after loading the page. The focus start with the Zonemaster logo then moves to the navigation menu links. If when you press Tab the focus is past the navigation menu, use Shift + Tab to go back until you are focusing "FAQ".

Works in Chrome, but not in Firefox.

[hannaeko]

If the issues I find are issues with Firefox rather than the solution I am ready to approve.

Can it be a "Firefox on Mac" issue? I am also using Firefox, but on Linux.

[mattias-p]

I've successfully release tested this for v2022.2.