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

Missing input label on hidden field #4559

Open
cami-dev opened this issue Jan 9, 2025 · 0 comments
Open

Missing input label on hidden field #4559

cami-dev opened this issue Jan 9, 2025 · 0 comments

Comments

@cami-dev
Copy link

cami-dev commented Jan 9, 2025

When running cypress-html-validate and cypress-axe or other tools to check accessibility or html-validation on the quill-editor element I get two warnings:

  1. input missing label.
    Element: <input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">

  2. Anchor link must have a text describing its purpose:
    Element: <a class="ql-preview" rel="noopener noreferrer" target="_blank" href="about:blank"></a>

Both of these elements are hidden in the dom with display: none; hence they are then still visible to validation tools etc.

<div class="ql-tooltip ql-hidden">
<a class="ql-preview" rel="noopener noreferrer" target="_blank" href="about:blank"></a>
<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">
<a class="ql-action"></a>
<a class="ql-remove"></a>
</div>

This template seems to be added here: https://github.com/slab/quill/blob/ebe16ca24724ac4f52505628ac2c4934f0a98b85/packages/quill/src/themes/snow.ts

Version:
2.0.3

All other things pass with the editor so a bit sad to have to fall on what is probably a simple fix :) Guessing you can just convert the :before that contains the "Visit url:"-text to a real <label></label> and wrap it around the input and just add text to the link-tags and you are good to go.

We get around this by excluding ql-hidden in our tests but would be nice not having to do that for every project we use quill in.

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