Front-End Exercise # 6

Ctrl+Speak · Front-End QA Speaking Exercise

Practice diagnosing invisible overlays and z-index issues that block clicks.

Exercise #6 · Invisible Overlay — Buttons Don’t Click

Front-end · Z-index · Speaking

Assignment & Scenario: Marketing had a cookie banner last sprint. It’s “hidden” now, but users report that the primary CTA is unclickable on some pages. Your job: reproduce the issue, think aloud, and report it clearly as if speaking to a developer.

Live Demo (overlay blocking clicks)

Try clicking the “Subscribe” CTA. It should fire an alert, but nothing happens.

<!-- Minimal buggy snippet you can reuse -->
<div class="overlay" aria-hidden="true"></div>

<button class="big" id="ctaBtn">Subscribe</button>

<style>
/* BUG: overlay intercepts clicks */
.overlay{
  position:fixed; inset:0;
  z-index:9999;
  background:rgba(0,0,0,0);
  pointer-events:auto; /* should be none when hidden */
}
</style>

<script>
// BUG: wrong ID queried
document.getElementById('ctaButton')?.addEventListener('click', ()=>alert('Subscribed!'));
</script>

🎤 Speaking Instructions (in-class) how to perform

Title: “Primary CTA is unclickable due to invisible overlay.”
Environment: “Chrome on Windows 11; default viewport (desktop).”
Steps to reproduce:
1. Open the page with the CTA.
2. Hover and click the “Subscribe” button.
3. Observe that nothing happens; the cursor changes but no action fires.
Expected vs. Actual:
- Expected: Clicking the CTA triggers the subscription handler.
- Actual: Clicks are intercepted; no handler runs; no alert appears.
Impact/Severity: “High — blocks conversions; users can’t complete the primary action.”
Recommendation: “Remove/disable the overlay (set pointer-events:none or remove the node) when the banner is dismissed; lower its z-index or scope it; also fix the JS selector to #ctaBtn.”
Hand-off: “I’ll attach a short screen recording and DevTools screenshot showing the overlay bounding box.”

📖 Vocabulary definitions

overlay — an element positioned above content, often to dim the page or capture clicks.
z-index — CSS stacking order value; higher values appear on top.
pointer events — how an element handles mouse/touch interactions.
hit area — the clickable region of an element.
stacking context — the 3D ordering rules for overlapping elements.
selector — a reference to find an element in CSS/JS (e.g., #ctaBtn).
bounding box — the rectangle that defines an element’s on-screen region.

🧩 Collocations natural pairings

intercept clicks
block interactions
lower the z-index
remove the overlay node
toggle pointer events
scope the overlay to a container
fix the selector

🗣️ Idioms & Phrasal Verbs natural speech

get in the way — obstruct (“An invisible layer gets in the way of clicks.”)
track down — locate the cause of a problem.
rule out — eliminate a hypothesis.
zero in on — focus closely on the cause.
peel back — progressively hide layers in DevTools to reveal what’s on top.

🧪 Model Answer (spoken style) example

“Title: Primary CTA is unclickable due to invisible overlay. Environment: Chrome on Windows 11. Steps: open the page, try to click ‘Subscribe’. Expected: the click triggers the subscription handler. Actual: nothing happens. Impact: high—this blocks conversions. I inspected the layers in DevTools and found a full-screen transparent .overlay with a very high z-index and pointer-events:auto, likely leftover from a cookie banner. Also, in JS the handler targets #ctaButton instead of #ctaBtn. Recommendation: remove the overlay node when the banner is dismissed or set pointer-events:none and reduce its scope/z-index; update the selector to #ctaBtn. I’ll attach a short recording and a screenshot of the overlay’s bounding box.”