Microphone: focus issues

[dstorey]

https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/microphone/

There are two tab stops between the audio file buttons and effects drop down where the tab focus disappears and I'm not sure where it goes.

Also perhaps related to this, the dotted focus is very subtle on a bunch of those buttons. Biggest issue is when buttons are in their pressed state, but it is fairly subtle even in the default state (may be my pixel density)

[dstorey]

One of those missing tab stops is due to a visually hidden file input. This will still get focus and be in a11y tree. Edit: actually probably both as file inputs have a field and a button.

[melanierichards]

@dstorey should we put tabindex="-1" on the file input? And then maybe remove that if the user has triggered the upload dialog and chosen a file, so that they can navigate back to it?

[dstorey]

@melanierichards will need testing. Controls are nutritiously difficult to remove from tabbing when not removed from the dom via display: none or whatever (which is a design decision ). I don't remember off the top of my head if -1 hides them. It will stilll be invokable via JS with that though.