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

Toolbar: Allow 0 as a value for the `tabindex` property of a menu item. 

To enhance accessibility for items without a link you can now define `tabindex="0"`, which makes descendant dropdowns accessible.

Props joedolson, afercia, ocean90.
Fixes #32495.

git-svn-id: https://develop.svn.wordpress.org/trunk@38035 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling 2016-07-12 11:18:00 +00:00
parent f11d5ef4d8
commit e556fec595
3 changed files with 99 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-includes/class-wp-admin-bar.php
View File

@ -477,8 +477,9 @@ class WP_Admin_Bar {
$is_parent = ! empty( $node->children );
$has_link = ! empty( $node->href );
$tabindex = isset( $node->meta['tabindex'] ) ? (int) $node->meta['tabindex'] : '';
$aria_attributes = $tabindex ? 'tabindex="' . $tabindex . '"' : '';
// Allow only numeric values, then casted to integers, and allow a tabindex value of `0` for a11y.
$tabindex = ( isset( $node->meta['tabindex'] ) && is_numeric( $node->meta['tabindex'] ) ) ? (int) $node->meta['tabindex'] : '';
$aria_attributes = ( '' !== $tabindex ) ? ' tabindex="' . $tabindex . '"' : '';
$menuclass = '';
@ -497,7 +498,7 @@ class WP_Admin_Bar {
<li id="<?php echo esc_attr( 'wp-admin-bar-' . $node->id ); ?>"<?php echo $menuclass; ?>><?php
if ( $has_link ):
?><a class="ab-item" <?php echo $aria_attributes; ?> href="<?php echo esc_url( $node->href ) ?>"<?php
?><a class="ab-item"<?php echo $aria_attributes; ?> href="<?php echo esc_url( $node->href ) ?>"<?php
if ( ! empty( $node->meta['onclick'] ) ) :
?> onclick="<?php echo esc_js( $node->meta['onclick'] ); ?>"<?php
endif;
@ -518,7 +519,7 @@ class WP_Admin_Bar {
endif;
?>><?php
else:
?><div class="ab-item ab-empty-item" <?php echo $aria_attributes;
?><div class="ab-item ab-empty-item"<?php echo $aria_attributes;
if ( ! empty( $node->meta['title'] ) ) :
?> title="<?php echo esc_attr( $node->meta['title'] ); ?>"<?php
endif;

2
src/wp-includes/css/admin-bar.css
View File

@ -286,6 +286,8 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:hover,
#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar li:hover .ab-icon:before,

93
tests/phpunit/tests/adminbar.php
View File

@ -132,7 +132,6 @@ class Tests_AdminBar extends WP_UnitTestCase {
$this->assertEquals( $profile_url, $node_my_account->href );
$this->assertEquals( $profile_url, $node_user_info->href );
$this->assertEquals( $profile_url, $node_edit_profile->href );
}
/**
@ -254,4 +253,96 @@ class Tests_AdminBar extends WP_UnitTestCase {
return $wp_admin_bar;
}
/**
* @ticket 32495
*
* @dataProvider data_admin_bar_nodes_with_tabindex_meta
*
* @param array $node_data The data for a node, passed to `WP_Admin_Bar::add_node()`.
* @param string $expected_html The expected HTML when admin menu is rendered.
*/
public function test_admin_bar_with_tabindex_meta( $node_data, $expected_html ) {
$admin_bar = new WP_Admin_Bar();
$admin_bar->add_node( $node_data );
$admin_bar_html = get_echo( array( $admin_bar, 'render' ) );
$this->assertContains( $expected_html, $admin_bar_html );
}
/**
* Data provider for test_admin_bar_with_tabindex_meta().
*
* @return array {
* @type array {
* @type array $node_data The data for a node, passed to `WP_Admin_Bar::add_node()`.
* @type string $expected_html The expected HTML when admin bar is rendered.
* }
* }
*/
public function data_admin_bar_nodes_with_tabindex_meta() {
return array(
array(
// No tabindex.
array(
'id' => 'test-node',
),
'<div class="ab-item ab-empty-item">',
),
array(
// Empty string.
array(
'id' => 'test-node',
'meta' => array( 'tabindex' => '' ),
),
'<div class="ab-item ab-empty-item">',
),
array(
// Integer 1 as string.
array(
'id' => 'test-node',
'meta' => array( 'tabindex' => '1' ),
),
'<div class="ab-item ab-empty-item" tabindex="1">',
),
array(
// Integer -1 as string.
array(
'id' => 'test-node',
'meta' => array( 'tabindex' => '-1' ),
),
'<div class="ab-item ab-empty-item" tabindex="-1">',
),
array(
// Integer 0 as string.
array(
'id' => 'test-node',
'meta' => array( 'tabindex' => '0' ),
),
'<div class="ab-item ab-empty-item" tabindex="0">',
),
array(
// Integer, 0.
array(
'id' => 'test-node',
'meta' => array( 'tabindex' => 0 ),
),
'<div class="ab-item ab-empty-item" tabindex="0">',
),
array(
// Integer, 2.
array(
'id' => 'test-node',
'meta' => array( 'tabindex' => 2 ),
),
'<div class="ab-item ab-empty-item" tabindex="2">',
),
array(
// Boolean, false
array(
'id' => 'test-node',
'meta' => array( 'tabindex' => false ),
),
'<div class="ab-item ab-empty-item">',
),
);
}
}