I am attempting to use SVGs in my amp-nested-menu, however I cannot validate amp because I am getting the following error which I believe to be incorrect because SVGs are allowed and according to the SVG Docs listed in the error, polyline and line should be allowed.
Errors:
The tag 'polyline' may not appear as a descendant of tag 'amp-nested-menu'. https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg
The tag 'line' may not appear as a descendant of tag 'amp-nested-menu'. https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg
Code to duplicate error:
<amp-nested-menu layout="fill">
<ul>
<li>
<a className="sidemenu-item sidemenu-title">Shop by Category</a>
</li>
<li>
<h5 className="sidemenu-item" amp-nested-submenu-open="true">Preliminary
<i class="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg></i>
</h5>
<div amp-nested-submenu="true">
<ul>
<li>
<h5 className="sidemenu-item sidemenu-back-button" amp-nested-submenu-close="true">
<i class=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></i>
Main Menu
</h5>
</li>
<li>
<a className="sidemenu-item sidemenu-title">Preliminary</a>
</li>
</ul>
</div>
</li>
</ul>
</amp-nested-menu>
Just need line, polyline, and other svg tags added to the descendant_tag_list in https://github.com/ampproject/amphtml/blob/master/extensions/amp-nested-menu/validator-amp-nested-menu.protoascii
@ampproject/wg-ui-and-a11y @wassgha any issue with adding line, polyline to the descendant_tag_list?
@honeybadgerdontcare this seems like an oversight. So please go for it.
@isaac-tru thank you for the PR, please sign the CLA and we can get it merged.
I've successfully managed to add SVG like this:
::before {
content: url('');
}