Frontend Subscribe to Frontend RSS feed

You built a modal. You press Tab, and the buttons in the background get focus. You press ESC, and nothing closes. A screen reader plows through the content without even saying “dialog.” And when you click the close button, focus vanishes into thin air. Anyone who builds modals runs into all four of these at some point. The name focus trap sounds great, but the problem is that the trap tends to get set in the wrong place. Let’s fix them one by one. ...

I was building a signup form. The moment I focused the email field, an error popped up: “Invalid email format.” I hadn’t typed a single character yet. The password confirmation field was the opposite. I typed the whole password, submitted the form, and only then did it say “Passwords don’t match” — after I’d already finished typing. Then I hit submit, and seven error messages showed up all at once. ...

I’d been happily shipping a React SPA for a while when an accessibility audit came back with this note: “The page changed, but the screen reader said nothing.” The page transition animated smoothly, the URL updated, the content changed… but as far as a screen reader user was concerned, nothing happened at all. That’s the hidden trap of SPAs. Traditional Websites vs. SPAs What happens when you click a link on a traditional multi-page site? ...

Safari’s top-level await bug was reported back in July 2022 (WebKit bug 242740), and by October 2025 it had gotten bad enough that top-level await dropped to “Limited” on Baseline (the cross-browser support signal for web platform features). The fix merged in April 2026, shipped starting with Safari Technology Preview 243 in May, and on September 2 the WebKit team posted the postmortem: Fixing top-level await in Safari. ...

A green toast reading “Saved” pops up in the bottom-right corner of the screen. It disappears two seconds later. For someone using a mouse, that’s complete feedback. But for someone who isn’t looking at the screen? That toast never happened. There’s no way to know whether the save succeeded or not. This is exactly what live regions exist to solve. Mark a region ahead of time as one whose content can change without a page refresh, and when the text inside it changes, the screen reader reads it out automatically. One line — aria-live="polite" — is all it takes. ...

Opening: treating scroll as “time” When you build scroll-based animations, you eventually hit this thought: “What if scroll were not just an input event” “but a proper timeline?” Scroll-Driven Animation is that idea made explicit. Instead of treating scroll as a trigger, you treat it as the timeline itself. In this post, I group implementation strategies into three families: Native CSS Scroll-Driven Animation IntersectionObserver for state changes scroll + requestAnimationFrame with manual progress mapping For each one, we will cover the principle, strengths, tradeoffs, and accessibility concerns. The code samples here are minimal and correct by themselves, and each section ends with a link to a live demo you can poke at directly. ...

This is Part 22 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary What do you end up with when you stack tests onto one small app, one layer at a time? This article is the retrospective on that journey — and a map of frontend testing as a whole. The layers we stacked were these: unit tests that check whether a single function does its one job, component tests that poke at the screen the way a user would, real-browser E2E that sweeps end to end, accessibility checks that protect users who never look at the screen, and CI that runs all of it for you on every PR. By the end, we’d even gotten to verifying code and tests written by AI. ...

This is Part 21 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary AI-written code is fast, it runs, and the screen looks good. The problem is that it’s wrong in plausible ways. Two spots go empty especially often. One is accessibility — the things people who use the web without looking at a screen need. The other is what happens in moments that rarely come up — an empty search box submitted, a server returning a 500. We call these edge cases. Both fall into “nobody covers it unless you ask” territory. ...

AI now drives the browser itself. A practical map of Playwright codegen and MCP agents: why Playwright MCP reads the accessibility tree rather than screenshots, and why self-healing selectors aren't a Playwright feature.

This is Part 19 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Can you just ask AI (large language models like ChatGPT and Claude) to write your tests? Yes. Just don’t trust them as-is. AI produces plausible tests in seconds, but tends to quietly skip the boundary, failure, and accessibility cases that matter most. This article is about employing AI properly as a test-writing assistant — from getting good drafts to the checklist that proves the tests actually work. ...