Valid menu/sub-menu pattern is reporting errors

The following markup which is from W3C WAI example is not valid according with ember-template-lint.

<ul role="menubar" aria-label="functions" id="appmenu">
  <li role="menuitem" aria-haspopup="true">
    File
    <ul role="menu">
      <li role="menuitem">New</li>
      <li role="menuitem">Open</li>
      <li role="menuitem">Print</li>
    </ul>
  </li>
  {{!-- ... --}}
</ul>

ember-template-lint is reporting the following error

Do not use an element with `role=“menuitem”` inside an element with `role=“menuitem”` : ember-template-lint (no-nested-interactive)

After discussing with @MelSumner, it appears that the submenu pattern should be supported by ember-template-lint as it is valid markup

[KamiKillertO]

@geneukum no I did not have the time to work on it. Feel free to have a look

[KamiKillertO]

I’ll a look and see if I can find a way to fix the issue 👍