WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 4 months ago

Last modified 4 months ago

#47612 closed defect (bug) (fixed)

Media modal: implement a default title for the modal H1 heading

Reported by: afercia Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch
Focuses: accessibility, javascript Cc:
PR Number:

Description

Splitting this out from #47145.

Now that #47145 proposes to make the Media modal a real ARIA modal dialog, it's important that the modal always has a H1 heading. This heading needs to be referenced by the aria-labelledby attribute set on the dialog container.

Currently, all the core Media modals provide a meaningful text for their H1. However, when a title is not passed to the media frame, the modal H1 is just an empty heading. An empty <h1> isn't ideal and should be avoided.

Plugins and theme authors that use wp.media() to add a media modal may miss to pass a title. As the title is of great importance to give the dialog its required accessible name, there should be a simple fallback to a default title.

Attachments (6)

myplugin-media.zip (4.0 KB) - added by audrasjb 4 months ago.
Testing plugin to create a Add media metabox without default title on edit post screen
metabox-without-default-title.png (217.8 KB) - added by audrasjb 4 months ago.
Empty title rendering by testing plugin
metabox-with-default-title.png (211.5 KB) - added by audrasjb 4 months ago.
Small patch (detailed below)
47612.diff (594 bytes) - added by donmhico 4 months ago.
47612.2.diff (1.1 KB) - added by audrasjb 4 months ago.
Change 'Add media' i18n string to 'Media'
47612.3.diff (998 bytes) - added by afercia 4 months ago.

Download all attachments as: .zip

Change History (18)

#1 @audrasjb
4 months ago

  • Keywords needs-patch added
  • Owner set to audrasjb
  • Status changed from new to accepted

@audrasjb
4 months ago

Testing plugin to create a Add media metabox without default title on edit post screen

@audrasjb
4 months ago

Empty title rendering by testing plugin

@audrasjb
4 months ago

Small patch (detailed below)

#2 @audrasjb
4 months ago

  • Keywords reporter-feedback has-screenshots added

Hi there,

I was able to reproduce the issue with the testing plugin (available as an attachement of that ticket). This plugin creates a media metabox without any title for the media modal.

I found how to add a default h1 title on a built version of WordPress but I wasn't able to reproduce it on WordPress Dev/Trunk. Any help would be awesome :)

Here is my workaround to fix the issue on a classic WordPress installation:

  • Install the provided testing plugin to add a media metabox in your posts.
  • Reproduce the issue: when you open the metabox media modal, there is an empty h1 tag in the modal.
  • In wp-includes/js/media-views.js:

Line 2932, replace:

	/**
	 * @constructs
	 */
	initialize: function() {
		Frame.prototype.initialize.apply( this, arguments );

		_.defaults( this.options, {
			title:    '',
			modal:    true,
			uploader: true
		});

		// Ensure core UI is enabled.
		this.$el.addClass('wp-core-ui');

with

	/**
	 * @constructs
	 */
	initialize: function() {
		Frame.prototype.initialize.apply( this, arguments );

		var media = wp.media,
			l10n;
		
		l10n = media.view.l10n = window._wpMediaViewsL10n || {};

		_.defaults( this.options, {
			title:    l10n.addMedia,
			modal:    true,
			uploader: true
		});

		// Ensure core UI is enabled.
		this.$el.addClass('wp-core-ui');
  • Save media-views.js as media-views.js to replace the existing minified file.
  • The default title is now displayed in the medial modal, as in the second screenshot above.

Now, we need to reproduce that fix in Trunk 😛

@donmhico
4 months ago

#3 @donmhico
4 months ago

  • Keywords needs-patch removed

I was able to reproduce the bug reported by @afercia and confirmed that @audrasjb 's fix above works. I attached the patch - 47612.diff.

#4 @audrasjb
4 months ago

  • Keywords has-patch added; reporter-feedback removed

Thanks @donmhico, the patch looks nice.

#5 @donmhico
4 months ago

@audrasjb - No credit taken. It's all on you man I just made the patch based on your code :)

#6 @audrasjb
4 months ago

  • Keywords commit added

#7 @afercia
4 months ago

  • Keywords commit removed

@audrasjb @donmhico thanks! 47612.diff looks good.

I'd only consider to use a more generic title. Custom media frames could be used for anything, not necessarily to "Add Media". That's just one specific workflow amongst all the possible ones. Maybe just a simpler string Media? The new string should be added to the l10n object.

@audrasjb
4 months ago

Change 'Add media' i18n string to 'Media'

#8 @donmhico
4 months ago

Thanks for the feedback @afercia. @audrasjb's latest patch addressed the change requested.

#9 @audrasjb
4 months ago

  • Keywords commit added

@afercia
4 months ago

#10 @afercia
4 months ago

47612.3.diff:

  • sets the l10n object in a way that's consistent with what other media files do
  • let's not change the existing l10n.addMedia string, as it might be used by plugins

#11 @afercia
4 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 45925:

Accessibility: Add a default title for the media modal dialog.

Makes sure the media modal dialog h1 heading isn't empty when custom media frames don't set a title. This is particularly important now that the media modal is an ARIA dialog, as the title is referenced by an aria-labelledby attribute to properly label the dialog.

Props donmhico, audrasjb.
Fixes #47612.

#12 @afercia
4 months ago

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