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

src/wp-includes/class-wp-admin-bar.php

@@ -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'] : '';
+		// Allow only numeric values, then casted to integers, and allow a tabindex value of `0` for a11y.
-		$aria_attributes = $tabindex ? 'tabindex="' . $tabindex . '"' : '';
+		$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;

src/wp-includes/css/admin-bar.css

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

tests/phpunit/tests/adminbar.php

@@ -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">',
+			),
+		);
+	}
 }