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;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-toggle {
|
|
||||||
margin-top: -21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-navigation {
|
.social-navigation {
|
||||||
margin: 9.0909%;
|
margin: 9.0909%;
|
||||||
max-width: 660px;
|
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_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141010', true );
|
||||||
wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
|
wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
|
||||||
'expand' => '<span class="screen-reader-text">' . esc_html__( 'Expand', 'twentyfifteen' ) . '</span>',
|
'expand' => '<span class="screen-reader-text">' . esc_html__( 'expand child menu', 'twentyfifteen' ) . '</span>',
|
||||||
'collapse' => '<span class="screen-reader-text">' . esc_html__( 'Collapse', 'twentyfifteen' ) . '</span>',
|
'collapse' => '<span class="screen-reader-text">' . esc_html__( 'collapse child menu', 'twentyfifteen' ) . '</span>',
|
||||||
) );
|
) );
|
||||||
}
|
}
|
||||||
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
|
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
|
||||||
|
|
|
@ -9,13 +9,13 @@
|
||||||
$( 'html' ).removeClass( 'no-js' );
|
$( 'html' ).removeClass( 'no-js' );
|
||||||
|
|
||||||
// Add dropdown toggle that display child menu items.
|
// 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 ) {
|
$( '.dropdown-toggle' ).click( function( e ) {
|
||||||
var _this = $( this );
|
var _this = $( this );
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
_this.toggleClass( 'toggle-on' );
|
_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.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
|
||||||
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
|
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
|
||||||
} );
|
} );
|
||||||
|
|
|
@ -692,17 +692,12 @@ a:focus {
|
||||||
-moz-box-sizing: content-box;
|
-moz-box-sizing: content-box;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
|
||||||
font-size: 15px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
height: 42px;
|
height: 42px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
|
||||||
|
top: 3px;
|
||||||
right: 0;
|
right: 0;
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
-ms-transform: translateY(-50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 42px;
|
width: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2552,9 +2547,7 @@ span > video {
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-navigation ul {
|
.main-navigation ul {
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
border-top: 1px solid rgba(51, 51, 51, 0.1);
|
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);
|
border-bottom: 1px solid rgba(51, 51, 51, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5078,6 +5071,7 @@ span > video {
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
top: 4px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @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.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
Loading…
Reference in New Issue