Manual Test Cases for Overlapping Interactive Elements - Test 1587
Test 1587: Interactive elements overlapping with another interactive element
Interactive elements are outlined to help visualize their boundaries and overlaps.
Detection Logic:
- Tests for overlap between any two interactive elements (buttons, links, inputs, elements with roles, etc.)
- Elements must not be intentionally hidden (display:none, visibility:hidden, etc.)
- Elements must be interactive (have a role, href, tabindex ≥ 0, or be natively focusable)
- Uses bounding box collision detection - any pixel overlap triggers a failure
- Edge-touching elements (no pixel overlap) pass the test
Covered Interactive Elements:
- Elements with roles: button, checkbox, link, menuitem, option, radio, switch, tab
- Elements with tabindex ≥ 0
- Native interactive elements: a[href], button, input, select, textarea, details
N/A Tests - Should Not Be Tested
Non-interactive span element (no role)
test
Non-interactive elements are not tested for overlap
Hidden interactive element (display:none)
Hidden elements are excluded from testing
Link without href
Links without href are not interactive
PASS Tests - Interactive Elements That Don't Overlap
Single interactive element
Single element has nothing to overlap with
Two buttons side by side without overlap
Buttons separated by 20px horizontally
Two buttons vertically separated
Buttons separated by 20px vertically
Elements with different roles not overlapping
Button and link properly separated
Adjacent buttons touching edges but not overlapping
Edges touch at x=30, but no pixel overlap (30px != 30px overlap)
Multiple interactive elements properly spaced
Three buttons in different positions without overlap
Elements with tabindex not overlapping
Focusable divs properly separated
FAIL Tests - Overlapping Interactive Elements
Two buttons completely overlapping
Both buttons at same position - complete overlap
Two buttons partially overlapping horizontally
10px horizontal overlap (left: 20-30 overlaps with first button's 0-30)
Two buttons partially overlapping vertically
10px vertical overlap (top: 20-30 overlaps with first button's 0-30)
Two buttons overlapping diagonally
Diagonal overlap - both horizontal and vertical
One button contained within another
Small button completely inside large button
Button and link overlapping
Different element types can overlap
Select and textarea overlapping
Dropdown overlaps with textarea
FAIL Tests - Elements with Roles Overlapping
Element with role="button" overlapping button
Native button and ARIA button overlap
Two elements with role="checkbox" overlapping
Two custom checkboxes overlapping
Element with role="link" overlapping button
Link
ARIA link overlaps button
Elements with role="menuitem" overlapping
Menu items stacked too close
Elements with role="option" overlapping
Listbox options overlapping
Elements with role="radio" overlapping
Radio buttons placed too close
Element with role="switch" overlapping button
Toggle switch overlaps with button
Elements with role="tab" overlapping
Tabs overlap by 20px (40-60 overlaps with first tab's 0-60)
FAIL Tests - Elements with tabindex Overlapping
Elements with tabindex="0" overlapping
Two focusable elements overlapping
Element with tabindex="1" overlapping button
Focus
Focusable span overlaps button
FAIL Tests - Native Interactive Elements Overlapping
Two links overlapping
Two hyperlinks overlapping
Details element overlapping button
Details
Content
Details/summary element overlaps button
FAIL Tests - Multiple Overlapping Elements
Three buttons all overlapping (3 failures)
Chain of overlaps - all three buttons overlap with each other
Mix of overlapping and non-overlapping elements (2 failures)
A and B overlap, C is separate
Four buttons with two pairs overlapping (4 failures)
Two separate overlapping pairs (A-B and C-D)
Two buttons with minimal 1px overlap (edge case)
Only 1px overlap (29-30 overlaps with first button's 0-30) - still fails
PASS Tests - All Interactive Types Properly Spaced
All interactive roles without overlap
Button
Checkbox
Link
MenuItem
Option
Radio
Switch
Tab
All ARIA roles properly spaced in a grid
All native interactive elements properly spaced
All native form elements properly spaced