From 28714c42bd398e44436e15d9b8f282399a889a4f Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Fri, 15 Mar 2019 14:53:18 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@44905 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/about.php       | 4 ++--
 src/wp-admin/credits.php     | 6 +++---
 src/wp-admin/css/about.css   | 4 +++-
 src/wp-admin/freedoms.php    | 4 ++--
 src/wp-admin/includes/ms.php | 4 ++--
 src/wp-admin/nav-menus.php   | 4 ++--
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index e8231ac826..68de892a54 100644
--- a/src/wp-admin/about.php
+++ b/src/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>
 
diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php
index 92073d9776..e9bd916fa8 100644
--- a/src/wp-admin/credits.php
+++ b/src/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'] ) ) {
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 35d8a4691d..07ebffd90f 100644
--- a/src/wp-admin/css/about.css
+++ b/src/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 {
diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php
index 6fe3e690ac..dc81a5baf2 100644
--- a/src/wp-admin/freedoms.php
+++ b/src/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 ) : ?>
 
diff --git a/src/wp-admin/includes/ms.php b/src/wp-admin/includes/ms.php
index 9187d0d689..4cae500402 100644
--- a/src/wp-admin/includes/ms.php
+++ b/src/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>';
 }
 
 /**
diff --git a/src/wp-admin/nav-menus.php b/src/wp-admin/nav-menus.php
index 4051791949..5d336398ff 100644
--- a/src/wp-admin/nav-menus.php
+++ b/src/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";