#a11y-headings - WordPress Updates headings fixes

[Cheffheid]

A number of H3 headings on this page need to be bumped up to H2s:

• "An updated version of WordPress is available"
• "You have the latest version of WordPress. Future security updates will be applied automatically."
• "Plugins"
• "Themes"
• "Translations"

Also need to ensure that any design (fontsize, colour, etc) is properly maintained when swapping the headings.

#a11y-headings

[Cheffheid]

Bumps headings up to h2 and fixes styles - these CSS changes should help with maintaining the look on other h3 to h2 changes.

[Cheffheid]

A patch with just the CSS, since it will apply for more heading tickets.

[SergeyBiryukov]

In 33817:

Bump H3 headings to H2 on WordPress Updates screen for better accessibility.

props Cheffheid.
fixes #33559.

[afercia]

We should still keep the styling for the H2 headings that were removed in [33817] to account for plugins that still use H2 as main headings in their screens. We should probably pair the styling with the current .wrap h1 maybe making it more specific for example .wrap > h2.
Without this, many plugins screens will look like this:

while the correct styling should look like this:

[afercia]

The new patch tries to pair the main h1 heading style with .wrap > h2 to take into account plugins that still use a h2 heading in their screens.

[afercia]

Hm as @Cheffheid pointed out this won't work in some edge cases, for example update-core.php and user-new.php on multisite. Maybe we should use .wrap + h2 instead. Maybe better :first-child :) Investigating.

[afercia]

Discussed a bit this with @Cheffheid on Slack and we have a couple of options:

1. Use JavaScript, see what's already in common.js:

// Back compatibility: if there is no H1, apply to first H2.
if ( ! $firstHeading.length ) {
	$firstHeading = $( '.wrap h2:first' );
}

and just add a CSS class to style the first H2. The advantage of this solution is that it will cover all the possible cases of h2 as main heading when there's no h1. We'd prefer a CSS solution though.

2. Use just CSS and provide a reasonable back compatibility for plugins that still use a H2. We won't be able to cover all the edge cases but maybe we shouldn't try to do that. Sooner or later plugins should update their main heading and use a H1.

We'd propose to style the old H2s only if they're the :first-child of the .wrap container. Any thoughts and suggestions more than welcome.

A couple of edge case examples:

Plugins that use some old code before the main heading:

Notices that are displayed before the main heading and then moved below with JavaScript: for a few milliseconds the main h2 will be styled as h2 and then as h1 after the notice gets moved down:

[afercia]

cc @helen :)

[SergeyBiryukov]

Replying to afercia:

We'd propose to style the old H2s only if they're the :first-child of the .wrap container. Any thoughts and suggestions more than welcome.

I'm fine with not trying to account for all the edge cases.

Let's also add a comment that these styles are for backwards compatibility only.

[afercia]

Refreshed patch introduces .wrap > h2:first-child for back compatibility with plugins that still use a h2 as main heading in their screens. As agreed, this won't cover all the edge cases.
Adjusted also the h2.nav-tab-wrapper and the tagcloud h2 headings. I think after [33355] there's no h1.nav-tab-wrapper in the admin, keeping it just for back compatibility with plugins.
Testing and feedback more than welcome.

[SergeyBiryukov]

In 35130:

Accessibility: Correct the style for Popular Tags header on Edit Tags screen after [33917].

Props afercia.
See #33559. See #33658.

[SergeyBiryukov]

In 35131:

Accessibility: Add back-compat styles for plugins that still use h2 as a main heading in their screens.

Props afercia.
Fixes #33559.

[afercia]

Replying to afercia:

Adjusted also the h2.nav-tab-wrapper

Noticed some plugins provide the "navigation tab" as first H2 heading in their screens so maybe we should tweak a bit the CSS, just to override .wrap > h2:first-child

[SergeyBiryukov]

In 35496:

Accessibility: After [35130], adjust the h2.nav-tab-wrapper selector to only override .wrap > h2:first-child.

This improves compatibility with plugins that use navigation tabs as a first H2 heading on their screens.

Props afercia.
Fixes #33559.

[ramiy]

Related: #37257