UI ELEMENTS

Modals, Tabs & Tooltips

Overlays and disclosure patterns: a confirmation modal, tabs, an accordion, a tooltip, a toast, a progress bar, and a dropdown menu.

How to use this page

Goal: Open, interact with, and close each component, then confirm it cleans up after itself, with no leftover overlay and no stuck focus.

Challenge: The modal traps focus and blocks clicks on the page behind it. The toast dismisses itself automatically after a few seconds, so timing matters.

Confirmation Modal

Opens an overlay dialog with confirm and cancel actions.

Tabs

Switches visible content without navigating to a new page.

Content for Overview.

Accordion

Expandable and collapsible content panels.

This is the answer for “What is AssertQA?”

Tooltip

Appears on hover or focus and disappears when you move away.

This is a tooltip

Toast Notification

A dismissible notification that also disappears on its own after a few seconds.

Progress Bar

Fills up over a few seconds to simulate an upload or a long-running task.

Dropdown Menu

Opens a menu on click and closes when you pick an item, click outside, or press Escape.

No action selected

Need expert QA help? We offer team training, automation consulting, and end-to-end QA services.

Need this tested professionally?

Testing overlays and disclosure patterns on a production product? AssertQA delivers test automation services, manual testing services, and API testing services for teams that need real-world quality.