Allow data attributes to be added to WP Admin Bar menu items

[keraweb]

It is currently not possible to add your own parameters to WP Admin Bar.
For improved flexibility with javascript I think this could be a good feature.

Example:

<?php
$wp_admin_bar->add_node(
        'id'     => '',
        'parent' => '',
        'title'  => '',
        'href'   => '',
        'meta'   => array(
                'title' => '',
                'data'  => array(
                        'test' => 'data-test content'
                )
        ),
) );

Example code for class-wp-admin-bar.php (L 497 - 533)

<?php
if ( ! empty( $node->meta['data'] ) && ! is_array( $node->meta['data'] ) ) {
        $node->meta['data'] = array( 'data' => (string) $node->meta['data'] );
}
?>

<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
                        if ( ! empty( $node->meta['onclick'] ) ) :
                                ?> onclick="<?php echo esc_js( $node->meta['onclick'] ); ?>"<?php
                        endif;
                if ( ! empty( $node->meta['target'] ) ) :
                        ?> target="<?php echo esc_attr( $node->meta['target'] ); ?>"<?php
                endif;
                if ( ! empty( $node->meta['title'] ) ) :
                        ?> title="<?php echo esc_attr( $node->meta['title'] ); ?>"<?php
                endif;
                if ( ! empty( $node->meta['rel'] ) ) :
                        ?> rel="<?php echo esc_attr( $node->meta['rel'] ); ?>"<?php
                endif;
                if ( ! empty( $node->meta['lang'] ) ) :
                        ?> lang="<?php echo esc_attr( $node->meta['lang'] ); ?>"<?php
                endif;
                if ( ! empty( $node->meta['dir'] ) ) :
                        ?> dir="<?php echo esc_attr( $node->meta['dir'] ); ?>"<?php
                endif;
                if ( ! empty( $node->meta['data'] ) ) :
                        foreach ( $node->meta['data'] as $attr => $data ) :
                        ?> data-<?php echo $attr; ?>="<?php echo esc_attr( $data ); ?>"<?php
                        endforeach;
                endif;
                ?>><?php
        else:
                ?><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;
                if ( ! empty( $node->meta['lang'] ) ) :
                        ?> lang="<?php echo esc_attr( $node->meta['lang'] ); ?>"<?php
                endif;
                if ( ! empty( $node->meta['dir'] ) ) :
                        ?> dir="<?php echo esc_attr( $node->meta['dir'] ); ?>"<?php
                endif;
                if ( ! empty( $node->meta['data'] ) ) :
                        foreach ( $node->meta['data'] as $attr => $data ) :
                                ?> data-<?php echo $attr; ?>="<?php echo esc_attr( $data ); ?>"<?php
                        endforeach;
                endif;
                ?>><?php
        endif;

[keraweb]

Allow passing data parameters to WP Admin Bar

[afercia]

Makes sense to me, worth considering in the next release cycle. Changing a bit the summary to clarify it's about data attributes (yes they're used to pass parameters :) just sounds a bit more clear to me).

[pbiron]

I really like this idea, but think a more general solution that would arbitrary HTML attributes would be even better (thus loosening the paternalistic nature of the current code), ala

$wp_admin_bar->add_node(
	'id'     => '',
	'parent' => '',
	'title'  => '',
	'href'   => 'https://nl.wikipedia.org/wiki/Nederland',
	'meta'   => array(
		'type' => 'text/html',
		'hreflang' => 'nl',
		'data-test' => 'data-test content'
		'onmousedown' => 'some_js_func()',
		'aria-describedby' => 'some_html_id',
                ),
        ),
) );

Related: #40359, #40666

[pbiron]

the inline docs for WP_Admin_Bar::add_node() need some work

[keraweb]

@pbiron
Nice! That sounds even better!

[afercia]

Discussed a bit this ticket during today's accessibility bug-scrub. Apart from aria-current that should be handled by core, any valid use cases for other aria-* attributes?

[pbiron]

screenshot of some nodes VAA adds to the admin_bar

[pbiron]

I personally have never had any uses; but the nodes I've added to the admin bar have always been VERY simple.

The ​View Admin As plugin (written by the OP) arguably has a good use case for @aria-describedby.

For example, the following is a simplification of the code used in VAA to generate the node circled in red in the above image:

<?php
$admin_bar->add_node( array(
        'id' => 'vaa-modules-role-defaults-enable',
        'parent' => $parent,
        'title' => "<label><input name='vaa_modules_role_defaults_enable' type='checkbox' />Enable role defaults</label>" .
                "<p class='ab-item description'>Set default screen settings for roles and apply them on users through various bulk and automatic actions</p>",
) );

The above might be cleaner if it were written as follows (this is just my opinion, I haven't discussed this with the OP and don't know whether he'd agree nor whether he'd rewrite VAA to use @aria-describedby if that capability were available):

<?php
$admin_bar->add_node( array(
        'id' => 'vaa-modules-role-defaults-enable',
        'parent' => $parent,
        'title' => "<label><input name='vaa_modules_role_defaults_enable' type='checkbox' />Enable role defaults</label>",
        'meta' => array( 'aria-describedby' => 'wp-admin-bar-vaa-modules-role-defaults-enable-description' ),
) );
$admin_bar->add_node( array(
        'id' => 'vaa-modules-role-defaults-enable-description',
        'parent' => $parent,
        'title' => 'Set default screen settings for roles and apply them on users through various bulk and automatic actions',
) );

[sabernhardt]

refresh, allowing almost any attributes, adding aria-current

[sabernhardt]

adding aria-current plus support for hreflang and aria-describedby

[sabernhardt]

Attached are two options for consideration and/or iteration, both incorporating aria-current:

• 38636.2.patch​ follows the previous patch by allowing any attributes except for the ones established by core. This does nothing to ensure valid attributes, though the _render_item function does not validate/sanitize the 'html' meta value currently either.
• 38636.selective.patch​ would continue restricting attributes to avoid invalid code. In addition to aria-describedby, I like hreflang, so both are included in an $allowed array.