Networks and Sites: Improve accessibility of network admin pages.

[guzel]

Trac ticket: https://core.trac.wordpress.org/ticket/66205

Summary

Minor accessibility fixes on the network admin screens, as described in the ticket and follow-up review.

Network Setup (network.php)
The "Network Title" and "Network Admin Email" fields have description text that isn't programmatically associated with the inputs. This adds an aria-describedby on each input, pointing at an id on its description paragraph (sitename-desc and email-desc), matching the pattern used elsewhere in wp-admin.

The page's h1 is also followed by h3 section headings in both Network Setup steps. The "Addresses of Sites in your Network", "Server Address", "Network Details", and "Enabling the Network" headings are now h2 so the hierarchy doesn't skip a level.

My Sites (my-sites.php)
The page's h1 is followed by h3 headings, which skips a level. The per-site heading and the conditional "Global Settings" heading are now h2. The ticket asks for the CSS to be adjusted so the font size doesn't change, but h2 and h3 share the same rule in common.css (font-size: 1.3em; margin: 1em 0), so no CSS change is needed. Nothing else in the admin stylesheets targets .my-sites h3.

Testing

Tested locally with the wordpress-develop Docker environment.

Network Setup

1. Add define( 'WP_ALLOW_MULTISITE', true ); to wp-config.php. Don't do this on a production site.
2. Go to Tools > Network Setup.
3. Inspect the "Network Title" and "Network Admin Email" inputs. Each has an aria-describedby that matches the id of its description.
4. Check the heading order in the initial setup step and the configuration step: h1, then h2 section headings, with no skipped levels.
5. Compare the computed styles of an h2 and an h3 in the same container. Font size, margin, weight and colour are identical, so there's no visual change.

My Sites

1. After creating a test network, go to wp-admin/my-sites.php.
2. Check the heading order: h1, then h2 for each site, with no skipped levels.
3. To check the conditional "Global Settings" heading, hook the myblogs_options filter and return some HTML when the context is global. It renders as an h2.
4. Compare the computed styles of an h2 and an h3 in the same container. Font size, margin, weight and colour are identical, so there's no visual change.

phpcs passes on both files. No tests were added, as these are markup-only changes and no existing tests cover these screens.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props mitgiselle, johnjamesjacoby, afercia.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[afercia]

Thank you @guzel. Everything looks good to me.

[JJJ]

I added a follow-up commit for the additional heading-level issue found on the Network Setup page.

The four section headings rendered across the two setup steps—“Addresses of Sites in your Network,” “Server Address,” “Network Details,” and “Enabling the Network”—now use h2 rather than h3. This corrects the hierarchy beneath the page's h1 without changing the visual presentation, because the admin styles apply the same typography and spacing to these h2 and h3 elements.

I also ran the focused PHP coding standards check for src/wp-admin/includes/network.php, which passes.

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 64013
GitHub commit: b24d8fb

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.