Ticket #52649: 52649.3.diff
| File 52649.3.diff, 8.9 KB (added by , 4 years ago) |
|---|
-
src/js/_enqueues/wp/theme.js
404 404 var data = this.model.toJSON(); 405 405 406 406 // 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 ); 412 408 413 409 // Renders active theme styles. 414 410 this.activeTheme(); … … 764 760 765 761 // Return focus to the theme div. 766 762 if ( themes.focusedTheme ) { 767 themes.focusedTheme. trigger( 'focus' );763 themes.focusedTheme.find('.more-details').trigger( 'focus' ); 768 764 } 769 765 }); 770 766 } … … 952 948 953 949 // Return focus to the theme div. 954 950 if ( themes.focusedTheme ) { 955 themes.focusedTheme. trigger( 'focus' );951 themes.focusedTheme.find('.more-details').trigger( 'focus' ); 956 952 } 957 953 }).removeClass( 'iframe-ready' ); 958 954 -
src/wp-admin/css/themes.css
66 66 } 67 67 68 68 .theme-browser .theme:hover, 69 .theme-browser .theme :focus {69 .theme-browser .theme.focus { 70 70 cursor: pointer; 71 71 } 72 72 … … 95 95 } 96 96 97 97 .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 { 100 99 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 101 100 opacity: 1; 102 101 } … … 140 139 } 141 140 142 141 .theme-browser .theme:hover .theme-screenshot, 143 .theme-browser .theme :focus .theme-screenshot {142 .theme-browser .theme.focus .theme-screenshot { 144 143 background: #fff; 145 144 } 146 145 147 146 .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 { 149 148 opacity: 0.4; 150 149 } 151 150 … … 169 168 transition: opacity 0.1s ease-in-out; 170 169 } 171 170 172 .theme-browser .theme :focus {171 .theme-browser .theme.focus { 173 172 border-color: #4f94d4; 174 173 box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); 175 174 } 176 175 177 .theme-browser .theme :focus .more-details {176 .theme-browser .theme.focus .more-details { 178 177 opacity: 1; 179 178 } 180 179 181 180 /* 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 { 183 182 display: block; 184 183 } 185 184 186 185 .theme-browser.rendered .theme:hover .more-details, 187 .theme-browser.rendered .theme :focus .more-details {186 .theme-browser.rendered .theme.focus .more-details { 188 187 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 189 188 opacity: 1; 190 189 } … … 877 876 .theme:not(.active):hover .theme-actions, 878 877 .theme:not(.active):focus .theme-actions, 879 878 .theme:hover .more-details, 880 .theme :focus .more-details {879 .theme.focus .more-details { 881 880 display: none; 882 881 } 883 882 884 883 .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 { 886 885 opacity: 1.0; 887 886 } 888 887 } -
src/wp-admin/themes.php
370 370 $active_class = ' active'; 371 371 } 372 372 ?> 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; ?>"> 374 374 <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?> 375 375 <div class="theme-screenshot"> 376 376 <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" /> … … 503 503 } 504 504 ?> 505 505 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> 507 511 <div class="theme-author"> 508 512 <?php 509 513 /* translators: %s: Theme author name. */ … … 522 526 523 527 <div class="theme-actions"> 524 528 <?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> 527 535 <?php } ?> 528 536 <?php } elseif ( $theme['compatibleWP'] && $theme['compatiblePHP'] ) { ?> 529 537 <?php … … 531 539 $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 532 540 ?> 533 541 <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> 536 548 <?php } ?> 537 549 <?php } else { ?> 538 550 <?php … … 850 862 </p></div> 851 863 <# } #> 852 864 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> 854 870 <div class="theme-author"> 855 871 <?php 856 872 /* translators: %s: Theme author name. */ … … 870 886 <div class="theme-actions"> 871 887 <# if ( data.active ) { #> 872 888 <# 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> 874 894 <# } #> 875 895 <# } else { #> 876 896 <# if ( data.compatibleWP && data.compatiblePHP ) { #> … … 879 899 $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 880 900 ?> 881 901 <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> 883 907 <# } else { #> 884 908 <?php 885 909 /* translators: %s: Theme name. */ … … 1108 1132 </div> 1109 1133 1110 1134 <# 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> 1112 1140 <# } #> 1113 1141 </div> 1114 1142 </div>