-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Desktop: Accessibility: Improve note list keyboard and screen reader …
…accessibility (#10940)
- Loading branch information
1 parent
4f2d0c8
commit d2b7d64
Showing
25 changed files
with
371 additions
and
72 deletions.
There are no files selected for viewing
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
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
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
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
38 changes: 38 additions & 0 deletions
38
packages/app-desktop/gui/NoteList/utils/useActiveDescendantId.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { useEffect, useRef, useState } from 'react'; | ||
| import usePrevious from '@joplin/lib/hooks/usePrevious'; | ||
|
|
||
| const useActiveDescendantId = (selectedFolderId: string, selectedNoteIds: string[]) => { | ||
| const selectedNoteIdsRef = useRef(selectedNoteIds); | ||
| selectedNoteIdsRef.current = selectedNoteIds; | ||
|
|
||
| const [activeNoteId, setActiveNoteId] = useState(''); | ||
| useEffect(() => { | ||
| setActiveNoteId(selectedNoteIdsRef.current?.[0] ?? ''); | ||
| }, [selectedFolderId]); | ||
|
|
||
| const previousNoteIdsRef = useRef<string[]>(); | ||
| previousNoteIdsRef.current = usePrevious(selectedNoteIds); | ||
|
|
||
| useEffect(() => { | ||
| const previousNoteIds = previousNoteIdsRef.current ?? []; | ||
|
|
||
| setActiveNoteId(current => { | ||
| if (selectedNoteIds.includes(current)) { | ||
| return current; | ||
| } else { | ||
| // Prefer added items | ||
| for (const id of selectedNoteIds) { | ||
| if (!previousNoteIds.includes(id)) { | ||
| return id; | ||
| } | ||
| } | ||
|
|
||
| return selectedNoteIds[0] ?? ''; | ||
| } | ||
| }); | ||
| }, [selectedNoteIds]); | ||
|
|
||
| return { activeNoteId, setActiveNoteId }; | ||
| }; | ||
|
|
||
| export default useActiveDescendantId; |
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
45 changes: 45 additions & 0 deletions
45
packages/app-desktop/gui/NoteList/utils/useFocusVisible.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { useCallback, useState, useRef, RefObject } from 'react'; | ||
|
|
||
| const useFocusVisible = (containerRef: RefObject<HTMLElement>, onFocusEnter: ()=> void) => { | ||
| const [focusVisible, setFocusVisible] = useState(false); | ||
|
|
||
| const onFocusEnterRef = useRef(onFocusEnter); | ||
| onFocusEnterRef.current = onFocusEnter; | ||
| const focusVisibleRef = useRef(focusVisible); | ||
| focusVisibleRef.current = focusVisible; | ||
|
|
||
| const onFocusVisible = useCallback(() => { | ||
| if (!focusVisibleRef.current) { | ||
| setFocusVisible(true); | ||
| onFocusEnterRef.current(); | ||
| } | ||
| }, []); | ||
|
|
||
| const onFocus = useCallback(() => { | ||
| if (containerRef.current.matches(':focus-visible')) { | ||
| onFocusVisible(); | ||
| } | ||
| }, [containerRef, onFocusVisible]); | ||
|
|
||
| const onKeyUp = useCallback(() => { | ||
| if (containerRef.current.contains(document.activeElement)) { | ||
| onFocusVisible(); | ||
| } | ||
| }, [containerRef, onFocusVisible]); | ||
|
|
||
| const onBlur = useCallback(() => setFocusVisible(false), []); | ||
|
|
||
| return { | ||
| focusVisible, | ||
| onFocus, | ||
|
|
||
| // When focus becomes visible due to a key press, but the item was already | ||
| // focused, no new focus event is emitted and the browser :focus-visible doesn't | ||
| // change. As such, we need to handle this case ourselves. | ||
| onKeyUp, | ||
|
|
||
| onBlur, | ||
| }; | ||
| }; | ||
|
|
||
| export default useFocusVisible; |
Oops, something went wrong.