Focus Group
A container that shows a shared focus ring when a designated child is focused.
Default
Add data-focus-within to the container and
data-focus to the focusable elements inside it. The
parent shows the outline; the children suppress their own.
<style>
article {
& header span {
margin-right: auto;
}
& textarea {
box-shadow: none;
resize: none;
font-family: monospace;
}
& footer {
justify-content: space-between;
& span {
color: var(--jazz-neutral-500);
}
}
}
</style>
<article data-focus-within>
<header>
<svg>...</svg>
<span>script.js</span>
<button class="ghost square" aria-label="Reload"><svg>...</svg></button>
<button class="ghost square" aria-label="Copy"><svg>...</svg></button>
</header>
<textarea
data-focus
rows="6"
placeholder="console.log('Hello, world!');"
></textarea>
<footer>
<span>Line 1, Column 1</span>
<button>Run <svg>...</svg></button>
</footer>
</article>