Angular: Build A Dropdown Menu
HTML-first/Minimal Javascript/Accessibility-In-Mind
Published in
4 min readJun 29, 2020
Requirements
- Must be able to navigate with keyboard
Tab/Shift-Tab/Left/Right/Up/Down
- Must open a sub menu keyboard
Enter/Space/Down
- Must execute a menu item with keyboard
Enter
and click - Must close menu with keyboard
Esc
- Must disable menu item with
disabled
attribute - Must be accessibility-compliant with attributes,
role/aria-haspopup/aria-expanded/tabindex
- Must pre-select a menu item with id when initialized
- Must open submenu when mouse is over a menu item
HTML
This guide will use ul
li
as html elements and it’s going to be styled like dropdown menu.
Javascript Development Steps
There are two main things to do with angular; setting attributes and event listeners.
Step 1: Set Attributes
role="menuitem”
role="menubar"