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

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.

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>