Make WordPress Core

Opened 18 months ago

Closed 18 months ago

Last modified 18 months ago

#57503 closed defect (bug) (maybelater)

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

Reported by: squarecandy's profile squarecandy Owned by: joedolson's profile joedolson
Milestone: Priority: normal
Severity: minor Version: 6.1.1
Component: Media Keywords:
Focuses: accessibility Cc:

Description

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?

Change History (5)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


18 months ago

#2 @joedolson
18 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

#3 @squarecandy
18 months ago

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.

#4 @joedolson
18 months ago

  • Keywords close added
  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from accepted to closed

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.

#5 @joedolson
18 months ago

  • Keywords close removed
Note: See TracTickets for help on using tickets.