Riff / Built on the open web / Interface

inert

Makes Now Playing a real modal: nothing behind it can take focus.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls — While this dialog is open the post, the bar and the toast underneath cannot take focus.

How Riff uses it

Opening Now Playing sets inert on every direct child of <body> except the player, and on a phone also on the bar and the toast, which the dialog covers. Each node touched is marked so closing restores only those. On a wide screen the bar stays live because the dialog opens above it.

Why

Without it the page behind a role="dialog" would still take keyboard and screen reader focus.

Without it

The page stays focusable behind the dialog.

Where

plugins/riff/assets/riff.js, line 1051
```
node.inert = true;
```
plugins/riff/assets/riff.js, line 1076
```
node.inert = false;
```

Links open the source at the commit this page was published from.

Reference: inert on MDN.