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: Rich Text Editor: Make it possible to edit code blocks with a keyboard or touchscreen #11727

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Jan 26, 2025

Summary

Important

This pull request builds on the changes from #11717. Consider reviewing #11717 before this pull request.

This pull request does two related things:

  • If a code block is selected, this pull request makes pressing enter with no modifiers open the code editor.
  • Adds an "Edit" button to the context menu for code blocks.
    • This allows editing code blocks from touchscreens.
    • Note: This only applies to context menus opened with pointing devices. Joplin currently determines the element targeted by a context menu event by looking at the $$(x,y)$$ location of the event on the screen. Probably as a result, keyboard-triggered context menu events target elements other than what has keyboard focus.

Previously, it was necessary to double-click code blocks (with a mouse button) to edit them.

Related WCAG guideline: WCAG 2.2, SC 2.1.1: Keyboard.

See #10795.

This pull request supersedes #11723, which did not include automated tests and did not add "Edit" to the context menu.

Related (unresolved) tasks

  • The screen reader doesn't read anything when code blocks are selected in the Rich Text Editor.
  • The textarea for the code block body is unlabelled.

Testing

Automated tests

New tests: Verify that existing functionality isn't broken — that 1) new code blocks can be created from the toolbar and 2) existing code blocks can be edited by double-clicking.

Manual testing

Verified that (on Ubuntu 24.04):

  • Moving keyboard focus to an existing code block, then pressing enter, opens the code block editor.
  • Right-clicking on an existing code block, then clicking "edit", opens the code block editor.
  • Long-pressing an existing code block, then clicking "edit", opens the code block editor.

Comment on lines 119 to 121
// Katex is a special case with special opening/closing tags
// and we don't currently handle switching the language in this case.
disabled: source.language === 'katex',
enabled: source.language !== 'katex',
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed after replacing an any type with a stronger type: disabled was giving a type error.

},
{
type: 'textarea',
name: 'codeTextArea',
value: source.content,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed after replacing an any type with a stronger type: value was giving a type error. Removing value does not prevent the edit dialog from opening with an existing code block's content.

@personalizedrefrigerator personalizedrefrigerator added desktop All desktop platforms accessibility Related to accessibility labels Jan 26, 2025
@personalizedrefrigerator personalizedrefrigerator changed the title Desktop: Accessibility: Rich Text Editor: Make it possible to edit code blocks without a mouse Desktop: Accessibility: Rich Text Editor: Make it possible to edit code blocks with a keyboard or touchscreen Jan 26, 2025
@personalizedrefrigerator personalizedrefrigerator merged commit bb513c8 into laurent22:dev Jan 27, 2025
7 checks passed
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.

2 participants