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