♿️(frontend) fix subdoc opening and emoji pick focus #1745
Conversation
ensures subdoc opens and emoji picker focus on input Signed-off-by: Cyril <c.gromoff@gmail.com>
ensures subdoc opens and emoji picker focus on input Signed-off-by: Cyril <c.gromoff@gmail.com>
Ovgodd
force-pushed
the
fix/a11y-emoji-picker-focus-and-enter
branch
from
70177ca to
7c90e7f
Compare
|
Size Change: +303 B (+0.01%) Total Size: 4.15 MB
|
| - 🌐(backend) internationalize demo #1644 | ||
| - ♿(frontend) improve accessibility: | ||
| - ♿️Improve keyboard accessibility for the document tree #1681 | ||
| - ♿️(frontend) fix subdoc opening and emoji pick focus #1745 |
There was a problem hiding this comment.
When rebase with main it will have to go under Unreleased.
There was a problem hiding this comment.
Can you delete this part so, as it is doing the same action ?
| }, [onClickOutside]); | ||
|
|
||
| const pickerContent = ( | ||
| <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0"> |
There was a problem hiding this comment.
I prefer to avoid useEffect when possible, can we add the keydown action on the Box prop ?
| e.preventDefault(); | ||
| e.stopPropagation(); |
There was a problem hiding this comment.
Is it really necessary to stop the bubbling or the default behavior ?
| useKeyboardActivation( | ||
| ['Enter'], | ||
| isActive && !menuOpen, | ||
| handleActivate, | ||
| true, | ||
| '.c__tree-view', | ||
| ); | ||
|
|
There was a problem hiding this comment.
I don't think you need it anymore, this commit (suitenumerique/ui-kit@c121fdd#diff-69b4765cf5a180b5d5c2157eb0132487a6c0b7b7fb1dc379250ce110ac162e2eR27) adds onKeyDown, so here you can add directly what you need now.
You have to bump to the last ui-kit version though.
Purpose
Improve keyboard accessibility when opening the emoji picker
by focusing the input field automatically. Also fix keyboard interaction with
subdocuments using the Enter key.
Proposal
Automatically place focus on the search input when the emoji picker opens.
Additionally, ensure that pressing Enter correctly selects subdocuments,
improving keyboard usability.