Amphtml: [amp-nested-menu] Bug: SVG polyline and line Throwing Validation Error

Created on 17 Aug 2020  路  4Comments  路  Source: ampproject/amphtml

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

amp-nested-menu Developer Soon Bug DevX components

All 4 comments

@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('');
}
Was this page helpful?
0 / 5 - 0 ratings