fancybox icon indicating copy to clipboard operation
fancybox copied to clipboard

Invalid HTML rendered by jquery.fancybox.js

Open tmb-github opened this issue 5 years ago • 1 comments

The arrowLeft and arrowRight HTML created by the fancybox JS routine contains invalid HTML, as reported by https://validator.w3.org/#validate_by_input and other validators.

The issue is the DIV within the BUTTONs. DIVs are not allowed inside BUTTONs; the DIVs could be turned into SPANs and validate, however. Do the SVG elements need to be enclosed in DIVs at all here?

<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.28 15.7l-1.34 1.37L5 12l4.94-5.07 1.34 1.38-2.68 2.72H19v1.94H8.6z"/></svg>
    </div>
</button>

<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 12.97l-2.68 2.72 1.34 1.38L19 12l-4.94-5.07-1.34 1.38 2.68 2.72H5v1.94z"/></svg>
    </div>
</button>

tmb-github avatar Jan 05 '20 06:01 tmb-github

Hi,

Thanks for reporting. While browsers do not seem to mind, this structure will be changed in the next update.

fancyapps avatar Mar 17 '20 17:03 fancyapps