ARIA dialog

Now Playing is a named modal dialog with Escape and focus return.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls — This whole view is one dialog named Now Playing; focus lands on the close chevron when it opens.

How Riff uses it

The Now Playing container is printed as role="dialog" with aria-modal and a translated label. The buttons that open it declare aria-haspopup="dialog". The script completes the pattern. Opening remembers the focused element and moves focus to Close. Escape closes from anywhere, the rest of the page goes inert, and closing returns focus to the opener.

Why

Screen readers announce Now Playing as a modal dialog. Without the role the full-screen view would read as part of the post.

Where

plugins/riff/templates/player.php, line 64

<div class="riff-np" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e( 'Now Playing', 'riff' ); ?>" hidden>

plugins/riff/assets/riff.js, line 1040
```
opener = document.activeElement;
```

plugins/riff/assets/riff.js, line 1278

if ( e.key === 'Escape' && ! np.hidden ) {

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

Reference: ARIA dialog on MDN.