Desktop: Accessibility: Allow toggling between tab navigation and indentation #11717
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
See WCAG 2.2 SC 2.1.2 (and laurent22#10795). This commit adds a menu item to the desktop app that allows toggling tab indentation. Associated with this menu item is the standard [ctrl]-[m] keyboard shortcut.
personalizedrefrigerator
added
desktop
|
|
||
| export const declaration: CommandDeclaration = { | ||
| name: 'toggleTabKeyNavigation', | ||
| label: () => _('Toggle editor tab key navigation'), |
There was a problem hiding this comment.
Currently, this label is only shown in keyboard shortcut settings. To avoid having to localize it, an alternative might be to get the label from the setting (as is done in MenuBar.tsx). However, this would result in a label of Tab moves focus, which doesn't describe the command's toggling action.
Comment on lines
+25
to
+27
| // Even if not visible, [label] should reflect the current state | ||
| // of the indicator. | ||
| label: string; |
There was a problem hiding this comment.
To better support screen readers and keyboard-only users:
- The status indicator announces changes to the setting with aria-live=polite.
- As a result, pressing ctrl-m to disable keyboard focus announces "tab indents" (see SC 4.1.3. "Status Messages".
- Changing the keyboard focus mode (e.g. by pressing enter) when the status indicator has focus keeps the status indicator visible but changes its label to "Tab indents".
| const tagList = props.selectedNoteTags.length ? <TagList items={props.selectedNoteTags} /> : null; | ||
|
|
||
| return ( | ||
| <div style={{ paddingLeft: 8, display: 'flex', flexDirection: 'row', alignItems: 'center' }}>{tagList}{instructions}</div> |
There was a problem hiding this comment.
This was moved from NoteEditor.tsx.
personalizedrefrigerator
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Note
Before this pull request, esc then tab could be used to escape focus traps (the Markdown & Rich Text editors). However, this shortcut fails SC 2.1.1 because, at least in the Markdown editor, tab must currently be pressed quickly after pressing escape, thus requiring "specific timings for individual keystrokes".
ctrl-m is used as the default "toggle tab indentation" shortcut to match VSCode and the shortcut in the default CodeMirror configuration.
This pull request's goal is to help Joplin meet WCAG 2.2 SC 2.1.2 without relying on a specific timing of keyboard events (SC 2.1.1). It applies to the CodeMirror 6 Markdown editor, the Rich Text Editor, and the Rich Text Editor's code block editor.
Related to #10795.
Screenshots
Menu item
Status indicator
The status indicator for this feature is based on VSCode's UI for the same feature.
Notice the "tab moves focus" button near the bottom right of the editor. When tab-to-indent is enabled (the default), "tab moves focus" is hidden.
Notice that "Tab Moves Focus" is included in the statusbar at the bottom of the screen.
Testing
Automated tests: This pull request includes an automated test that verifies that tab indentation can be toggled (and that this toggles the status indicator) using the menu item from the Rich Text Editor. A similar test has been added for the "edit code block" screen from the RTE.
Manual testing (Fedora 41):