Why does mejs audio player have tabindex="0" on the container div?

[squarecandy]

Hi All -

Just wondering why the shortcode/mejs audio player has the whole container as focusable when it's only the buttons inside it that are tied to events/actions you can take.

<div id="mep_7" class="mejs-container wp-audio-shortcode mejs-audio" tabindex="0" role="application" aria-label="Audio Player">
<div class="mejs-inner">
// ... etc 
</div></div>

Is this a best practice to make the whole player focusable in addition to the individual buttons?

If yes, what's the purpose and do we need to ensure that a visible outline is applied when it's focused?

If no, can this be removed from player HTML output?

[squarecandy]

This does seem to be originating from the mediaelement library, and not from the WP templating/implementation.

​https://github.com/WordPress/wordpress-develop/blob/0cb8475c0d07d23893b1d73d755eda5f12024585/src/js/_enqueues/vendor/mediaelement/mediaelement-and-player.js#L3745

The main accessibility problem with this, is that the library also hides the focus with:

.mejs-container:focus {
    outline: none
}

​https://github.com/WordPress/wordpress-develop/blob/0cb8475c0d07d23893b1d73d755eda5f12024585/src/js/_enqueues/vendor/mediaelement/mediaelementplayer-legacy.css#L53

I guess this probably won't get much attention if the library is now labeled "legacy" but we use this all over our projects and would love to not have to upgrade.

We can override these things in our own implementations, but I thought it would be good to point it out to the accessibility team.

[joedolson]

The current version of mediaelement-and-player.js still does the same thing, so updating that wouldn't do anything to resolve this. Additionally, since mediaelement is no longer in use in the block editor, I suspect that this is going to be a very low priority.

As an accessibility issue, it's relatively minor, so customizing to fix it isn't super likely, as well.

The purpose of the focus is going to mostly apply to video - it allows a user to tab onto the player if the player controls are configured to be hidden when playing or by default. Once focus is moved to the player, then the controls can be made visible again.

Marking as 'maybe later'. It might be something worth fixing, but it's realistically not going to happen soon.