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
This commit is contained in:
Andrea Fercia 2019-03-15 14:54:52 +00:00
parent 69c3e1facb
commit 8f69ebf812
10 changed files with 20 additions and 16 deletions

View File

@ -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>

View File

@ -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'] ) ) {

View File

@ -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 {

File diff suppressed because one or more lines are too long

View File

@ -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 {

File diff suppressed because one or more lines are too long

View File

@ -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 ) : ?>

View File

@ -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>';
}
/**

View File

@ -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";

View File

@ -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.