Accessibility: Improve the semantics of "tabs" that are not real ARIA tabs.

Some "visual tabs" in the WordPress admin used links wrapped in a `h2` heading. While these tabs look like ARIA tabs, they're just navigation menus and should be marked-up as such to be correctly exposed to assistive technologies.
- changes the wrapping `<h2>` to a `<nav>` element: worth reminding `<nav>` elements also define ARIA landmarks
- adds an `aria-label` to the `<nav>` elements so they can be distinguished from other `<nav>` elements in the page
- adjusts the headings level in the Credits page

Props audrasjb, afercia.
Fixes #43398.

Built from https://develop.svn.wordpress.org/trunk@44905


git-svn-id: http://core.svn.wordpress.org/trunk@44736 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/about.php

@@ -27,12 +27,12 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 		<div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
 
-		<h2 class="nav-tab-wrapper wp-clearfix">
+		<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 			<a href="about.php" class="nav-tab nav-tab-active"><?php _e( 'What&#8217;s New' ); ?></a>
 			<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
 			<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
 			<a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
-		</h2>
+		</nav>
 
 		<h2 class="feature-section-header"><?php _e( 'A Little Better Every Day' ); ?></h2>
 

wp-admin/credits.php

@@ -24,12 +24,12 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
 
-<h2 class="nav-tab-wrapper wp-clearfix">
+<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 	<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
 	<a href="credits.php" class="nav-tab nav-tab-active"><?php _e( 'Credits' ); ?></a>
 	<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
 	<a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
-</h2>
+</nav>
 
 <div class="about-wrap-content">
 <?php
@@ -72,7 +72,7 @@ foreach ( $credits['groups'] as $group_slug => $group_data ) {
 			$title = translate( $group_data['name'] );
 		}
 
-		echo '<h3 class="wp-people-group">' . esc_html( $title ) . "</h3>\n";
+		echo '<h2 class="wp-people-group">' . esc_html( $title ) . "</h2>\n";
 	}
 
 	if ( ! empty( $group_data['shuffle'] ) ) {

wp-admin/css/about-rtl.css

@@ -401,11 +401,13 @@
 
 /* Credits */
 
-.about-wrap h3.wp-people-group {
+.about-wrap h2.wp-people-group {
 	margin: 2.6em 0 1.33em;
 	padding: 0;
 	font-size: 16px;
 	line-height: inherit;
+	font-weight: 600;
+	text-align: right;
 }
 
 .about-wrap .wp-people-group {

wp-admin/css/about.css

@@ -401,11 +401,13 @@
 
 /* Credits */
 
-.about-wrap h3.wp-people-group {
+.about-wrap h2.wp-people-group {
 	margin: 2.6em 0 1.33em;
 	padding: 0;
 	font-size: 16px;
 	line-height: inherit;
+	font-weight: 600;
+	text-align: left;
 }
 
 .about-wrap .wp-people-group {

wp-admin/freedoms.php

@@ -34,12 +34,12 @@ if ( $is_privacy_notice ) {
 
 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
 
-<h2 class="nav-tab-wrapper wp-clearfix">
+<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 	<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
 	<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
 	<a href="freedoms.php" class="nav-tab<?php echo $freedoms_class; ?>"><?php _e( 'Freedoms' ); ?></a>
 	<a href="freedoms.php?privacy-notice" class="nav-tab<?php echo $privacy_class; ?>"><?php _e( 'Privacy' ); ?></a>
-</h2>
+</nav>
 
 <?php if ( $is_privacy_notice ) : ?>
 

wp-admin/includes/ms.php

@@ -1130,9 +1130,9 @@ function network_edit_site_nav( $args = array() ) {
 	}
 
 	// All done!
-	echo '<h2 class="nav-tab-wrapper wp-clearfix">';
+	echo '<nav class="nav-tab-wrapper wp-clearfix" aria-label="' . esc_attr__( 'Secondary menu' ) . '">';
 	echo implode( '', $screen_links );
-	echo '</h2>';
+	echo '</nav>';
 }
 
 /**

wp-admin/nav-menus.php

@@ -627,7 +627,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 
 	<hr class="wp-header-end">
 
-	<h2 class="nav-tab-wrapper wp-clearfix">
+	<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 		<a href="<?php echo admin_url( 'nav-menus.php' ); ?>" class="nav-tab<?php echo $nav_tab_active_class; ?>"><?php esc_html_e( 'Edit Menus' ); ?></a>
 		<?php
 		if ( $num_locations && $menu_count ) {
@@ -640,7 +640,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 			<?php
 		}
 		?>
-	</h2>
+	</nav>
 	<?php
 	foreach ( $messages as $message ) :
 		echo $message . "\n";

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2-alpha-44904';
+$wp_version = '5.2-alpha-44905';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.