Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Accessible Menu Button with Keyboard Focus Highlight

Solution: Accessible Menu Button with Keyboard Focus Highlight

Let’s show a custom focus outline on menu buttons and items only during keyboard navigation.

We'll cover the following...

Problem description

You are given a menu button component:

  • The menu trigger is a <button class="menu-btn">.

  • The menu dropdown is a <ul class="menu-list">, containing several <li><button class="menu-item">...</butto ...