Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Accessible Multi-Button Group Focus and Roving Tabindex

Problem: Accessible Multi-Button Group Focus and Roving Tabindex

Try to create visually grouped icon buttons with a clear custom focus outline for keyboard users.

We'll cover the following...

Problem description

You are given a horizontal button group containing three icon-only buttons. Each button has an accessible label (aria-label, such as “Bold”, “Italic”, and “Underline”) and displays only an SVG icon. All buttons have the class .toolbar-btn, and the container uses .toolbar-group. ...