Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#40707 closed defect (bug) (fixed)

Fix or consider to remove the mejs volume slider tooltip

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots
Focuses: ui, accessibility Cc:

Description

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

https://cldup.com/56pyL-HtE6.png

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.

Attachments (1)

40707.diff (877 bytes) - added by afercia 6 years ago.

Download all attachments as: .zip

Change History (11)

This ticket was mentioned in Slack in #design by afercia. View the logs.


6 years ago

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


6 years ago

This ticket was mentioned in Slack in #design by afercia. View the logs.


6 years ago

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


6 years ago

#5 @afercia
6 years ago

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

https://cldup.com/ORBMlHXF2J.png

https://cldup.com/tuTuymvDRt.png

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:

https://cldup.com/7qLHHPcEGw.png

#6 @afercia
6 years ago

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:

https://cldup.com/5CmRVG6RzV.png

(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.

#7 @afercia
6 years ago

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
6 years ago

#8 @afercia
6 years ago

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

#9 @afercia
6 years ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

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.

#10 @afercia
6 years ago

In 40647:

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

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

Note: See TracTickets for help on using tickets.