self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-27 08:21:03 +02:00
Code Issues Releases Activity

Desktop: Accessibility: Fix multi-note selection menu not tab-focusable (#11018)

Browse Source
This commit is contained in:
Henry Heino 2024-09-10 11:29:17 -07:00 committed by GitHub
parent ec36847de0
commit 147a66d64e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { _ } from '@joplin/lib/locale';
import CommandService from '@joplin/lib/services/CommandService';
import { ChangeEvent, useCallback } from 'react';
import { ChangeEvent, useCallback, useRef } from 'react';
import NoteToolbar from '../../NoteToolbar/NoteToolbar';
import { buildStyle } from '@joplin/lib/theme';
import time from '@joplin/lib/time';
@ -75,6 +75,33 @@ function styles_(props: Props) {
});
}
const useReselectHandlers = () => {
const lastTitleFocus = useRef([0, 0]);
const lastTitleValue = useRef('');
const onTitleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback((event) => {
const titleElement = event.currentTarget;
lastTitleFocus.current = [titleElement.selectionStart, titleElement.selectionEnd];
lastTitleValue.current = titleElement.value;
}, []);
const onTitleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback((event) => {
const titleElement = event.currentTarget;
// By default, focusing the note title bar can cause its content to become selected. We override
// this with a more reasonable default:
if (titleElement.selectionStart === 0 && titleElement.selectionEnd === titleElement.value.length) {
if (lastTitleValue.current !== titleElement.value) {
titleElement.selectionStart = titleElement.value.length;
} else {
titleElement.selectionStart = lastTitleFocus.current[0];
titleElement.selectionEnd = lastTitleFocus.current[1];
}
}
}, []);
return { onTitleBlur, onTitleFocus };
};
export default function NoteTitleBar(props: Props) {
const styles = styles_(props);
@ -88,6 +115,8 @@ export default function NoteTitleBar(props: Props) {
}
}, []);
const { onTitleFocus, onTitleBlur } = useReselectHandlers();
function renderTitleBarDate() {
return <span className="updated-time-label" style={styles.titleDate}>{time.formatMsToLocal(props.noteUserUpdatedTime)}</span>;
}
@ -111,6 +140,8 @@ export default function NoteTitleBar(props: Props) {
readOnly={props.disabled}
onChange={props.onTitleChange}
onKeyDown={onTitleKeydown}
onFocus={onTitleFocus}
onBlur={onTitleBlur}
value={props.noteTitle}
/>
<InfoGroup>

9
packages/app-desktop/gui/NoteList/utils/useOnKeyDown.ts
View File

@ -153,14 +153,9 @@ const useOnKeyDown = (
announceForAccessibility(!wasCompleted ? _('Complete') : _('Incomplete'));
}
if (key === 'Tab') {
if (key === 'Tab' && event.shiftKey) {
event.preventDefault();
if (event.shiftKey) {
void CommandService.instance().execute('focusElement', 'sideBar');
} else {
void CommandService.instance().execute('focusElement', 'noteTitle');
}
void CommandService.instance().execute('focusElement', 'sideBar');
}
if (key.toUpperCase() === 'A' && (event.ctrlKey || event.metaKey)) {