Desktop: Accessibility: Rich Text Editor: Make it possible to edit code blocks with just the keyboard

[personalizedrefrigerator]

Summary

If a code block is selected, this pull request makes pressing enter with no modifiers open the code editor. Previously, it was necessary to double-click code blocks to edit them.

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

See #10795.

Related tasks

• 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

1. Create a new note (in the Rich Text Editor).
2. Title the note "Test note"
3. Move focus to the Rich Text Editor body by pressing tab.
4. Focus the toolbar by pressing alt-F10.
5. Move focus to the "Block Code" toolbar button.
6. Activate it.
7. Enter javascript for the language name and function test() {} for the code block content.
8. Press ctrl-enter (submits the dialog).
9. Move focus to before the code block and type something.
10. Using the arrow keys, move focus to the code block.

• Note: The screen reader doesn't read anything when the code block is selected.

11. Press enter.
12. Verify that this opens the edit dialog.

Text-to-speech log

Rich Text editor.
 Press Escape then Tab to escape focus.
Focus mode
up
main content Note
Creating new note...
 entry.
left shift
T
Note title
e
s
t
space
n
o
t
e
tab
en button Spell checker.
tab
Back button
Browse mode
tab
Toggle external editing button
tab
Toggle editors toggle button not pressed Switch to the Markdown Editor.
tab
document web
Rich Text editor.
 Press Escape then Tab to escape focus.
Focus mode
left shift
F10
frame
menu.
escape
Joplin  left paren left paren(DEV  dash dash-  slash home slash self slash  dot config slash joplindev dash dash-desktop slash profile dash dash-yo35nu8f right paren right paren) frame
Rich Text editor.
 Press Escape then Tab to escape focus.
Focus mode
left alt
F10
Bold toggle button not pressed
tab
Insert slash edit link toggle button not pressed
right
Inline Code toggle button not pressed
right
Code Block button
return
Edit Language
Language entry.
j
a
v
a
s
c
r
i
p
t
tab
f
u
n
c
t
i
o
n
space
t
e
s
t
left shift
(
)
space
left shift
{
}
return
left control
return
document web
Browse mode
function test  left paren left paren(   right paren right paren) left brace right brace
selected
Rich Text editor.
 Press Escape then Tab to escape focus.
Focus mode
left
 line feed 
left shift
T
e
s
t
left shift
:
right
 line feed 
right
right
 line feed 
left
left
 line feed 
left shift
right
left
blank
right
 line feed 
right
return
Edit Languagejavascript function test left paren left paren( right paren right paren)  left brace  right brace 
Language entry javascript.
misspelled
escape
document web
Browse mode
Rich Text editor.
 Press Escape then Tab to escape focus.
Focus mode
left
 line feed 
up
Test colon colon:
down
function test  left paren left paren(   right paren right paren) left brace right brace
right
return
Edit Languagejavascript function test left paren left paren( right paren right paren)  left brace  right brace 
Language entry javascript.
misspelled
escape
document web
Browse mode
Rich Text editor.
 Press Escape then Tab to escape focus.
Focus mode

Later, after closing the edit dialog, it has been verified that double-clicking on a code block still opens it in edit mode.

[tomasz1986]

I wonder if this will allow to edit code blocks with touch screen as well. Currently, it is also not possible, because pressing a code block only selects it, but no matter how many times you tap on it, it still doesn't open in edit mode.

[personalizedrefrigerator]

I wonder if this will allow to edit code blocks with touch screen as well. Currently, it is also not possible, because pressing a code block only selects it, but no matter how many times you tap on it, it still doesn't open in edit mode.

Thanks for pointing this out! This PR doesn't resolve the touchscreen issue. I'm closing it in favor of #11727 (which does resolve the touchscreen issue).