Can have menus where the top level is also a link

[maxkadel]

User story

In order to work in the same way as https://library.psb-prod.princeton.edu/ we need users to be able to click on a top-level link that also has a sub-menu.

Acceptance criteria

• Works like https://library.psb-prod.princeton.edu/

• Both the link and the drop-down caret are in the tab order

• The link goes to a configured page

• The caret opens the drop-down menu when you press enter on it

• When you hover on either the link or the caret it opens the drop-down menu - no change on hover

• No need to create an animation on the caret

• If there is no top-level link, it simply opens the menu

• I can successfully use this feature with Voice Over in Safari.

• I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:

  • axe dev tools
  • Lighthouse
  • Wave

Concrete example

See, for example, the "Help" menu on https://library.psb-prod.princeton.edu/. Clicking on the top-level link takes you to a "help" page, but you can also see sub-menus when hovering or tabbing over it.

Implementation notes, if any