Improve nav semantics and functionality

[marcysutton]

The nav block included in the AEM block collection has some accessibility issues that need to be fixed:

1. The nav has aria-expanded on it in desktop mode even though it's always expanded. This attribute isn't really helpful for screen readers in this context.
2. The nav dropdowns use the tabindex attribute and keyboard events on listitem elements that are inaccessible to screen reader users. When navigating with VoiceOver and other screen readers, the text and number of list items are announced but there is no indication these items are interactive.

In this PR, I made the following changes:

1. Only apply aria-expanded to the nav when isDesktop.matches evaluates to false. The mobile view is still styled off of aria-expanded and marked with the current ARIA state like it was before.
2. The nav-drop components have button elements that are keyboard and screen reader interactive. This preserves the list role and semantics for the containing element, while creating an accessible affordance that indicates the correct role, state, and property for an interactive dropdown toggle. The top-level nav items are still interactive with the mouse.

By merging these changes into the base repository, every consumer of the code will benefit from a more accessible starting point.

Note: One thing I considered was wrapping the top-level nav item text in a button since the whole thing is clickable (e.g. "Default Content"). But in my own AEM project implementation, I found that wrapping the item text from a nav-drop while excluding the UL child is pretty complicated. I chose to keep this version simple intentionally for that reason.

Test URLs:

• Before: https://main--aem-block-collection--adobe.hlx.page
• After: https://nav-a11y--aem-block-collection--marcysutton.hlx.page

[aem-code-sync]

	Page	Scores	Audits	Google
M	/
D	/