Focus Management in 2022 📺

I recently gave a talk! It's on <dialog> and the inert attribute, with a mention of <fieldset disabled>, too.

You can find the talk on JSNation, who graciously hosted me and motivated me to get this done. 🎉

But also, it's just on YouTube here (albeit without my face and a snazzy intro/outro):

This talk combines one of my quite popular blogposts—In Defence Of Dialog, including some great demos—with a bunch more new content about the other focus primitives you have available to you.

Inert Release / Fieldset Disabled

Everything I mentioned in my talk can work today, except…

As of July 2022, Firefox still hasn't shipped the inert attribute. This is something that I called out in my talk. It's completely implemented, but for some reason, Firefox won't throw it over the wall. This is amazing considering even Safari has come to the table.

I'll update this section when or if they do. But if you want some basic workarounds, consider <fieldset disabled> for forms. If you have a HTML form, you can make every <input>, <button> etc contained within disabled all-at-once:

<fieldset disabled>
  <button>I'm disabled because the fieldset is disabled!</button>
</fieldset>

<!-- This "wins" over the lower fieldset,
     so you can wrap complex forms in it -->
<fieldset disabled>
  <div>
    <span>
      <div>
        <main>
          <!-- If the parent is disabled,
               this one is disabled too -->
          <fieldset id="another_one">

<input type="text" value="I'm disabled too, because fieldset[disabled] propogates down" />

          </fieldset>
        </main>
      </div>
    </span>
  </div>
</fieldset>

Try a demo, too:

Note that <fieldset> has some default CSS (you can see it in the demo) that gives it some spacing and a default border. You can reset it by doing this:

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

Or even better, you can do this so it has no representation whatsoever:

fieldset {
  display: contents;
}

Again, this won't disable things like <a href="...">, but will disable any HTML form element. Which may be good enough. 🤷

Thanks

Check out the video! Even on 2x. I promise it's interesting, and can give you far more power when writing complex web experiences—especially useful for folks interested in low-level primitives.

👋