#a11y-headings - Post Meta Boxes H3 to H2

[Cheffheid]

The post meta boxes are currently H3s and they need to be upgraded to H2s to ensure a proper heading structure.

We'll also need to make sure that we don't break the styling in the process and make sure to update any of the existing CSS from h3 to h2. As well as add CSS to maintain the current look if necessary.

#a11y-headings

[afercia]

In /wp-admin/css/edit.css I can see:

#poststuff h2 {
	margin-top: 20px;
	font-size: 1.5em;
	margin-bottom: 15px;
	padding: 0 0 3px;
	clear: left;
}

#poststuff h3 {
	font-size: 14px;
	padding: 8px 12px;
	margin: 0;
	line-height: 1.4;
}

not 100% sure but looks like there are no #poststuff h2 in core anymore. It was used in Press This old versions but couldn't find any other use. Thoughts? cc @SergeyBiryukov :) First introduced here https://core.trac.wordpress.org/changeset/6578

[joedolson]

Probably should scan for usages in plug-ins; don't want to break a ton of plug-ins by removing it.

[SergeyBiryukov]

Replying to afercia:

not 100% sure but looks like there are no #poststuff h2 in core anymore.

Looks like it was meant for the ​Advanced Options header in 2.5.

The header was removed in 2.7: [8691/trunk/wp-admin/edit-form-advanced.php].

[joedolson]

Change post meta box to h2

[joedolson]

Added patch changing to H2 and removing #poststuff h2 CSS. Based on the slack conversations and references, it seems very unlikely this CSS is needed anymore; even if a plug-in is using it, it would have to be because they haven't updated their CSS in years...

[afercia]

Yup, removing the rule and merging #poststuff h2 in the current #poststuff h3 seems to most logical thing to do to me. Thanks Joe!

[joedolson]

Updating patch - forgot to address responsive view.

[joedolson]

Also address responsive styles

[afercia]

Refreshed patch, rebuilt from the SVN root. Also to address .metabox-holder h3 and change it in .metabox-holder h2.

[afercia]

Last change affected headings in the Appearance > Menus screen, refreshed patch to address them till we make a decision about #33603.

[afercia]

#33650 was marked as a duplicate.

[joedolson]

I think that metabox-holder h2 and metabox-holder h3 need to have matched styles; we can't just replace, because a lot of plug-ins make use of the metabox-holder classes to create their settings page layouts.

Alternate patch attached.

[joedolson]

Preserves existing metabox-holder h3 styles

[afercia]

Refreshed patch to update the dashboard outdated/insecure browser nag heading styling. See screenshots below:

[afercia]

• Refreshed patch after [34241]
• We should also take care of a couple headings used inside the meta boxes (see meta-boxes.php). Changed them in plain links, didn't see any reason why they should be headings
• The current CSS selector for + Add New Category is tied to categories, doesn't take into account custom taxonomies. Changed to a more generic selector. It should be changed in a button later (see #26504).

[joedolson]

Took a look at this, and the new patch seems good. I agree that Add New Category should become a button, and that this should happen later.

Didn't see any problems with any of the example plugin meta boxes I looked at.

[wonderboymusic]

I would add CSS rules, not replace - for general BC. Refreshed the patch to eliminate some fuzz wth recent churn.

[afercia]

Refreshed patch. I'm not sure we should have some back compat for the old h3 but if we want to do that we should select just the first one, i.e. the meta box "title". There might be some redundancy, but even before the patch #poststuff h3 and .metabox-holder h3 are basically overlapping.

Side note: as far as I can see the old #poststuff h2 style was introduced in r6578 and probably unused for a few years now. Couldn't find any previous h2 inside #poststuff.

[SergeyBiryukov]

In 35128:

Accessibility: bump headings one level up in post meta boxes for a better headings hierarchy.

Props afercia, joedolson, wonderboymusic.
See #33557.

[SergeyBiryukov]

In 35129:

Acessibility: "Add New Category" links on Edit Post screen should not be a header.

Props afercia.
Fixes #33557.

[afercia]

Testing a few plugins that use a h3 inside the .metabox-holder container, noticed that some of them use a postbox that is always expanded (they don't have the .hndle class) so we should cover also this case for back compatibility. For example, this box "title" would be too big and misaligned:

[afercia]

New small patch to improve back compatibility. The heading in the example above will now look with a proper font size and correctly aligned:

[SergeyBiryukov]

In 35184:

Acessibility: Add back-compat styles for plugins that use h3 inside the .metabox-holder container.

Props afercia.
Fixes #33557.