WordPress.org
Get WordPress

Make WordPress Core

Changeset 51083


Ignore:
Timestamp:
06/07/2021 11:09:56 PM (3 years 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.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r50813 r51083  
    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.
    … …  
    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            });
    … …  
    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' );

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

    r50784 r51083  
    6767
    6868.theme-browser .theme:hover,
    69 .theme-browser .theme:focus {
     69.theme-browser .theme.focus {
    7070    cursor: pointer;
    7171}
    … …  
    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;
    … …  
    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}
    … …  
    157156    right: 20%;
    158157    left: 20%;
     158    width: 60%;
    159159    background: #1d2327;
    160160    background: rgba(0, 0, 0, 0.7);
    … …  
    170170}
    171171
    172 .theme-browser .theme:focus {
     172.theme-browser .theme .more-details:focus {
     173    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
     174}
     175
     176.theme-browser .theme.focus {
    173177    border-color: #4f94d4;
    174178    box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
    175179}
    176180
    177 .theme-browser .theme:focus .more-details {
     181.theme-browser .theme.focus .more-details {
    178182    opacity: 1;
    179183}
    180184
    181185/* Current theme needs to have its action always on view */
    182 .theme-browser .theme.active:focus .theme-actions {
     186.theme-browser .theme.active.focus .theme-actions {
    183187    display: block;
    184188}
    185189
    186190.theme-browser.rendered .theme:hover .more-details,
    187 .theme-browser.rendered .theme:focus .more-details {
     191.theme-browser.rendered .theme.focus .more-details {
    188192    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    189193    opacity: 1;
    … …  
    878882    .theme:not(.active):focus .theme-actions,
    879883    .theme:hover .more-details,
    880     .theme:focus .more-details {
     884    .theme.focus .more-details {
    881885        display: none;
    882886    }
    883887
    884888    .theme-browser.rendered .theme:hover .theme-screenshot img,
    885     .theme-browser.rendered .theme:focus .theme-screenshot img {
     889    .theme-browser.rendered .theme.focus .theme-screenshot img {
    886890        opacity: 1.0;
    887891    }

  • 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.