Editor dropdown menu

Develop a keyboard-accessible dropdown menu for a content editor.

Overview

Your Challenge is to create an accessible dropdown menu for a content editor. The user should be able to navigate the menu using the keyboard and view helpful hints for keyboard shortcuts.

Your Challenge is complete when:

The component is as close to the original design as possible
Elements have the correct state styles (hover, focus, etc.)
Using ENTER on the keyboard opens the menu, arrows navigate list items, and using ESC on the keyboard closes the menu and refocuses the menu button
The list of items gains focus and becomes keyboard navigable automatically when the menu is opened

Solutions

Solutions coming soon

What's included

Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.

Organized Figma design file
Detailed desktop, tablet, and mobile layouts
Comprehensive design system
Relevant fonts, colors, SVGs, and images

Alternative Solutions from members
Straightforward quick-start guide
Recommended list of learning resources
Access to community Discord channels