Desktop: Accessiblity: Make keyboard shortcuts settings screen keyboard-navigable

[personalizedrefrigerator]

Summary

This pull request improves the accessibility of the desktop app's keyboard shortcuts settings screen. In particular, it:

• Makes it possible to edit existing keyboard shortcuts without using a mouse.
  • Previously, the edit button was only shown for a row onMouseEnter until onMouseExit.
• Show keyboard shortcut errors in a message box when clicking on the warning button ().
  • This makes it possible to view the error message if 1) the screen reader is disabled and 2) no mouse is available to show the tooltip.
• Highlight the shortcut editor when it has focus.
• Mark the shortcut editor with aria-live="polite" to cause screen readers to read changes.
• Allow tab and shift-tab to navigate away from the shortcut input.

Related: #10795, WCAG SC 2.1.1, SC 1.1.1.

Future work

• Associate the shortcut input with the error message element with aria-errormessage.
  • May require more refactoring — currently the error message element is the same as the "edit" button.

Notes

• The accessibility label for the "edit" button was also added as its title. This causes the label to be shown as a tooltip:
  • If this is undesired, setting the label only with aria-label will prevent the tooltip from being shown, while still providing a label to screen readers.

Testing plan

Windows 11:

1. Enable NVDA
2. Navigate to the "Keyboard Shortcuts" config screen.
3. Using tab, navigate to the edit button for an unassigned shortcut.
4. Activate the edit button.
5. Verify that the "Press the shortcut" field has focus and that a brief description of the field is read.
   • Should read: Press the shortcut edit read only Press the shortcut and then press ENTER. Or, press BACKSPACE to clear the shortcut. Press the shortcut , blank
6. Press a shortcut combination.
7. Navigate to "Save" using the tab key.
8. Save the shortcut.
9. Press "edit" again, change the shortcut to match an existing shortcut.
10. Verify that an error message is read by the screen reader.
11. Verify that the save button is disabled.
12. Navigate to the "restore" button.
13. Activate it.
14. Verify that the keyboard shortcut is listed as `disabled.

Screen recording

Screencast.from.2024-10-18.15-08-04.webm