WordPress.org
Get WordPress

Make WordPress Core

Changeset 62741


Ignore:
Timestamp:
07/14/2026 06:50:18 PM (3 months ago)
Author:
joedolson
Message:

Administration: Add function for tooltips and toggle tips.

Add functions wp_get_tooltip() and wp_get_toggletip() to support adding these popover interfaces in the core admin. wp_get_tooltip() is used as mechanism to expose accessible names when a control has focus or hover, and wp_get_toggletip() implements a popover disclosure dialog to provide extended help information.

Functions generate accessible markup, written to avoid excess verbosity for screen readers and apply best practices for voice command users as much as possible for icon-only controls.

Add an initial implementation of a toggle tip to explain the 'remember me' option on the login screen.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12212

Props joedolson, oglekler, afercia, davidbaumwald, rajinsharwar, mukesh27, swissspidy, sirlouen, rutviksavsani, wildworks, ayazahmed12, generosus, sergeybiryukov.
Fixes #51006, #55343.

Location:
trunk
Files:
3 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Gruntfile.js

    r62645 r62741  
    586586                                        [ WORKING_DIR + 'wp-includes/js/wp-api.js' ]: [ './src/js/_enqueues/wp/api.js' ],
    587587                                        [ WORKING_DIR + 'wp-includes/js/wp-auth-check.js' ]: [ './src/js/_enqueues/lib/auth-check.js' ],
     588                                        [ WORKING_DIR + 'wp-includes/js/wp-tooltip.js' ]: [ './src/js/_enqueues/wp/wp-tooltip.js' ],
    588589                                        [ WORKING_DIR + 'wp-includes/js/wp-backbone.js' ]: [ './src/js/_enqueues/wp/backbone.js' ],
    589590                                        [ WORKING_DIR + 'wp-includes/js/wp-custom-header.js' ]: [ './src/js/_enqueues/wp/custom-header.js' ],

  • trunk/src/wp-includes/general-template.php

    r62712 r62741  
    368368                return $result;
    369369        }
     370}
     371
     372
     373/**
     374 * Retrieves the markup for an accessible tooltip.
     375 *
     376 * Returns a button with an accessible name popover.
     377 *
     378 * @since 7.1.0
     379 *
     380 * @param string $content Plain-text tooltip content. An empty value returns an empty string.
     381 * @param array  $args {
     382 *     Optional. Arguments for building the tooltip.
     383 *
     384 *     @type string $id          Unique ID for the popover element. Default is a
     385 *                               generated unique ID.
     386 *     @type string $label       Not used for tooltips.
     387 *     @type string $close_label Not used for tooltips.
     388 *     @type string $icon        Dashicons icon class for the toggle button.
     389 *                               Default 'dashicons-editor-help'. Should match the control's
     390 *                               visible label.
     391 *     @type string $class       Additional class(es) for the wrapping element.
     392 *                               Default empty.
     393 * }
     394 * @return string Tooltip HTML markup, or an empty string when no content is provided.
     395 */
     396function wp_get_tooltip( $content, $args = array() ) {
     397        $args['type'] = 'tooltip';
     398        return wp_get_tooltip_helper( $content, $args );
     399}
     400
     401/**
     402 * Retrieves the markup for an accessible tooltip or toggletip.
     403 *
     404 * Returns a button and either a hover/focus triggered tooltip popover or an action
     405 * triggered toggle tip. Enqueue the `wp-tooltip` style and script where it is used.
     406 * Tooltips are used to show the accessible name of a control.
     407 * Toggletips are be used for longer supporting text explaining context.
     408 *
     409 * @since 7.1.0
     410 *
     411 * @param string $content Plain-text tooltip content. An empty value returns an empty string.
     412 * @param array  $args {
     413 *     Optional. Arguments for building the tooltip.
     414 *
     415 *     @type string $id          Unique ID for the popover element. Default is a
     416 *                               generated unique ID.
     417 *     @type string $label       Accessible label for the toggle button.
     418 *                               Default 'Help', matching the default icon.
     419 *                               Ignored for tooltips.
     420 *     @type string $close_label Accessible label for the close button. Default 'Close'.
     421 *     @type string $icon        Dashicons icon class for the toggle button.
     422 *                               Default 'dashicons-editor-help'. Should match the control's
     423 *                               visible label.
     424 *     @type string $class       Additional class(es) for the wrapping element.
     425 *                               Default empty.
     426 * }
     427 * @return string Tooltip HTML markup, or an empty string when no content is provided.
     428 */
     429function wp_get_toggletip( $content, $args ) {
     430        $args['type'] = 'toggletip';
     431        return wp_get_tooltip_helper( $content, $args );
     432}
     433/**
     434 * Retrieves the markup for an accessible tooltip or toggletip.
     435 *
     436 * Returns a button and either a hover/focus triggered tooltip popover or an action
     437 * triggered toggle tip. Enqueue the `wp-tooltip` style and script where it is used.
     438 * Tooltips are used to show the accessible name of a control.
     439 * Toggletips are be used for longer supporting text explaining context.
     440 *
     441 * @since 7.1.0
     442 *
     443 * @param string $content Plain-text tooltip content. An empty value returns an empty string.
     444 * @param array  $args {
     445 *     Optional. Arguments for building the tooltip.
     446 *
     447 *     @type string $id          Unique ID for the popover element. Default is a
     448 *                               generated unique ID.
     449 *     @type string $label       Accessible label for the toggle button.
     450 *                               Default 'Help', matching the default icon.
     451 *                               Ignored for tooltips.
     452 *     @type string $close_label Accessible label for the close button. Default 'Close'.
     453 *     @type string $icon        Dashicons icon class for the toggle button.
     454 *                               Default 'dashicons-editor-help'. Should match the control's
     455 *                               visible label.
     456 *     @type string $class       Additional class(es) for the wrapping element.
     457 *                               Default empty.
     458 *     @type string $type        Type of tooltip: either `tooltip` or `toggletip`.
     459 *                               Default 'tooltip'.
     460 * }
     461 * @return string Tooltip HTML markup, or an empty string when no content is provided.
     462 */
     463function wp_get_tooltip_helper( $content, $args = array() ) {
     464        $content = trim( (string) $content );
     465
     466        if ( '' === $content ) {
     467                return '';
     468        }
     469
     470        $defaults = array(
     471                'id'          => '',
     472                'label'       => __( 'Help' ),
     473                'close_label' => __( 'Close' ),
     474                'icon'        => 'dashicons-editor-help',
     475                'class'       => '',
     476                'type'        => 'tooltip',
     477                'attributes'  => array(),
     478        );
     479
     480        $args = wp_parse_args( $args, $defaults );
     481
     482        $id = '' !== $args['id'] ? $args['id'] : wp_unique_id( 'wp-tooltip-' );
     483
     484        $classes = ( 'tooltip' === $args['type'] ) ? 'wp-tooltip wp-is-tooltip' : 'wp-tooltip wp-is-toggletip';
     485        if ( '' !== $args['class'] ) {
     486                $classes .= ' ' . $args['class'];
     487        }
     488
     489        $icon = '' !== $args['icon'] ? ' ' . $args['icon'] : '';
     490
     491        if ( 'tooltip' === $args['type'] ) {
     492                // Tooltips are only used to visually display labels.
     493                $label  = wp_strip_all_tags( $content, true );
     494                $markup = sprintf(
     495                        '<div class="%1$s">' .
     496                                '<button type="button" class="wp-tooltip__toggle" popovertarget="%2$s" aria-label="%3$s">' .
     497                                        '<span class="dashicons%4$s" aria-hidden="true"></span>' .
     498                                '</button>' .
     499                                '<span popover="hint" id="%2$s" class="wp-tooltip__bubble" role="tooltip">' .
     500                                        '<span id="%2$s-text" class="wp-tooltip__text">%5$s</span>' .
     501                                '</span>' .
     502                        '</div>',
     503                        esc_attr( $classes ),
     504                        esc_attr( $id ),
     505                        esc_attr( $label ),
     506                        esc_attr( $icon ),
     507                        esc_html( $content ),
     508                );
     509        } else {
     510                $markup = sprintf(
     511                        '<div class="%1$s">' .
     512                                '<button type="button" class="wp-tooltip__toggle" popovertarget="%2$s" aria-label="%3$s" aria-haspopup="dialog">' .
     513                                        '<span class="dashicons%4$s" aria-hidden="true"></span>' .
     514                                '</button>' .
     515                                '<dialog popover="auto" id="%2$s" class="wp-tooltip__bubble" autofocus>' .
     516                                        '<span id="%2$s-text" class="wp-tooltip__text">%5$s</span>' .
     517                                        '<button type="button" class="wp-tooltip__close" popovertarget="%2$s" popovertargetaction="hide" aria-label="%6$s">' .
     518                                                '<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>' .
     519                                        '</button>' .
     520                                '</dialog>' .
     521                        '</div>',
     522                        esc_attr( $classes ),
     523                        esc_attr( $id ),
     524                        esc_attr( $args['label'] ),
     525                        esc_attr( $icon ),
     526                        esc_html( $content ),
     527                        esc_attr( $args['close_label'] ),
     528                );
     529        }
     530
     531        return $markup;
    370532}
    371533

  • trunk/src/wp-includes/script-loader.php

    r62723 r62741  
    879879        $scripts->add( 'wp-auth-check', "/wp-includes/js/wp-auth-check$suffix.js", array( 'heartbeat' ), false, 1 );
    880880        $scripts->set_translations( 'wp-auth-check' );
     881
     882        $scripts->add( 'wp-tooltip', '/wp-includes/js/wp-tooltip.js', array(), false, 1 );
    881883
    882884        $scripts->add( 'wp-lists', "/wp-includes/js/wp-lists$suffix.js", array( 'wp-ajax-response', 'jquery-color' ), false, 1 );
    … …  
    16181620
    16191621        // Admin CSS.
     1622        $styles->add( 'wp-tooltip', "/wp-admin/css/wp-tooltip$suffix.css", array( 'dashicons' ) );
    16201623        $styles->add( 'common', "/wp-admin/css/common$suffix.css" );
    16211624        $styles->add( 'forms', "/wp-admin/css/forms$suffix.css" );
    … …  
    16371640        $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n', 'wp-base-styles' ) );
    16381641
    1639         $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
     1642        $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles', 'wp-tooltip' ) );
    16401643        $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
    16411644        $styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" );

  • trunk/src/wp-login.php

    r62735 r62741  
    15091509
    15101510                wp_enqueue_script( 'user-profile' );
     1511                wp_enqueue_script( 'wp-tooltip' );
    15111512                ?>
    15121513
    … …  
    15361537
    15371538                        ?>
    1538                         <p class="forgetmenot"><input name="rememberme" type="checkbox" id="rememberme" value="forever" <?php checked( $rememberme ); ?> /> <label for="rememberme"><?php esc_html_e( 'Remember Me' ); ?></label></p>
     1539                        <?php
     1540                        /**
     1541                         * Filters the help text shown in the "Remember Me" tooltip on the login form.
     1542                         *
     1543                         * Returning an empty string removes the tooltip toggle from the form.
     1544                         *
     1545                         * @since 7.1.0
     1546                         *
     1547                         * @param string $rememberme_help_text The tooltip help text.
     1548                         */
     1549                        $rememberme_help_text = apply_filters(
     1550                                'login_remember_me_help_text',
     1551                                __( 'Selecting "Remember Me" reduces the number of times you&#8217;ll be asked to log in using this device. To keep your account secure, use this option only on your personal devices.' )
     1552                        );
     1553                        ?>
     1554                        <p class="forgetmenot">
     1555                                <input name="rememberme" type="checkbox" id="rememberme" value="forever" <?php checked( $rememberme ); ?> />
     1556                                <label for="rememberme"><?php esc_html_e( 'Remember Me' ); ?></label>
     1557                                <?php
     1558                                echo wp_get_toggletip(
     1559                                        $rememberme_help_text,
     1560                                        array(
     1561                                                'id'    => 'rememberme-help-toggletip',
     1562                                                'label' => __( 'Help' ),
     1563                                        )
     1564                                );
     1565                                ?>
     1566                        </p>
    15391567                        <p class="submit">
    15401568                                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In' ); ?>" />
Note: See TracChangeset for help on using the changeset viewer.