mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-01 19:25:10 +02:00
Garry Tan
a94a64f821
* fix: snapshot -i auto-detects dropdown/popover interactive elements - Auto-enable cursor-interactive scan (-C) when -i flag is used - Add floating container detection (portals, popovers, dropdowns) - Detects position:fixed/absolute with high z-index - Recognizes data-floating-ui-portal, data-radix-* attributes - Recognizes role=listbox, role=menu containers - Elements inside floating containers bypass the hasRole skip - Catches dropdown items missed by the accessibility tree - Role=option/menuitem elements in floating containers captured even without cursor:pointer/onclick - Tag floating container items with 'popover-child' reason - Include role name in @c ref reasons when present - Add dropdown.html test fixture - Add dropdown/popover detection test suite (6 tests) - Add test: -i alone includes cursor-interactive elements Fixes: Bookface autocomplete, Radix UI combobox, React portals, and similar dynamic dropdown patterns where ariaSnapshot() misses the floating content. * chore: bump version and changelog (v0.15.12.0) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: update snapshot -i/-C flag descriptions to mention auto-enable behavior * test: strengthen clickability test guard assertions The @c ref clickability test previously used if-guards that would silently pass when no Alice line was found in the snapshot output. Both Claude and Codex adversarial review flagged this as a test that could regress without CI noticing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: regenerate top-level SKILL.md with updated flag descriptions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: root <root@localhost> Co-authored-by: gstack <ship@gstack.dev> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
62 lines
2.0 KiB
HTML
62 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test Page - Dropdown/Autocomplete</title>
|
|
<style>
|
|
.search-container { position: relative; width: 300px; }
|
|
.search-input { width: 100%; padding: 8px; }
|
|
.dropdown-portal {
|
|
position: fixed;
|
|
top: 60px;
|
|
left: 20px;
|
|
z-index: 9999;
|
|
background: white;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
width: 300px;
|
|
}
|
|
.dropdown-item {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
.dropdown-item:hover { background: #f0f0f0; }
|
|
.dropdown-item-no-cursor {
|
|
padding: 8px 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Dropdown Test</h1>
|
|
|
|
<div class="search-container">
|
|
<input type="text" class="search-input" placeholder="Search for someone..." id="search" aria-label="Search">
|
|
</div>
|
|
|
|
<!-- Simulates a React portal / floating-ui popover -->
|
|
<div class="dropdown-portal" id="dropdown-portal" data-floating-ui-portal>
|
|
<!-- Items with cursor:pointer but NO ARIA roles (common pattern) -->
|
|
<div class="dropdown-item" onclick="selectItem('alice')">Alice Johnson - Acme Corp</div>
|
|
<div class="dropdown-item" onclick="selectItem('bob')">Bob Smith - Beta Inc</div>
|
|
<div class="dropdown-item" onclick="selectItem('carol')">Carol Davis - Gamma LLC</div>
|
|
|
|
<!-- Items WITH role="option" (well-built component) -->
|
|
<div class="dropdown-item" role="option" onclick="selectItem('dave')">Dave Wilson - Delta Co</div>
|
|
|
|
<!-- Item with no cursor, no onclick, just text (should NOT be captured) -->
|
|
<div class="dropdown-item-no-cursor" id="static-text">No results? Try a different search.</div>
|
|
</div>
|
|
|
|
<!-- Standard interactive elements (should appear in ARIA tree normally) -->
|
|
<button id="submit-btn">Submit</button>
|
|
<a href="/test">Normal Link</a>
|
|
|
|
<script>
|
|
function selectItem(name) {
|
|
document.getElementById('search').value = name;
|
|
document.getElementById('dropdown-portal').style.display = 'none';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|