webmidi-test VS a11y-dialog

I've been regularly checking that page, delighted with every step of progress as WebMIDI gets implemented in Firefox.

In about:config, I have dom.webmidi.enabled set to true. I'm using this test page and waiting for the day it starts working for regular version of Firefox.

https://versioduo.com/webmidi-test/

If it's a warning it should probably be role="alertdialog" rather than role="dialog". This will allow assistive devices to prioritize its content and trigger things like an alert sound. You probably also want to put keyboard focus on the least destructive action, which in your case would be the "save changes" button, rather than leaving keyboard focus above the close button. Here's a script by Kitty Giraudel that will do most of this for you, if you want.

On that note, TIL about screen reader issues related to dialogs in general, including this built-in. Seems like the question is primarily around how to update the focus target from the "invoking element" to the dialog's content in a reader-friendly way. There's a linked post from the MDN docs with more detail https://www.scottohara.me/blog/2019/03/05/open-dialog.html#i.... They actually still recommend a custom implementation that's considered more robust when used with screen readers: https://github.com/KittyGiraudel/a11y-dialog. I'm glad there's a callout on the MDN docs as I would have assumed this dialog element is screen reader clean. Focus management is always a tough thing regardless.