WordPress.org

Make WordPress Core

Changeset 38075


Ignore:
Timestamp:
07/17/16 15:31:29 (8 months 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.