progressive-disclosure-disclosure-affordances

What problem does it solve?

It prevents subtle UX errors by helping you select the best affordance for revealing tucked-away content, so users can discover and interact with secondary information without unnecessary friction.

Core Features & Use Cases

• Affordance ladder selection: Decide between tooltip/popover, inline expand (accordion), tabs, side sheet/drawer, modal/dialog, or separate page based on the relationship between primary and secondary content.
• Decision support for real UI moments: Use the skill when designing “More options,” choosing between an accordion vs. side sheet, selecting whether wizard steps should be a modal or separate page, or auditing existing disclosure patterns.
• Accessibility & interaction requirements: Includes guidance for keyboard behavior, focus management, ARIA roles for tabs/tooltips, and accessibility-aware HTML primitives (details/summary, dialog, etc.).

Quick Start

Use progressive-disclosure-disclosure-affordances to choose the correct UI mechanism for revealing your “more options” content—accordion, side sheet, modal, or separate page—based on how often it’s needed, how much structure it has, and whether users must decide before continuing.