Make WordPress Core

Opened 7 years ago

Last modified 3 years ago

#38636 new enhancement

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

Reported by: keraweb's profile keraweb Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch
Focuses: accessibility Cc:

Description

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;

Attachments (5)

38636.patch (1.4 KB) - added by keraweb 7 years ago.
Allow passing data parameters to WP Admin Bar
38636.1.patch (4.0 KB) - added by pbiron 7 years ago.
the inline docs for WP_Admin_Bar::add_node() need some work
vaa.png (28.8 KB) - added by pbiron 6 years ago.
screenshot of some nodes VAA adds to the admin_bar
38636.2.patch (2.9 KB) - added by sabernhardt 3 years ago.
refresh, allowing almost any attributes, adding aria-current
38636.selective.patch (2.8 KB) - added by sabernhardt 3 years ago.
adding aria-current plus support for hreflang and aria-describedby

Download all attachments as: .zip

Change History (15)

@keraweb
7 years ago

Allow passing data parameters to WP Admin Bar

#1 @keraweb
7 years ago

  • Keywords has-patch dev-feedback added

#2 @afercia
7 years ago

  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Allow passing data parameters to WP Admin Bar to Allow data attributes to be added to WP Admin Bar menu items
  • Version trunk deleted

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).

#3 @pbiron
7 years ago

  • Focuses accessibility added

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
7 years ago

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

#4 @keraweb
7 years ago

@pbiron
Nice! That sounds even better!

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 years ago

#7 @afercia
6 years ago

  • Keywords reporter-feedback added; dev-feedback removed

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
6 years ago

screenshot of some nodes VAA adds to the admin_bar

#8 @pbiron
6 years ago

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.

screenshot of some nodes VAA adds to the admin_bar

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',
) );
Last edited 6 years ago by pbiron (previous) (diff)

@sabernhardt
3 years ago

refresh, allowing almost any attributes, adding aria-current

@sabernhardt
3 years ago

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

#9 @sabernhardt
3 years ago

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.

#10 @sabernhardt
3 years ago

  • Keywords reporter-feedback removed
Note: See TracTickets for help on using tickets.