WordPress.org

Make WordPress Core


Ignore:
Timestamp:
06/07/2021 11:09:56 PM (6 months ago)
Author:
joedolson
Message:

Themes: Fix accessibility issues with controls in themes screen.

Add accessible names to several theme controls so provide better context for screen reader users. Change theme details element into a button that can receive focus. Ensure focus is set back on existing theme when theme details modal is closed.

props alexstine, poena.
Fixes #52649.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/themes.php

    r50696 r51083  
    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">
     
    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
     
    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'] ) { ?>
     
    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 { ?>
     
    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
     
    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 { #>
     
    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
     
    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>
Note: See TracChangeset for help on using the changeset viewer.