WordPress.org
Get WordPress

Make WordPress Core

Changeset 38075


Ignore:
Timestamp:
07/17/2016 03:31:29 PM (8 years ago)
Author:
ocean90
Message:

Import: Enhance accessibility on the Import screen.

  • Remove title attributes.
  • Show "Install Now" and "Details" links if the importer isn't installed yet.
  • Show a "Run Importer" link if the importer is installed. It also handles activation if the plugin isn't activated.
  • Add aria-label attributes to each link.
  • Unify the importer descriptions to make them independent from the plugin state. The API was changed in ​[meta3690].
  • Adjust JavaScript callbacks for ajaxified importer installs.

Props afercia, swissspidy, ocean90.
See #24766.
Fixes #35191.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r38033 r38075  
    22762276}
    22772277
    2278 .importers td {
    2279     padding-right: 14px;
    2280 }
    2281 
    22822278.importers {
    22832279    font-size: 16px;
    22842280    width: auto;
     2281}
     2282
     2283.importers td {
     2284    padding-right: 14px;
     2285    line-height: 1.5em;
     2286}
     2287
     2288.importers .import-system {
     2289    max-width: 250px;
     2290}
     2291
     2292.importers td.desc {
     2293    max-width: 500px;
     2294}
     2295
     2296.importer-title,
     2297.importer-desc,
     2298.importer-action {
     2299    display: block;
     2300}
     2301
     2302.importer-title {
     2303    color: #000;
     2304    font-size: 14px;
     2305    font-weight: 400;
     2306    margin-bottom: .2em;
     2307}
     2308
     2309.importer-action {
     2310    line-height: 20px; /* Same as with .updating-message */
     2311    color: #ddd;
     2312    margin-bottom: 1em;
     2313}
     2314
     2315.not-installed-main-site .importer-action {
     2316    color: #555;
    22852317}
    22862318

  • trunk/src/wp-admin/import.php

    r37998 r38075  
    3131);
    3232
    33 if ( current_user_can( 'install_plugins' ) )
     33if ( current_user_can( 'install_plugins' ) ) {
     34    // List of popular importer plugins from the WordPress.org API.
    3435    $popular_importers = wp_get_popular_importers();
    35 else
    36     $popular_importers = array();
     36} else {
     37    $popular_importers = array();
     38}
    3739
    3840// Detect and redirect invalid importers like 'movabletype', which is registered as 'mt'
    … …  
    6769
    6870<?php
    69 
     71// Registered (already installed) importers. They're stored in the global $wp_importers.
    7072$importers = get_importers();
    7173
    … …  
    7678    if ( isset( $importers[ $pop_data['importer-id'] ] ) )
    7779        continue;
     80
     81    // Fill the array of registered (already installed) importers with data of the popular importers from the WordPress.org API.
    7882    $importers[ $pop_data['importer-id'] ] = array( $pop_data['name'], $pop_data['description'], 'install' => $pop_data['plugin-slug'] );
    7983}
    … …  
    8690<table class="widefat importers striped">
    8791
    88 <?php
    89     foreach ($importers as $importer_id => $data) {
    90         $action = '';
     92    <?php
     93    foreach ( $importers as $importer_id => $data ) {
     94        $plugin_slug = $action = '';
     95        $is_plugin_installed = false;
     96
    9197        if ( isset( $data['install'] ) ) {
    9298            $plugin_slug = $data['install'];
     99
    93100            if ( file_exists( WP_PLUGIN_DIR . '/' . $plugin_slug ) ) {
    94                 // Looks like Importer is installed, But not active
     101                // Looks like an importer is installed, but not active.
    95102                $plugins = get_plugins( '/' . $plugin_slug );
    96                 if ( !empty($plugins) ) {
    97                     $keys = array_keys($plugins);
     103                if ( ! empty( $plugins ) ) {
     104                    $keys = array_keys( $plugins );
    98105                    $plugin_file = $plugin_slug . '/' . $keys[0];
    99                     $action = '<a href="' . esc_url(wp_nonce_url(admin_url('plugins.php?action=activate&plugin=' . $plugin_file . '&from=import'), 'activate-plugin_' . $plugin_file)) .
    100                                             '"title="' . esc_attr__('Activate importer') . '"">' . $data[0] . '</a>';
     106                    $url = wp_nonce_url( add_query_arg( array(
     107                        'action' => 'activate',
     108                        'plugin' => $plugin_file,
     109                        'from'   => 'import',
     110                    ), admin_url( 'plugins.php' ) ), 'activate-plugin_' . $plugin_file );
     111                    $action = sprintf(
     112                        '<a href="%s" aria-label="%s">%s</a>',
     113                        esc_url( $url ),
     114                        /* translators: %s: Importer name */
     115                        esc_attr( sprintf( __( 'Run %s' ), $data[0] ) ),
     116                        __( 'Run Importer' )
     117                    );
     118
     119                    $is_plugin_installed = true;
    101120                }
    102121            }
    103             if ( empty($action) ) {
     122
     123            if ( empty( $action ) ) {
    104124                if ( is_main_site() ) {
    105                     $action = '<a href="' . esc_url( network_admin_url( 'plugin-install.php?tab=plugin-information&plugin=' . $plugin_slug .
    106                                         '&from=import&TB_iframe=true&width=600&height=550' ) ) . '" class="thickbox open-plugin-details-modal" title="' .
    107                                         esc_attr__('Install importer') . '">' . $data[0] . '</a>';
     125                    $url = wp_nonce_url( add_query_arg( array(
     126                        'action' => 'install-plugin',
     127                        'plugin' => $plugin_slug,
     128                        'from'   => 'import',
     129                    ), self_admin_url( 'update.php' ) ), 'install-plugin_' . $plugin_slug );
     130                    $action = sprintf(
     131                        '<a href="%1$s" class="install-now" data-slug="%2$s" data-name="%3$s" aria-label="%4$s">%5$s</a>',
     132                        esc_url( $url ),
     133                        esc_attr( $plugin_slug ),
     134                        esc_attr( $data[0] ),
     135                        /* translators: %s: Importer name */
     136                        esc_attr( sprintf( __( 'Install %s' ), $data[0] ) ),
     137                        __( 'Install Now' )
     138                    );
    108139                } else {
    109                     $action = $data[0];
    110                     $data[1] = sprintf( __( 'This importer is not installed. Please install importers from <a href="%s">the main site</a>.' ), get_admin_url( $current_site->blog_id, 'import.php' ) );
     140                    $action = sprintf(
     141                        /* translators: URL to wp-admin/import.php */
     142                        __( 'This importer is not installed. Please install importers from <a href="%s">the main site</a>.' ),
     143                        get_admin_url( get_current_network_id(), 'import.php' )
     144                    );
    111145                }
    112146            }
    113147        } else {
    114             $action = "<a href='" . esc_url( "admin.php?import=$importer_id" ) . "' title='" . esc_attr( wptexturize( strip_tags( $data[1] ) ) ) ."'>{$data[0]}</a>";
     148            $url = add_query_arg( array(
     149                'import' => $importer_id,
     150            ), self_admin_url( 'admin.php' ) );
     151            $action = sprintf(
     152                '<a href="%1$s" aria-label="%2$s">%3$s</a>',
     153                esc_url( $url ),
     154                /* translators: %s: Importer name */
     155                esc_attr( sprintf( __( 'Run %s' ), $data[0] ) ),
     156                __( 'Run Importer' )
     157            );
     158
     159            $is_plugin_installed = true;
    115160        }
    116161
     162        if ( ! $is_plugin_installed && is_main_site() ) {
     163            $url = add_query_arg( array(
     164                'tab'       => 'plugin-information',
     165                'plugin'    => $plugin_slug,
     166                'from'      => 'import',
     167                'TB_iframe' => 'true',
     168                'width'     => 600,
     169                'height'    => 550,
     170            ), network_admin_url( 'plugin-install.php' ) );
     171            $action .= sprintf(
     172                ' | <a href="%1$s" class="thickbox open-plugin-details-modal" aria-label="%2$s">%3$s</a>',
     173                esc_url( $url ),
     174                /* translators: %s: Importer name */
     175                esc_attr( sprintf( __( 'More information about %s' ), $data[0] ) ),
     176                __( 'Details' )
     177            );
     178        }
     179
    117180        echo "
    118             <tr>
    119                 <td class='import-system row-title'>$action</td>
    120                 <td class='desc'>{$data[1]}</td>
     181            <tr class='importer-item'>
     182                <td class='import-system'>
     183                    <span class='importer-title'>{$data[0]}</span>
     184                    <span class='importer-action'>{$action}</span>
     185                </td>
     186                <td class='desc'>
     187                    <span class='importer-desc'>{$data[1]}</span>
     188                </td>
    121189            </tr>";
    122190    }
    123 ?>
    124 
     191    ?>
    125192</table>
    126193<?php

  • trunk/src/wp-admin/includes/import.php

    r34566 r38075  
    127127
    128128    $locale = get_locale();
    129     $popular_importers = get_site_transient( 'popular_importers_' . $locale );
     129    $cache_key = 'popular_importers_' . md5( $locale . $wp_version );
     130    $popular_importers = get_site_transient( $cache_key );
    130131
    131132    if ( ! $popular_importers ) {
    132         $url = add_query_arg( 'locale', get_locale(), 'http://api.wordpress.org/core/importers/1.1/' );
     133        $url = add_query_arg( array(
     134            'locale'  => get_locale(),
     135            'version' => $wp_version,
     136        ), 'http://api.wordpress.org/core/importers/1.1/' );
    133137        $options = array( 'user-agent' => 'WordPress/' . $wp_version . '; ' . home_url() );
    134138        $response = wp_remote_get( $url, $options );
    135139        $popular_importers = json_decode( wp_remote_retrieve_body( $response ), true );
    136140
    137         if ( is_array( $popular_importers ) )
    138             set_site_transient( 'popular_importers_' . $locale, $popular_importers, 2 * DAY_IN_SECONDS );
    139         else
     141        if ( is_array( $popular_importers ) ) {
     142            set_site_transient( $cache_key, $popular_importers, 2 * DAY_IN_SECONDS );
     143        } else {
    140144            $popular_importers = false;
     145        }
    141146    }
    142147
    … …  
    158163        'blogger' => array(
    159164            'name' => __( 'Blogger' ),
    160             'description' => __( 'Install the Blogger importer to import posts, comments, and users from a Blogger blog.' ),
     165            'description' => __( 'Import posts, comments, and users from a Blogger blog.' ),
    161166            'plugin-slug' => 'blogger-importer',
    162167            'importer-id' => 'blogger',
    … …  
    164169        'wpcat2tag' => array(
    165170            'name' => __( 'Categories and Tags Converter' ),
    166             'description' => __( 'Install the category/tag converter to convert existing categories to tags or tags to categories, selectively.' ),
     171            'description' => __( 'Convert existing categories to tags or tags to categories, selectively.' ),
    167172            'plugin-slug' => 'wpcat2tag-importer',
    168173            'importer-id' => 'wp-cat2tag',
    … …  
    170175        'livejournal' => array(
    171176            'name' => __( 'LiveJournal' ),
    172             'description' => __( 'Install the LiveJournal importer to import posts from LiveJournal using their API.' ),
     177            'description' => __( 'Import posts from LiveJournal using their API.' ),
    173178            'plugin-slug' => 'livejournal-importer',
    174179            'importer-id' => 'livejournal',
    … …  
    176181        'movabletype' => array(
    177182            'name' => __( 'Movable Type and TypePad' ),
    178             'description' => __( 'Install the Movable Type importer to import posts and comments from a Movable Type or TypePad blog.' ),
     183            'description' => __( 'Import posts and comments from a Movable Type or TypePad blog.' ),
    179184            'plugin-slug' => 'movabletype-importer',
    180185            'importer-id' => 'mt',
    … …  
    182187        'opml' => array(
    183188            'name' => __( 'Blogroll' ),
    184             'description' => __( 'Install the blogroll importer to import links in OPML format.' ),
     189            'description' => __( 'Import links in OPML format.' ),
    185190            'plugin-slug' => 'opml-importer',
    186191            'importer-id' => 'opml',
    … …  
    188193        'rss' => array(
    189194            'name' => __( 'RSS' ),
    190             'description' => __( 'Install the RSS importer to import posts from an RSS feed.' ),
     195            'description' => __( 'Import posts from an RSS feed.' ),
    191196            'plugin-slug' => 'rss-importer',
    192197            'importer-id' => 'rss',
    … …  
    194199        'tumblr' => array(
    195200            'name' => __( 'Tumblr' ),
    196             'description' => __( 'Install the Tumblr importer to import posts &amp; media from Tumblr using their API.' ),
     201            'description' => __( 'Import posts &amp; media from Tumblr using their API.' ),
    197202            'plugin-slug' => 'tumblr-importer',
    198203            'importer-id' => 'tumblr',
    … …  
    200205        'wordpress' => array(
    201206            'name' => 'WordPress',
    202             'description' => __( 'Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.' ),
     207            'description' => __( 'Import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.' ),
    203208            'plugin-slug' => 'wordpress-importer',
    204209            'importer-id' => 'wordpress',

  • trunk/src/wp-admin/js/updates.js

    r38057 r38075  
    504504
    505505        if ( 'import' === pagenow ) {
    506             $message = $( 'a[href*="' + args.slug + '"]' );
    507         } else {
    508             $message.text( wp.updates.l10n.installing );
    509         }
     506            $message = $( '[data-slug="' + args.slug + '"]' );
     507        }
     508
     509        $message.text( wp.updates.l10n.installing );
    510510
    511511        $message
    … …  
    626626        } );
    627627
    628         $( 'a[href*="' + response.slug + '"]' )
    629             .removeClass( 'thickbox open-plugin-details-modal updating-message' )
    630             .off( 'click' )
    631             .attr( 'href', response.activateUrl + '&from=import' )
    632             .attr( 'title', wp.updates.l10n.activateImporter );
     628        $( '[data-slug="' + response.slug + '"]' )
     629            .removeClass( 'install-now updating-message' )
     630            .addClass( 'activate-now' )
     631            .attr({
     632                'href': response.activateUrl + '&from=import',
     633                'aria-label': wp.updates.l10n.activateImporterLabel.replace( '%s', response.pluginName )
     634            })
     635            .text( wp.updates.l10n.activateImporter );
    633636
    634637        wp.a11y.speak( wp.updates.l10n.installedMsg, 'polite' );
    … …  
    650653     */
    651654    wp.updates.installImporterError = function( response ) {
    652         var errorMessage = wp.updates.l10n.installFailed.replace( '%s', response.errorMessage );
     655        var errorMessage = wp.updates.l10n.installFailed.replace( '%s', response.errorMessage ),
     656            $installLink = $( '[data-slug="' + response.slug + '"]' ),
     657            pluginName = $installLink.data( 'name' );
    653658
    654659        if ( ! wp.updates.isValidResponse( response, 'install' ) ) {
    … …  
    666671        } );
    667672
    668         $( 'a[href*="' + response.slug + '"]' ).removeClass( 'updating-message' );
     673        $installLink
     674            .removeClass( 'updating-message' )
     675            .text( wp.updates.l10n.installNow )
     676            .attr( 'aria-label', wp.updates.l10n.installNowLabel.replace( '%s', pluginName ) );
    669677
    670678        wp.a11y.speak( errorMessage, 'assertive' );
    … …  
    17671775
    17681776        /**
     1777         * Click handler for importer plugins installs in the Import screen.
     1778         *
     1779         * @since 4.6.0
     1780         *
     1781         * @param {Event} event Event interface.
     1782         */
     1783        $document.on( 'click', '.importer-item .install-now', function( event ) {
     1784            var $button = $( event.target ),
     1785                pluginName = $( this ).data( 'name' );
     1786
     1787            event.preventDefault();
     1788
     1789            if ( $button.hasClass( 'updating-message' ) ) {
     1790                return;
     1791            }
     1792
     1793            if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) {
     1794                wp.updates.requestFilesystemCredentials( event );
     1795
     1796                $document.on( 'credential-modal-cancel', function() {
     1797
     1798                    $button
     1799                        .removeClass( 'updating-message' )
     1800                        .text( wp.updates.l10n.installNow )
     1801                        .attr( 'aria-label', wp.updates.l10n.installNowLabel.replace( '%s', pluginName ) );
     1802
     1803                    wp.a11y.speak( wp.updates.l10n.updateCancel, 'polite' );
     1804                } );
     1805            }
     1806
     1807            wp.updates.installPlugin( {
     1808                slug:    $button.data( 'slug' ),
     1809                success: wp.updates.installImporterSuccess,
     1810                error:   wp.updates.installImporterError
     1811            } );
     1812        } );
     1813
     1814        /**
    17691815         * Click handler for plugin deletions.
    17701816         *

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

    r38070 r38075  
    608608                'updateNow'                  => __( 'Update Now' ),
    609609                'updateFailedShort'          => __( 'Update Failed!' ),
    610                 /* translators: Error string for a failed update */
     610                /* translators: %s: Error string for a failed update */
    611611                'updateFailed'               => __( 'Update Failed: %s' ),
    612                 /* translators: Plugin name and version */
     612                /* translators: %s: Plugin name and version */
    613613                'updatingLabel'              => __( 'Updating %s...' ), // No ellipsis.
    614                 /* translators: Plugin name and version */
     614                /* translators: %s: Plugin name and version */
    615615                'updatedLabel'               => __( '%s updated!' ),
    616                 /* translators: Plugin name and version */
     616                /* translators: %s: Plugin name and version */
    617617                'updateFailedLabel'          => __( '%s update failed' ),
    618618                /* translators: JavaScript accessible string */
    … …  
    624624                'beforeunload'               => __( 'Updates may not complete if you navigate away from this page.' ),
    625625                'installNow'                 => __( 'Install Now' ),
     626                /* translators: %s: Plugin name */
     627                'installNowLabel'            => __( 'Install %s' ),
    626628                'installing'                 => __( 'Installing...' ),
    627629                'installed'                  => __( 'Installed!' ),
    628630                'installFailedShort'         => __( 'Install Failed!' ),
    629                 /* translators: Error string for a failed installation */
     631                /* translators: %s: Error string for a failed installation */
    630632                'installFailed'              => __( 'Installation failed: %s' ),
    631                 /* translators: Plugin name and version */
     633                /* translators: %s: Plugin name and version */
    632634                'pluginInstallingLabel'      => _x( 'Installing %s...', 'plugin' ), // no ellipsis
    633                 /* translators: Theme name and version */
     635                /* translators: %s: Theme name and version */
    634636                'themeInstallingLabel'       => _x( 'Installing %s...', 'theme' ), // no ellipsis
    635                 /* translators: Plugin name and version */
     637                /* translators: %s: Plugin name and version */
    636638                'pluginInstalledLabel'       => _x( '%s installed!', 'plugin' ),
    637                 /* translators: Theme name and version */
     639                /* translators: %s: Theme name and version */
    638640                'themeInstalledLabel'        => _x( '%s installed!', 'theme' ),
    639                 /* translators: Plugin name and version */
     641                /* translators: %s: Plugin name and version */
    640642                'pluginInstallFailedLabel'   => _x( '%s installation failed', 'plugin' ),
    641                 /* translators: Theme name and version */
     643                /* translators: %s: Theme name and version */
    642644                'themeInstallFailedLabel'    => _x( '%s installation failed', 'theme' ),
    643645                'installingMsg'              => __( 'Installing... please wait.' ),
    644646                'installedMsg'               => __( 'Installation completed successfully.' ),
    645                 /* translators: Activation URL */
    646                 'importerInstalledMsg'       => __( 'Importer installed successfully. <a href="%s">Activate plugin &#38; run importer</a>' ),
     647                /* translators: %s: Activation URL */
     648                'importerInstalledMsg'       => __( 'Importer installed successfully. <a href="%s">Run importer</a>' ),
    647649                /* translators: %s: Theme name */
    648650                'aysDelete'                  => __( 'Are you sure you want to delete %s?' ),
    … …  
    662664                /* translators: %s: Theme name */
    663665                'activateThemeLabel'         => is_network_admin() ? _x( 'Network Activate %s', 'theme' ) : _x( 'Activate %s', 'theme' ),
    664                 'activateImporter'           => __( 'Activate importer' ),
     666                'activateImporter'           => __( 'Run Importer' ),
     667                /* translators: %s: Importer name */
     668                'activateImporterLabel'      => __( 'Run %s' ),
    665669                'unknownError'               => __( 'An unknown error occurred' ),
    666670                'pluginsFound'               => __( 'Number of plugins found: %d' ),

  • trunk/tests/qunit/fixtures/updates.js

    r38057 r38075  
    3131        'installingMsg': 'Installing... please wait.',
    3232        'installedMsg': 'Installation completed successfully.',
    33         'importerInstalledMsg': 'Importer installed successfully. <a href="%s">Activate plugin &#38; run importer</a>',
     33        'importerInstalledMsg': 'Importer installed successfully. <a href="%s">Run importer</a>',
    3434        'aysDelete': 'Are you sure you want to delete %s?',
    3535        'aysDeleteUninstall': 'Are you sure you want to delete %s and its data?',
    … …  
    4444        'activatePluginLabel': 'Activate %s',
    4545        'activateThemeLabel':  'Activate %s',
    46         'activateImporter': 'Activate importer',
     46        'activateImporter': 'Run Importer',
    4747        'unknownError': 'An unknown error occurred',
    4848        'pluginsFound': 'Number of plugins found: %d',
Note: See TracChangeset for help on using the changeset viewer.