Accessibility: Bundled Theme: Make the TwentyEleven skip link the first focusable element within the body.

Props poena, williampatton.
Fixes #47891.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46007 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2019-09-20 11:42:00 +00:00
parent a014bd21c1
commit c4b1daa1f2
5 changed files with 40 additions and 26 deletions

View File

@ -912,3 +912,16 @@ if ( ! function_exists( 'wp_body_open' ) ) :
do_action( 'wp_body_open' ); do_action( 'wp_body_open' );
} }
endif; endif;
/**
* Include a skip to content link at the top of the page so that users can bypass the menu.
*
* @since Twenty Eleven 3.4
*/
function twentyeleven_skip_link() {
echo '<div class="skip-link"><a class="assistive-text" href="#content">' . esc_html__( 'Skip to primary content', 'twentyeleven' ) . '</a></div>';
if ( ! is_singular() ) {
echo '<div class="skip-link"><a class="assistive-text" href="#secondary">' . esc_html__( 'Skip to secondary content', 'twentyeleven' ) . '</a></div>';
}
}
add_action( 'wp_body_open', 'twentyeleven_skip_link', 5 );

View File

@ -145,11 +145,6 @@ if ( is_singular() && get_option( 'thread_comments' ) ) {
<nav id="access" role="navigation"> <nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3> <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
<?php if ( ! is_singular() ) : ?>
<div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
<?php endif; ?>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?> <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access --> </nav><!-- #access -->

View File

@ -108,9 +108,9 @@ input#s {
} }
/* Assistive text */ /* Assistive text */
#access a.assistive-text:focus { a.assistive-text:focus {
left: auto; left: auto;
right: 7.6%; right: 6px;
} }
/* =Header /* =Header

View File

@ -502,24 +502,30 @@ a:hover {
height: 1px; height: 1px;
width: 1px; width: 1px;
} }
#access a.assistive-text:focus,
a.assistive-text:focus,
.screen-reader-text:hover, .screen-reader-text:hover,
.screen-reader-text:active, .screen-reader-text:active,
.screen-reader-text:focus { .screen-reader-text:focus {
background: #eee; background-color: #f1f1f1;
border-bottom: 1px solid #ddd; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
color: #1982d1;
clip: auto !important; clip: auto !important;
font-size: 12px; clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto; height: auto;
position: absolute; left: 6px;
text-decoration: underline; line-height: normal;
top: 0; padding: 17px 22px 15px;
left: 7.6%; text-decoration: none;
top: 7px;
width: auto; width: auto;
z-index: 100000;
/* Above WP toolbar. */
} }
/* =Header /* =Header
----------------------------------------------- */ ----------------------------------------------- */

View File

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