Make WordPress Core

Ticket #52649: 52649.3.diff

File 52649.3.diff, 8.9 KB (added by joedolson, 8 months ago)

Adds aria-label on the Delete button.

  • 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}
     
    877876        .theme:not(.active):hover .theme-actions,
    878877        .theme:not(.active):focus .theme-actions,
    879878        .theme:hover .more-details,
    880         .theme:focus .more-details {
     879        .theme.focus .more-details {
    881880                display: none;
    882881        }
    883882
    884883        .theme-browser.rendered .theme:hover .theme-screenshot img,
    885         .theme-browser.rendered .theme:focus .theme-screenshot img {
     884        .theme-browser.rendered .theme.focus .theme-screenshot img {
    886885                opacity: 1.0;
    887886        }
    888887}
  • src/wp-admin/themes.php

     
    370370                $active_class = ' active';
    371371        }
    372372        ?>
    373 <div class="theme<?php echo $active_class; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
     373<div class="theme<?php echo $active_class; ?>">
    374374        <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
    375375                <div class="theme-screenshot">
    376376                        <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
     
    503503        }
    504504        ?>
    505505
    506         <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
     506        <?php
     507        /* translators: %s: Theme name. */
     508        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), $theme['name'] );
     509        ?>
     510        <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>
    507511        <div class="theme-author">
    508512                <?php
    509513                /* translators: %s: Theme author name. */
     
    522526
    523527                <div class="theme-actions">
    524528                <?php if ( $theme['active'] ) { ?>
    525                         <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
    526                                 <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
     529                        <?php
     530                        if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
     531                                /* translators: %s: Theme name. */
     532                                $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), $theme['name'] );
     533                                ?>
     534                                <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>
    527535                        <?php } ?>
    528536                <?php } elseif ( $theme['compatibleWP'] && $theme['compatiblePHP'] ) { ?>
    529537                        <?php
     
    531539                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    532540                        ?>
    533541                        <a class="button activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    534                         <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
    535                                 <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
     542                        <?php
     543                        if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
     544                                /* translators: %s: Theme name. */
     545                                $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     546                                ?>
     547                                <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>
    536548                        <?php } ?>
    537549                <?php } else { ?>
    538550                        <?php
     
    850862                </p></div>
    851863        <# } #>
    852864
    853         <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
     865        <?php
     866        /* translators: %s: Theme name. */
     867        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), '{{ data.name }}' );
     868        ?>
     869        <button type="button" aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></button>
    854870        <div class="theme-author">
    855871                <?php
    856872                /* translators: %s: Theme author name. */
     
    870886                <div class="theme-actions">
    871887                        <# if ( data.active ) { #>
    872888                                <# if ( data.actions.customize ) { #>
    873                                         <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
     889                                        <?php
     890                                        /* translators: %s: Theme name. */
     891                                        $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
     892                                        ?>
     893                                        <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>
    874894                                <# } #>
    875895                        <# } else { #>
    876896                                <# if ( data.compatibleWP && data.compatiblePHP ) { #>
     
    879899                                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
    880900                                        ?>
    881901                                        <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
    882                                         <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
     902                                        <?php
     903                                        /* translators: %s: Theme name. */
     904                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
     905                                        ?>
     906                                        <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>
    883907                                <# } else { #>
    884908                                        <?php
    885909                                        /* translators: %s: Theme name. */
     
    11081132                        </div>
    11091133
    11101134                        <# if ( ! data.active && data.actions['delete'] ) { #>
    1111                                 <a href="{{{ data.actions['delete'] }}}" class="button delete-theme"><?php _e( 'Delete' ); ?></a>
     1135                                <?php
     1136                                /* translators: %s: Theme name. */
     1137                                $aria_label = sprintf( _x( 'Delete %s', 'theme' ), '{{ data.name }}' );
     1138                                ?>
     1139                                <a href="{{{ data.actions['delete'] }}}" class="button delete-theme" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Delete' ); ?></a>
    11121140                        <# } #>
    11131141                </div>
    11141142        </div>