Skip to content
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

Add role='textbox' to Quill input / textarea to stop "touch to search" behaviour #4434

Open
ripper17 opened this issue Sep 30, 2024 · 0 comments

Comments

@ripper17
Copy link

Steps for Reproduction

  1. Visit quilljs.com on a mobile device with e.g. Chrome
  2. Select a word that you'd like to format (e.g. to make it bold) in the demo section

Expected behavior:
No browser-pop-up should appear (which is usually giving the options to search, translate, ...)

Actual behavior:
The browser-pop-up "touch to search" will appear

Platforms:

Chrome on Android https://www.whatsmybrowser.org/b/2783Q

Version:

Currently deployed version on the homepage https://quilljs.com

Chrome will not open the touch-to-search popup if a role is being set:
https://developer.chrome.com/blog/tap-to-search

It seems appropriate to set the "textbox" role ( https://www.w3.org/TR/wai-aria-1.2/#textbox , https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role ) in conjunction with the aria-multiline attribute (see w3.org for details).

MDN claims

Whenever possible, rather than using this role, use an element with type="text", for single-line input, or a <textarea> element for multi-line input.

but I believe it is justified to set a role in this case.

It's easy to verify: in DevTools, simply add role="textbox" to the Demo on quilljs.com and notice the changed behaviour: It is now possible to make the headline bold, whereas previously, the "tap-to-search"-popup was covering the toolbar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant