🐛 Update event listeners for mega menu

[leafsy]

Resolves #25047

Update the event listener logic in amp-mega-menu to:

1. keep references of event handlers for documentElement and add/remove them when menu is opened/closed (added unit tests);
2. enable links and tap actions on children of menu headings by borrowing the shouldhandleClick method from amp-accordion;
3. allow menu items without expandable content to still be navigable via arrow keys;
4. some minor fixes from manual testing (e.g. prevent menu from collapsing when first clicking on an amp-video inside the menu);

updated firebase demo
Also added file under manual tests: pr-deployed link (must turn on the experiment amp-mega-menu)

[sparhami]

Probably be better to use event delegation here, rather than adding a listener per item. That will allow for handling of changed DOM content (e.g. new headings added) automatically.

[leafsy]

Actually the DOM update listener might still be necessary since we need to add several a11y attributes when first registering each menu item. Looking at the code again, since we're adding separate event listeners to the screen reader buttons anyway, maybe it's ok to keep the existing listeners on heading elements rather than using event delegation?

[sparhami]

There is no reason to remove event listeners on unlayout.

[leafsy]

Talked offline; will remove the unregister function and add/remove the event listeners for documentElement inside the expand/collapse methods since these listeners are only needed when a menu is open.

[cathyxz]

I think when @kristoferbaxter suggested use of a filter function, he meant use the filter function to filter down to only the items in the array you want to operate on. For example, you could also write this as:

this.items_ = toArray(scopedQuerySelectorAll(this.element, 'nav > * > li'));
this.items_.filter(item => !item.classList.contains('i-amphtml-mega-menu-item'))
.foreach(item => {
  const heading = ...
  ...
  this.registerMenuItem_(item, heading, content);
});

[leafsy]

hmm the thing is I only want this.items_ to include items with heading elements; so i can filter out the elements without headings first, but then in the foreach I'll need to get a reference to heading again to pass to registerMenuItem_.

[leafsy]

I've made some changes that should allow me to use the filter and foreach pattern now. For any <li> that conforms to the specs laid out in #25210, we'll register it as a menu item and include it in this.items_. The only case not covered by validation but should be disallowed is when there're two elements under an item and neither is a button/role=button, in which case I've added a userAssert to warn against this. Hopefully the documentation will make it clear.

[cathyxz]

Nice commenting!

[cathyxz]

Approving to unblock.

Nit: I would recommend making the registerMenuItems function idempotent to simplify your DOM_UPDATE code. But feel free to do this if you have extra time.