Fix or consider to remove the mejs volume slider tooltip

[afercia]

The mediaelement player supports keyboard navigation through its controls and, when focusing the volume slider, it shows a tooltip:

The tooltip doesn't appear in Chrome because wp-mediaelement.css should reset also clip-path on focus. It's visible on all the browsers that don't support clip-path yet. I remember previous issues with this tooltip and maybe it's time to consider to improve its styling and positioning or consider to remove/hide it and provide better feedback if needed.

I'd say either the clip-path issue should be fixed (and the styling improved) or the tooltip should be removed entirely.

Noticed during the work done for the new media widgets developed on GitHub. More details and screenshots on the GitHub issue ​https://github.com/xwp/wp-core-media-widgets/issues/140 and related PR.

Milestoning for 4.8 because it's a bug and affects one of the new features landing in this release.

[afercia]

A couple screenshots of what happens on the frontend, with Twenty Seventeen:

To clarify, this is a mediaelement.js feature but revealing the text in a tooltip that appears on focus, it's something added by WordPress. Testing the demo on mediaelementjs.com, the hint text stays visually hidden:

[afercia]

See https://core.trac.wordpress.org/ticket/30281#comment:16

Seems the css class for the offscreen text came in with a mediaelement.js update and it was causing issues. The fix was to make the hidden text visible on focus, merged in [30907]. Worth noting I don't think this was the original intent for the hidden text. Also, this text is now inside an element with role=slider and modern assistive technologies know how to interact with sliders.

However, the styling and positioning implemented in [30907] was meant to be this:

(actually, this is the tooltip on the duration slider and seems isn't there any longer, theres's another one on the volume slider, and one more on the video volume vertical slider).

Quickly discussed with the design team and the accessibility team. Seems this text is not meant to be revealed. My only guess it's there for historical reasons and today, it just acts as a fallback for old assistive technologies that don't support ARIA sliders. I'd be in favor of making it just visually hidden text, as revealing it on focus has proven to be very fragile and doesn't add a great value for accessibility.

[afercia]

Worth noting mediaelement.js uses an aria-label="Volume Slider" so any text inside of the volume slider gets overriden and the hidden text is not available to screen readers. This confirms it's still there as a fallback for (very) old assistive technologies that don't support aria-label and role=slider.

[afercia]

40707.diff​ basically reverts [30907] to keep the offscreen text always visually hidden.

[afercia]

In 40642:

Media: Remove the custom styling for the MediaElementJS controls offscreen text.

This offscreen text is not meant to be revealed on focus and just acts as fallback
for assistive technologies that don't support aria-label and role="slider".
Also, revealing it on focus has proven over time to be very fragile and to cause
unexpected layout issues.

See #30281.
Fixes #40707.

[afercia]

In 40647:

Media: Clean-up some MediaElementJS CSS: no more needed after [40642].

See #40707, #32417, #39994, #39995, #30281.