Desktop: Accessibility: Improve settings screen keyboard navigation and screen reader accessibility

[personalizedrefrigerator]

Summary

This pull request makes several changes to the settings screen:

1. Refactoring: Moves the settingToComponent function to a separate component. (Commit 5e94b46).
   • This decreases the amount of code present in ConfigScreen.tsx and allows React's useId hook to be used to auto-generate unique IDs.
2. Programmatically associates labels with inputs in more cases. This causes screen readers to announce the label associated with an entry when focusing it. (In 5e94b46).
3. Programmatically associates setting descriptions with inputs using aria-describedby. (In 5e94b46).
4. Adds aria-expanded information to the "Show Advanced Settings" button. This causes a screen reader to announce whether advanced settings is expanded or collapsed 1) after clicking the button and 2) when navigating to the button. (Commit aabe55a).
5. Follows the W3 Tabs Pattern for more standard keyboard navigation between different setting tabs. (In d99dd09)
   • Previously, it was difficult to navigate from a tab to its content. In particular, the Tab key navigated to the next tab, rather than the tab content. See the suggestions on the W3 Tabs Pattern page for additional details.
6. Adds tests for setting tab navigation. (In b643a35).
7. Prevents the screen reader from reading sidebar icons as text (included in d99dd09).
   • Sidebar icons use an icon font and were previously included in screen reader output.
8. Improves accessibility labeling and grouping in the plugin config screen (commit 1aca332).

This pull request is related to #10795.

Possible future work

• Put the "Back" / "OK" / "Apply" buttons in a landmark (navigation?) for easier access when using a screen reader.
• Put the settings sidebar in a landmark for easier access when using a screen reader.
• Migrate to a different toggle button library or use a custom toggle button component. At present,
  • Currently, a workaround is being used to make VoiceOver correctly announce the state of the button, and
  • keyboard focus isn't visible when the toggle button is focused.

Testing plan

MacOS:

1. Enable VoiceOver.
2. Open Joplin's settings screen.
3. Navigate to the "Appearance" section using control-option-right and control-option-space.
   • These shortcuts test changing the VoiceOver focus -- they behave differently from navigating with just tab and the arrow keys.
4. Navigate to the content of the settings tab by pressing tab.
5. Navigate to the "theme" dropdown using control-option-right.
6. Change "theme" to "Solarized Light".
7. Navigate to the "show sort order buttons" using control-option-right.
8. Uncheck "show sort order buttons".
   • Verify that when the checkbox is selected, VoiceOver reads the checkbox's label in addition to the checkbox.
     • Show sort order buttons, checked, checkbox before unchecking, Show sort order buttons, unchecked, checkbox after unchecking.
   • Verify that moving to the next VoiceOver focus item (control-option-right) focuses "Editor font size", and not the label for the checkbox.
9. Navigate to the "OK" button using control-option-right and press control-option-space to save changes.
10. Verify that the changes are applied.
11. Open settings.
12. Navigate to the "Appearance" section using Tab and the Down arrow key.
13. Verify that the "Appearance" section is open.
14. Navigate to the "Theme" dropdown by pressing Tab twice (once to move to the tab container, once to move to the first control in the container).
15. Change the theme back to "Light" (navigate to it using tab and activate with space).
16. Check the "show sort order button" (navigate to it with tab).
17. Apply changes.
18. Using tab and the arrow keys, navigate to the "plugins" section.
19. Using control-option-arrow keys, disable a plugin.
    • Verify that VoiceOver reads "unchecked" after unchecking the "Enabled" checkbox.
    • Verify that the plugin disable button reads "Enabled, unchecked, checkbox" after 1) disabling the plugin, then 2) navigating away from the checkbox, and finally 3) navigating back to the checkbox.
    • Verify that entering and exiting the plugin box with control-option-arrow keys reads "plugin name, group" and "end of, plugin name, group", respectively (replacing "plugin name" with the name of a plugin).
20. Verify that a banner reading "The application must be restarted for these changes to take effect" is present at the top of the screen.

[laurent22]

Looks good, and thanks for refactoring the setting components too!