Twenty Fifteen: valid HTML for accessible child page menu expanding and collapsing -- now with even better accessiblity.
Props afercia, davidakennedy, iamtakashi, fixes #30083. Built from https://develop.svn.wordpress.org/trunk@30013 git-svn-id: http://core.svn.wordpress.org/trunk@30013 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
ea264c07b2
commit
3ec1c95062
|
@ -132,10 +132,6 @@ textarea {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
margin-top: -21px;
|
||||
}
|
||||
|
||||
.social-navigation {
|
||||
margin: 9.0909%;
|
||||
max-width: 660px;
|
||||
|
|
|
@ -219,8 +219,8 @@ function twentyfifteen_scripts() {
|
|||
|
||||
wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141010', true );
|
||||
wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
|
||||
'expand' => '<span class="screen-reader-text">' . esc_html__( 'Expand', 'twentyfifteen' ) . '</span>',
|
||||
'collapse' => '<span class="screen-reader-text">' . esc_html__( 'Collapse', 'twentyfifteen' ) . '</span>',
|
||||
'expand' => '<span class="screen-reader-text">' . esc_html__( 'expand child menu', 'twentyfifteen' ) . '</span>',
|
||||
'collapse' => '<span class="screen-reader-text">' . esc_html__( 'collapse child menu', 'twentyfifteen' ) . '</span>',
|
||||
) );
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
|
||||
|
|
|
@ -9,13 +9,13 @@
|
|||
$( 'html' ).removeClass( 'no-js' );
|
||||
|
||||
// Add dropdown toggle that display child menu items.
|
||||
$( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).append( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
|
||||
$( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
|
||||
|
||||
$( '.dropdown-toggle' ).click( function( e ) {
|
||||
var _this = $( this );
|
||||
e.preventDefault();
|
||||
_this.toggleClass( 'toggle-on' );
|
||||
_this.parent().next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
|
||||
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
|
||||
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
|
||||
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
|
||||
} );
|
||||
|
|
|
@ -692,17 +692,12 @@ a:focus {
|
|||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-size: 1.5rem;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
|
||||
top: 3px;
|
||||
right: 0;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
|
@ -2552,9 +2547,7 @@ span > video {
|
|||
}
|
||||
|
||||
.main-navigation ul {
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top: 1px solid rgba(51, 51, 51, 0.1);
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-bottom: 1px solid rgba(51, 51, 51, 0.1);
|
||||
}
|
||||
|
||||
|
@ -5078,6 +5071,7 @@ span > video {
|
|||
|
||||
.dropdown-toggle {
|
||||
height: 32px;
|
||||
top: 4px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.1-alpha-30012';
|
||||
$wp_version = '4.1-alpha-30013';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
Loading…
Reference in New Issue