Angular: Build A Dropdown Menu

HTML-first/Minimal Javascript/Accessibility-In-Mind

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 keyboardEsc
• 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

Standard HTML ………………………Angular User HTML………………………….….. ……………Angular User HTML after initialized…………………………………..

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"