-
Notifications
You must be signed in to change notification settings - Fork 917
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Focus trap #756
Comments
I have the same problem. I modified that workaround to account for your two remaining problems.
<div
onKeyDownCapture={(ev) => {
if (ev.key === "Tab") {
ev.preventDefault();
ev.stopPropagation();
document.getElementById(props.nextTabId)?.focus();
}
}}>
<ReactQuill
ref={editor}
...
/>
</div> I'd like to see a real fix for this as well, but for now at least, my use case is covered. |
I also have the same issue. Thanks @wfischer42 for sharing your solution, it helped me a lot. I just added a few modifications, so it does not trap the tab navigation if the user goes backwards, and for forward navigation it goes through the toolbar buttons, and only goes to Also added area-label for the wrapper div for accessibility <div
role="textbox"
aria-label={ariaLabel}
onKeyDownCapture={(e) => {
if (e.key === 'Tab' && (e.target as HTMLElement).classList.contains('ql-editor')) {
e.preventDefault()
e.stopPropagation()
document.getElementById(e.shiftKey ? prevTabId : nextTabId)?.focus()
}
}}
>
<ReactQuill {...props} preserveWhitespace />
</div> |
In your code example, Alt-tab allows a keyboard user to exit the text area. It would be great if this was documented, because I don't think it's obvious. |
I found a workaround that doesn't require
|
Hi there! Thanks so much for this wonderful project :)
The "Tab" key is used by React Quill for indentation, which makes sense in a text-editing context, but it also overrides the ability for keyboard users to navigate through the page. It essentially "traps" focus and blocks the user from moving past it, unless they use a pointer device like a mouse/trackpad.
Here's an example, to demonstrate the issue. Try to focus the
<input>
after the ReactQuill instance: https://codesandbox.io/s/react-quill-template-forked-rbmqqI don't think this is a Quill issue, since this issue suggests that it's been fixed in Quill.
Workaround
Here's what I'm doing right now as a workaround:
This kinda works, but there are two problems:
Has anyone found a better workaround?
Ticket due diligence
v2.0.0-beta.2
ReactQuill version
The text was updated successfully, but these errors were encountered: