Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop: Accessibility: Improve note title focus handling #10932

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Aug 26, 2024

Summary

This pull request implements suggestion 1 from the "How should Joplin handle keyboard navigation" forum post.

To summarize:

  • The custom Tab keybinding override has been removed.
    • This keybinding override made it very difficult to focus the editor toolbar when navigating with a keyboard.
    • See WCAG §2.4.3 and (less relevant) WCAG §2.1.2.
  • As a replacement, Enter and ArrowDown move the keyboard focus from the title to the editor.
    • ArrowDown moves the caret to the first line and focuses. Enter just focuses (& preserves the caret location).
    • In the legacy Markdown editor, ArrowDown just focuses (& preserves the caret location).
  • ArrowUp on the first line of the editor moves to the title input.
    • This only applies to the new Markdown editor and the Rich Text Editor.

Related: #10795

Screen recording

Screencast.from.2024-08-26.15-32-57.webm

Testing plan

As shown in the screen recording above, this pull request has been tested manually on Fedora 40 (Linux):

  1. Switch to the Rich Text Editor and focus the note title.
  2. Press the Down arrow key.
  3. Verify that the caret has moved to the first line of the editor.
  4. Press the Up arrow key.
  5. Verify that the caret has moved back to the note title.
  6. Move the caret to the 2nd or 3rd line.
  7. Focus the title.
  8. Press Enter.
  9. Verify that the caret has moved to the previously-focused paragraph.
  10. Move the focus to the start of the editor.
  11. Press Shift-Tab.
  12. Verify that the focus has moved to the note toolbar.
  13. Switch to the Markdown editor.
  14. Focus the note title.
  15. Press the Down arrow key.
  16. Verify that the note editor's first line has focus.
  17. Press Up.
  18. Verify that the title has focus.
  19. Press Enter.
  20. Verify that the editor has focus.
  21. Focus a line further from the beginning of the editor.
  22. Focus the title input by clicking on it.
  23. Press Down.
  24. Type.
  25. Verify that focus moved to the start of the editor.

Optional to-do: Add an automated Playwright test for the Markdown editor (currently, one only exists for the Rich Text editor).

@personalizedrefrigerator personalizedrefrigerator changed the title Desktop: Accessibility: Change keyboard shortcuts for navigating from… Desktop: Accessibility: Change keyboard shortcuts for navigating from the note title to the note body Aug 26, 2024
@personalizedrefrigerator personalizedrefrigerator changed the title Desktop: Accessibility: Change keyboard shortcuts for navigating from the note title to the note body Desktop: Accessibility: Improve note title and toolbar keyboard accessibility Aug 26, 2024
@personalizedrefrigerator personalizedrefrigerator added the accessibility Related to accessibility label Aug 26, 2024
@personalizedrefrigerator personalizedrefrigerator changed the title Desktop: Accessibility: Improve note title and toolbar keyboard accessibility Desktop: Accessibility: Improve note title focus handling Aug 27, 2024
@laurent22 laurent22 merged commit 74be949 into laurent22:dev Aug 27, 2024
10 checks passed
@personalizedrefrigerator personalizedrefrigerator added the desktop All desktop platforms label Aug 29, 2024
@LeeBreisacher
Copy link

Is there any way to override/customize this change? I would really like to have the TAB key move from title to body.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Related to accessibility desktop All desktop platforms
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants