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

[afercia]

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.

[audrasjb]

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

[audrasjb]

Empty title rendering by testing plugin

[audrasjb]

Small patch (detailed below)

[audrasjb]

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]

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

[audrasjb]

Thanks @donmhico, the patch looks nice.

[donmhico]

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

[afercia]

@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]

Change 'Add media' i18n string to 'Media'

[donmhico]

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

[afercia]

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

[afercia]

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.