fix(menu): Allow anchor links as menu list items

[jamesmfriedman]

The current logic prevents anchor links from firing when clicked on in the menu, a fairly common case.
fixes: #3486

[codecov-io]

Codecov Report

Merging #3680 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master    #3680   +/-   ##
=======================================
  Coverage   98.48%   98.48%           
=======================================
  Files         120      120           
  Lines        5227     5227           
  Branches      657      657           
=======================================
  Hits         5148     5148           
  Misses         79       79

Impacted Files	Coverage Δ
packages/mdc-menu/foundation.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 61128be...880a663. Read the comment docs.

[williamernest]

This doesn't work when the user clicks on the text or graphic of the link. We can set pointer-events: none; on the mdc-list-item__text and mdc-list-item__grapic classes when the mdc-list-item is a link.

Adding the following to the end of the mdc-menu will work.

.mdc-menu {
...
  //stylelint-disable selector-max-type, selector-no-qualifying-type
  a.mdc-list-item .mdc-list-item__text,
  a.mdc-list-item .mdc-list-item__graphic {
    pointer-events: none;
  }
  // stylelint-enable selector-max-type, selector-no-qualifying-type
}

[jamesmfriedman]

Ah, yeah that makes sense.

[williamernest]

@jamesmfriedman Can you give me access to your repo to add this snippet?

[jamesmfriedman]

Sorry for the delay. Added you as a collaborator.

[williamernest]

LGTM

[jamesmfriedman]

Thanks @williamernest!

[yguedidi]

@jamesmfriedman @williamernest thanks for the fix! But it looks like it doesn't solve the following comment: #3486 (comment)

[williamernest]

@yguedidi we set pointer events none on the elements within the list to ensure the anchor tag gets clicked and we don't prevent default on the event. Any custom markup you add inside the list item should also set pointer events to none.