Avoid Adding Modals to Other Modals or Dropdowns

I ran into some UI patterns that raised some red flags; one was having a modal/dialog triggered from…some other element that is already “on top” of the current page (e.g., other modals, dropdown menus, flyout panels/drawers). After digging into it a bit more, I figured out why it bothers me. I’ve compiled some points to consider, but the TL;DR is this: avoid mixing dropdowns, search boxes, and modals in a single interaction. Each pattern has its place, but combining them can create accessibility failures, cognitive overload, usability friction, and other chaos. Instead, use other (recognized) patterns (e.g., combo box, explicit advanced search links, or inline search fields) that have clear expectations, expected contextual behaviors, and maintain accessible focus flows.

melsumner.github.io · Just Melanie from the Internet