Desktop: Accessibility: Improve keyboard navigation in the Markdown and note toolbar

[personalizedrefrigerator]

Summary

This pull request improves focus handling in the Markdown editor's toolbar and the toplevel note toolbar. This pull request does not affect the Rich Text editor's toolbar.

At a more detailed level, this pull request:

1. Associates role and related aria information with the Markdown editor and note toolbars.
   • This is related to WCAG SC 1.3.1.
2. Refactors packages/app-desktop/gui/ToolbarBase.tsx to simplify the implementation of (3).
3. Implements keyboard focus handling for these toolbar as described in ARIA Authoring Practices Guide: The Toolbar Pattern.
4. Refactors ToolbarButton.tsx:
   • Migrates one instance of the ToolbarButton's use of StyledComponents to SCSS.
   • Switches the tag from <a> to <button>. This allows space to activate toolbar buttons and removes the need for an href="#".
5. Adds a related automated test.

See also:

• ARIA Authoring Practices Guide: The Toolbar Pattern
• Accessibility: Comply with WCAG 2 #10795

Note:

• Does not affect the TinyMCE toolbars.

Remaining issues

It's difficult to navigate to the Markdown editor toolbar

Currently, Joplin overrides Tab-key navigation from the title input. This makes it difficult to navigate to the note toolbar using the keyboard. This may violate WCAG SC 1.3.4 and might, but seems less likely to, violate WCAG SC 2.1.1.

Fixing this may require change in what Tab does when the title input is focused (for example, using Enter and/or ArrowDown to navigate to the editor and not overriding Tab). I plan to address this in a future pull request.

Note

Currently, it's possible to move focus to the Markdown editor toolbar by:

1. Focusing the markdown editor (requires the new editor to be enabled).
2. Pressing and releasing Escape.
3. Pressing Shift-Tab.

Tooltips aren't shown when focusing toolbar items with the keyboard

If VoiceOver is disabled and the user doesn't have access to a mouse, it doesn't seem to be possible to show the tooltip for a toolbar button.

Testing

This pull request includes an automated test that verifies:

1. Pressing Escape then Shift-Tab navigates to the Markdown editor toolbar.
2. The left/right arrow keys move between non-disabled items.
3. Home and End move to the first and last items in the toolbar, respectively.

Additional manual testing (MacOS):

1. Focus the markdown editor, then move the focus to the markdown toolbar (esc, then shift-tab).
2. Using the arrow keys, move the focus to the "numbered list" button.
3. Press space.
4. Verify that a numbered list has been inserted.
5. Refocus the editor toolbar.
6. Press shift-tab.
7. Verify that an item in the note toolbar is selected — the spellchecker toolbar button.
8. Using the arrow keys, focus the note properties (info) button.
9. Press space.
10. Verify that the note properties dialog opens.
11. Close the note properties dialog and focus the editor.
12. Focus the markdown toolbar (esc, then shift-tab).
13. Verify that the last focused item in the editor toolbar has focus (insert numbered list).
14. Press shift-tab.
15. Verify that the last focused item in the note toolbar has focus (note properties).
16. Press shift-tab.
17. Verify that the note title input now has focus.
18. Enable VoiceOver.
19. Using control-option-right arrow, focus the "Editor actions, toolbar".
    • After reading the toolbar label, VoiceOver reads "You are currently on a toolbar. To interact with the items on this toolbar, press Control-Option-Shift-Down Arrow.
20. Press Control-Option-Shift-Down Arrow.
21. Verify that VoiceOver reads "In Editor actions, toolbar, 16 items, Back, dimmed, button, group".
22. Use control-option-right arrow to focus "Bold, button, group".
23. Activate the button by pressing space.
24. Verify that **** is added to the markdown editor and the cursor is between the first ** and second **s.
25. Disable VoiceOver.
26. Click the "toggle editors" button.
27. Verify that this switches to the Rich Text Editor.
28. Click the "note properties" button and verify that the note properties dialog is shown.