Focus Trap Bug

html

<div class="ftb-demo" style="--accent:#241430;">
  <span class="ftb-demo__badge">{{unless fixed}}&#10007; Anti-pattern: focus trap bug

tailwind

<div class="relative" style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <span class="ftb-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: focus trap bug

react

export function FocusTrapBug({
  itemLabel = "Coupon code",
  fixed = false,
  accent = "#241430",
  radius = 8,
}) {
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", position: "relative" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: focus trap bug"}
      </span>
      <div style={{ padding: 14, borderRadius: 10, background: "#FAF7F2", border: "1.5px solid #24143022", position: "relative" }}>
        <label style={{ display: "block", fontSize: 11, fontWeight: 600, marginBottom: 6 }}>{itemLabel}</label>
        <input type="text" style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", borderRadius: 6, border: "1.5px solid #24143033", marginBottom: 8, font: "inherit" }} />
        <button type="button" style={{ border: "none", background: accent, color: "#FAF7F2", padding: "8px 16px", fontWeight: 700, cursor: "pointer", borderRadius: radius, outline: "2px solid " + accent, outlineOffset: 2 }}>Apply</button>
        {!fixed && <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", right: 2, bottom: 2, outline: "2px dashed #b3261e", outlineOffset: 4, fontSize: 0 }}>focus is here \u2014 but this element is invisible</span>}
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{fixed ? "Tab moves through visible controls only, ring always shown" : "Tab moved focus onto a zero-size element off in the corner \u2014 keyboard users lose track of where they are"}</p>
    </div>
  );
}