An accessible menu component

This is my attempt to build an accessible "menu and menu button" component from scratch. Based on Dave Rupert's "Nutrition Cards for Accessible Components" and the WAI-ARIA Authoring Practices guide. This video is also available as a blog post: https://barker.codes/blog/an-accessible-menu-component/

- Demo: https://kieranbarker.github.io/accessible_components/menu_and_menu_button/
- Source code: https://github.com/kieranbarker/accessible_components/tree/main/menu_and_menu_button

Timestamps:

- Demo: 0:00
- Progressive enhancement: 4:10
- Handling button clicks: 13:24
- Handling menu item mouseovers: 17:54
- Handling keydown events: 21:01
- Handling keydown events on the button: 28:25
- Handling keydown events on the menu items: 29:44
- Handling mousedown events outside the component: 43:42

Further reading:

- Nutrition card: https://davatron5000.github.io/a11y-nutrition-cards/components/menu
- WAI-ARIA authoring practices: https://w3c.github.io/aria-practices/#menu
- Navigation menu button example: https://w3c.github.io/aria-practices/examples/menu-button/menu-button-links.html
- The W3C software license: https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- Progressive enhancement: https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement
- The Element.id property: https://developer.mozilla.org/en-US/docs/Web/API/Element/id
- The HTMLButtonElement.type property: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement#properties
- The Node.textContent property: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
- The aria-controls attribute: https://w3c.github.io/aria/#aria-controls
- The aria-haspopup attribute: https://w3c.github.io/aria/#aria-haspopup
- The HTMLElement.hidden property: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
- The hidden attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
- The role attribute: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
- The menu role: https://w3c.github.io/aria/#menu
- The aria-labelledby attribute: https://w3c.github.io/aria/#aria-labelledby
- Hiding an element's semantics from assistive technologies: https://w3c.github.io/aria-practices/#presentation_role
- Roles that automatically hide semantics by making their descendants presentational: https://w3c.github.io/aria-practices/#children_presentational
- The menuitem role: https://w3c.github.io/aria/#menuitem
- The Element.before() method: https://developer.mozilla.org/en-US/docs/Web/API/Element/before
- The click event: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
- Callback functions: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
- The EventTarget.addEventListener() method: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- The aria-expanded attribute: https://w3c.github.io/aria/#aria-expanded
- The HTMLElement.focus() method: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
- The Event.target property: https://developer.mozilla.org/en-US/docs/Web/API/Event/target
- The mouseover event: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
- Event bubbling: https://javascript.info/bubbling-and-capturing#bubbling
- The KeyboardEvent.key property: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
- Getting the last item in an array: https://barker.codes/blog/how-to-get-the-last-item-in-a-javascript-array
- The HTMLElement.click() method: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
- The return statement: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return
- The Event.preventDefault() method: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
- The KeyboardEvent.ctrlKey property: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey
- The KeyboardEvent.altKey property: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey
- The KeyboardEvent.metaKey property: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
- Regular expression literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegEx #literal_notation_and_constructor
- The document.documentElement property: https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement