sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Twenty Fifteen: valid HTML for accessible child page menu expanding and collapsing -- now with even better accessiblity. 

Props afercia, davidakennedy, iamtakashi, fixes #30083.



git-svn-id: https://develop.svn.wordpress.org/trunk@30013 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ian Stewart 2014-10-24 15:14:02 +00:00
parent 81639b9dd7
commit 805f230e99
4 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/wp-content/themes/twentyfifteen/css/ie.css
View File

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

4
src/wp-content/themes/twentyfifteen/functions.php
View File

@ -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' );

4
src/wp-content/themes/twentyfifteen/js/functions.js
View File

@ -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 );
} ); } );

12
src/wp-content/themes/twentyfifteen/style.css
View File

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