Changeset 51083 for trunk/src/wp-admin/themes.php

Timestamp:

06/07/2021 11:09:56 PM (5 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.

File:

• trunk/src/wp-admin/themes.php (modified) (8 diffs)

trunk/src/wp-admin/themes.php

@@ -371 +371 @@
         }
         ?>
-<div class="theme<?php echo $active_class; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
+<div class="theme<?php echo $active_class; ?>">
         <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
                 <div class="theme-screenshot">
@@ -504 +504 @@
         ?>
 
-        <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
+        <?php
+        /* translators: %s: Theme name. */
+        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), $theme['name'] );
+        ?>
+        <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>
         <div class="theme-author">
                 <?php
@@ -523 +527 @@
                 <div class="theme-actions">
                 <?php if ( $theme['active'] ) { ?>
-                        <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
-                                <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
+                        <?php
+                        if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
+                                /* translators: %s: Theme name. */
+                                $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), $theme['name'] );
+                                ?>
+                                <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>
                         <?php } ?>
                 <?php } elseif ( $theme['compatibleWP'] && $theme['compatiblePHP'] ) { ?>
@@ -532 +540 @@
                         ?>
                         <a class="button activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
-                        <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
-                                <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
+                        <?php
+                        if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
+                                /* translators: %s: Theme name. */
+                                $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
+                                ?>
+                                <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>
                         <?php } ?>
                 <?php } else { ?>
@@ -851 +863 @@
         <# } #>
 
-        <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
+        <?php
+        /* translators: %s: Theme name. */
+        $details_aria_label = sprintf( _x( 'View Theme Details for %s', 'theme' ), '{{ data.name }}' );
+        ?>
+        <button type="button" aria-label="<?php echo esc_attr( $details_aria_label ); ?>" class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></button>
         <div class="theme-author">
                 <?php
@@ -871 +887 @@
                         <# if ( data.active ) { #>
                                 <# if ( data.actions.customize ) { #>
-                                        <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
+                                        <?php
+                                        /* translators: %s: Theme name. */
+                                        $customize_aria_label = sprintf( _x( 'Customize %s', 'theme' ), '{{ data.name }}' );
+                                        ?>
+                                        <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>
                                 <# } #>
                         <# } else { #>
@@ -880 +900 @@
                                         ?>
                                         <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a>
-                                        <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
+                                        <?php
+                                        /* translators: %s: Theme name. */
+                                        $live_preview_aria_label = sprintf( _x( 'Live Preview %s', 'theme' ), '{{ data.name }}' );
+                                        ?>
+                                        <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>
                                 <# } else { #>
                                         <?php
@@ -1109 +1133 @@
 
                         <# if ( ! data.active && data.actions['delete'] ) { #>
-                                <a href="{{{ data.actions['delete'] }}}" class="button delete-theme"><?php _e( 'Delete' ); ?></a>
+                                <?php
+                                /* translators: %s: Theme name. */
+                                $aria_label = sprintf( _x( 'Delete %s', 'theme' ), '{{ data.name }}' );
+                                ?>
+                                <a href="{{{ data.actions['delete'] }}}" class="button delete-theme" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Delete' ); ?></a>
                         <# } #>
                 </div>