Changeset 38035

Timestamp:

07/12/2016 11:18:00 AM (8 years ago)

Author:

ocean90

Message:

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.

Location:

trunk

Files:

• src/wp-includes/class-wp-admin-bar.php (modified) (3 diffs)
• src/wp-includes/css/admin-bar.css (modified) (1 diff)
• tests/phpunit/tests/adminbar.php (modified) (2 diffs)

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

@@ -478 +478 @@
         $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 = '';
@@ -498 +499 @@
         <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
@@ -519 +520 @@
                 ?>><?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

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

@@ -287 +287 @@
 #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,

trunk/tests/phpunit/tests/adminbar.php

@@ -133 +133 @@
         $this->assertEquals( $profile_url, $node_user_info->href );
         $this->assertEquals( $profile_url, $node_edit_profile->href );
-
     }
 
@@ -255 +254 @@
     }
 
+    /**
+     * @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">',
+            ),
+        );
+    }
 }