Make WordPress Core

Ticket #52649: 52649.2.diff

File 52649.2.diff, 8.4 KB (added by joedolson, 11 months ago)

Patch with focus handling.

  • src/js/_enqueues/wp/theme.js

     
    404404                var data = this.model.toJSON();
    405405
    406406                // Render themes using the html template.
    407                 this.$el.html( this.html( data ) ).attr({
    408                         tabindex: 0,
    409                         'aria-describedby' : data.id + '-action ' + data.id + '-name',
    410                         'data-slug': data.id
    411                 });
     407                this.$el.html( this.html( data ) ).attr( 'data-slug', data.id );
    412408
    413409                // Renders active theme styles.
    414410                this.activeTheme();
     
    764760
    765761                                // Return focus to the theme div.
    766762                                if ( themes.focusedTheme ) {
    767                                         themes.focusedTheme.trigger( 'focus' );
     763                                        themes.focusedTheme.find('.more-details').trigger( 'focus' );
    768764                                }
    769765                        });
    770766                }
     
    952948
    953949                        // Return focus to the theme div.
    954950                        if ( themes.focusedTheme ) {
    955                                 themes.focusedTheme.trigger( 'focus' );
     951                                themes.focusedTheme.find('.more-details').trigger( 'focus' );
    956952                        }
    957953                }).removeClass( 'iframe-ready' );
    958954
  • src/wp-admin/css/themes.css

     
    6666}
    6767
    6868.theme-browser .theme:hover,
    69 .theme-browser .theme:focus {
     69.theme-browser .theme.focus {
    7070        cursor: pointer;
    7171}
    7272
     
    9595}
    9696
    9797.theme-browser .theme:hover .theme-actions,
    98 .theme-browser .theme.focus .theme-actions,
    99 .theme-browser .theme:focus .theme-actions {
     98.theme-browser .theme.focus .theme-actions {
    10099        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    101100        opacity: 1;
    102101}
     
    140139}
    141140
    142141.theme-browser .theme:hover .theme-screenshot,
    143 .theme-browser .theme:focus .theme-screenshot {
     142.theme-browser .theme.focus .theme-screenshot {
    144143        background: #fff;
    145144}
    146145
    147146.theme-browser.rendered .theme:hover .theme-screenshot img,
    148 .theme-browser.rendered .theme:focus .theme-screenshot img {
     147.theme-browser.rendered .theme.focus .theme-screenshot img {
    149148        opacity: 0.4;
    150149}
    151150
     
    169168        transition: opacity 0.1s ease-in-out;
    170169}
    171170
    172 .theme-browser .theme:focus {
     171.theme-browser .theme.focus {
    173172        border-color: #4f94d4;
    174173        box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
    175174}
    176175
    177 .theme-browser .theme:focus .more-details {
     176.theme-browser .theme.focus .more-details {
    178177        opacity: 1;
    179178}
    180179
    181180/* Current theme needs to have its action always on view */
    182 .theme-browser .theme.active:focus .theme-actions {
     181.theme-browser .theme.active.focus .theme-actions {
    183182        display: block;
    184183}
    185184
    186185.theme-browser.rendered .theme:hover .more-details,
    187 .theme-browser.rendered .theme:focus .more-details {
     186.theme-browser.rendered .theme.focus .more-details {
    188187        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    189188        opacity: 1;
    190189}
     
    878877        .theme:not(.active):hover .theme-actions,
    879878        .theme:not(.active):focus .theme-actions,
    880879        .theme:hover .more-details,
    881         .theme:focus .more-details {
     880        .theme.focus .more-details {
    882881                display: none;
    883882        }
    884883
    885884        .theme-browser.rendered .theme:hover .theme-screenshot img,
    886         .theme-browser.rendered .theme:focus .theme-screenshot img {
     885        .theme-browser.rendered .theme.focus .theme-screenshot img {
    887886                opacity: 1.0;
    888887        }
    889888}
  • src/wp-admin/themes.php

     
    379379                $active_class = ' active';
    380380        }
    381381        ?>
    382 <div class="theme<?php echo $active_class; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
     382<div class="theme<?php echo $active_class; ?>">
    383383        <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
    384384                <div class="theme-screenshot">
    385385                        <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
     
    512512        }
    513513        ?>
    514514
    515         <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
     515        <?php
     516        /* translators: %s: Theme name. */
     517        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), $theme['name'] );
     518        ?>
     519        <button type="button" aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></button>
    516520        <div class="theme-author">
    517521                <?php
    518522                /* translators: %s: Theme author name. */
     
    531535
    532536                <div class="theme-actions">
    533537                <?php if ( $theme['active'] ) { ?>
    534                         <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
    535                                 <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
     538                        <?php
     539                        if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
     540                                /* translators: %s: Theme name. */
     541                                $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), $theme['name'] );
     542                                ?>
     543                                <a aria-label="<?php echo esc_attr( $customize_aria_label ); ?>" class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
    536544                        <?php } ?>
    537545                <?php } elseif ( $theme['compatibleWP'] && $theme['compatiblePHP'] ) { ?>
    538546                        <?php
     
    540548                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    541549                        ?>
    542550                        <a class="button activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    543                         <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
    544                                 <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
     551                        <?php
     552                        if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
     553                                /* translators: %s: Theme name. */
     554                                $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     555                                ?>
     556                                <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
    545557                        <?php } ?>
    546558                <?php } else { ?>
    547559                        <?php
     
    859871                </p></div>
    860872        <# } #>
    861873
    862         <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
     874        <?php
     875        /* translators: %s: Theme name. */
     876        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), '{{ data.name }}' );
     877        ?>
     878        <button type="button" aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></button>
    863879        <div class="theme-author">
    864880                <?php
    865881                /* translators: %s: Theme author name. */
     
    879895                <div class="theme-actions">
    880896                        <# if ( data.active ) { #>
    881897                                <# if ( data.actions.customize ) { #>
    882                                         <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
     898                                        <?php
     899                                        /* translators: %s: Theme name. */
     900                                        $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
     901                                        ?>
     902                                        <a aria-label="<?php echo esc_attr( $customize_aria_label ); ?>" class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
    883903                                <# } #>
    884904                        <# } else { #>
    885905                                <# if ( data.compatibleWP && data.compatiblePHP ) { #>
     
    888908                                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    889909                                        ?>
    890910                                        <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
    891                                         <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
     911                                        <?php
     912                                        /* translators: %s: Theme name. */
     913                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     914                                        ?>
     915                                        <a aria-label="<?php echo esc_attr( $live_preview_aria_label ); ?>" class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
    892916                                <# } else { #>
    893917                                        <?php
    894918                                        /* translators: %s: Theme name. */