WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 31 hours ago

#47612 accepted defect (bug)

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 commit
Focuses: accessibility, javascript Cc:

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 (5)

myplugin-media.zip (4.0 KB) - added by audrasjb 2 weeks 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 2 weeks ago.
Empty title rendering by testing plugin
metabox-with-default-title.png (211.5 KB) - added by audrasjb 2 weeks ago.
Small patch (detailed below)
47612.diff (594 bytes) - added by donmhico 11 days ago.
47612.2.diff (1.1 KB) - added by audrasjb 2 days ago.
Change 'Add media' i18n string to 'Media'

Download all attachments as: .zip

Change History (14)

#1 @audrasjb
2 weeks ago

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

@audrasjb
2 weeks ago

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

@audrasjb
2 weeks ago

Empty title rendering by testing plugin

@audrasjb
2 weeks ago

Small patch (detailed below)

#2 @audrasjb
2 weeks 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
11 days ago

#3 @donmhico
11 days 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
11 days ago

  • Keywords has-patch added; reporter-feedback removed

Thanks @donmhico, the patch looks nice.

#5 @donmhico
11 days ago

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

#6 @audrasjb
9 days ago

  • Keywords commit added

#7 @afercia
2 days 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
2 days ago

Change 'Add media' i18n string to 'Media'

#8 @donmhico
2 days ago

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

#9 @audrasjb
31 hours ago

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