Ticket #41872: 41872.diff
| File 41872.diff, 19.7 KB (added by , 9 years ago) |
|---|
-
src/wp-admin/css/common.css
3027 3027 height: calc( 100vh - 220px ); 3028 3028 } 3029 3029 3030 #template label { 3031 display: inline-block; 3032 margin-bottom: 1em; 3033 font-weight: 600; 3034 } 3035 3030 3036 /* rtl:ignore */ 3031 3037 #template textarea, 3032 3038 #docs-list { -
src/wp-admin/css/customize-controls.css
550 550 margin-top: 22px; 551 551 margin-bottom: 0; 552 552 } 553 .customize-section-description ul { 554 margin-left: 1em; 555 } 556 .customize-section-description ul > li { 557 list-style: disc; 558 } 553 559 554 .section-description-buttons { 560 555 text-align: right; 561 556 } … … 1155 1150 tab-size: 4; 1156 1151 } 1157 1152 1153 .customize-section-description-container + #customize-control-custom_css .customize-control-title { 1154 margin-left: 12px; 1155 } 1156 1158 1157 .customize-section-description-container + #customize-control-custom_css:last-child textarea { 1159 1158 border-right: 0; 1160 1159 border-left: 0; … … 1161 1160 height: calc( 100vh - 185px ); 1162 1161 resize: none; 1163 1162 } 1163 1164 1164 .customize-section-description-container + #customize-control-custom_css:last-child { 1165 1165 margin-left: -12px; 1166 1166 width: 299px; … … 1171 1171 .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror { 1172 1172 height: calc( 100vh - 185px ); 1173 1173 } 1174 1174 1175 .CodeMirror-lint-tooltip, 1175 1176 .CodeMirror-hints { 1176 1177 z-index: 500000 !important; … … 1185 1186 .customize-section-description-container + #customize-control-custom_css:last-child { 1186 1187 margin-right: 0; 1187 1188 } 1189 1188 1190 .customize-section-description-container + #customize-control-custom_css:last-child textarea { 1189 1191 height: calc( 100vh - 140px ); 1190 1192 } -
src/wp-admin/js/customize-controls.js
1159 1159 content = meta.find( '.customize-section-description:first' ); 1160 1160 content.toggleClass( 'open' ); 1161 1161 content.slideToggle(); 1162 content.attr( 'aria-expanded', function ( i, attr ) {1162 $( this ).attr( 'aria-expanded', function ( i, attr ) { 1163 1163 return 'true' === attr ? 'false' : 'true'; 1164 1164 }); 1165 1165 }); … … 1871 1871 1872 1872 meta = panel.container.find( '.panel-meta:first' ); 1873 1873 1874 meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { 1875 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 1876 return; 1877 } 1878 event.preventDefault(); // Keep this AFTER the key filter above 1879 1874 meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() { 1880 1875 if ( meta.hasClass( 'cannot-expand' ) ) { 1881 1876 return; 1882 1877 } … … 5656 5651 5657 5652 ready = $.when( sectionReady, controlReady ); 5658 5653 5659 // Set up the section des ription behaviors.5654 // Set up the section description behaviors. 5660 5655 ready.done( function setupSectionDescription( section, control ) { 5661 5656 5662 5657 // Close the section description when clicking the close button. … … 5663 5658 section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() { 5664 5659 section.container.find( '.section-meta .customize-section-description:first' ) 5665 5660 .removeClass( 'open' ) 5666 .slideUp() 5667 .attr( 'aria-expanded', 'false' ); 5661 .slideUp(); 5662 section.container.find( '.customize-help-toggle' ) 5663 .attr( 'aria-expanded', 'false' ) 5664 .focus(); // Avoid focus loss. 5668 5665 }); 5669 5666 5670 5667 // Reveal help text if setting is empty. … … 5671 5668 if ( ! control.setting.get() ) { 5672 5669 section.container.find( '.section-meta .customize-section-description:first' ) 5673 5670 .addClass( 'open' ) 5674 .show() 5675 .attr( 'aria-expanded', 'true' );5671 .show(); 5672 section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' ); 5676 5673 } 5677 5674 }); 5678 5675 … … 5760 5757 5761 5758 control.editor = wp.codeEditor.initialize( $textarea, settings ); 5762 5759 5760 // Improve the editor accessibility. 5761 $( '.CodeMirror-code', control.container ) 5762 .attr({ 5763 role: 'textbox', 5764 'aria-multiline': 'true', 5765 'aria-label': control.params.label, 5766 'aria-describedby': 'editor-keyboard-trap-help' 5767 }); 5768 5763 5769 // Refresh when receiving focus. 5764 5770 control.editor.codemirror.on( 'focus', function( codemirror ) { 5765 5771 codemirror.refresh(); -
src/wp-admin/js/theme-plugin-editor.js
83 83 84 84 editor = wp.codeEditor.initialize( $( '#newcontent' ), codeEditorSettings ); 85 85 86 // Improve the editor accessibility. 87 $( '.CodeMirror-code', $( '#newcontent' ).parent() ) 88 .attr({ 89 role: 'textbox', 90 'aria-multiline': 'true', 91 'aria-labelledby': 'theme-plugin-editor-label', 92 'aria-describedby': 'editor-keyboard-trap-help' 93 }); 94 86 95 component.instance = editor; 87 96 }; 88 97 -
src/wp-admin/js/widgets/custom-html-widgets.js
210 210 }); 211 211 212 212 control.editor = wp.codeEditor.initialize( control.fields.content, settings ); 213 214 // Improve the editor accessibility. 215 $( '.CodeMirror-code', control.$el ) 216 .attr({ 217 role: 'textbox', 218 'aria-multiline': 'true', 219 'aria-labelledby': control.fields.content[0].id + '-label', 220 'aria-describedby': 'editor-keyboard-trap-help' 221 }); 222 213 223 control.fields.content.on( 'change', function() { 214 224 if ( this.value !== control.editor.codemirror.getValue() ) { 215 225 control.editor.codemirror.setValue( this.value ); -
src/wp-admin/plugin-editor.php
178 178 '<p>' . __('You can use the editor to make changes to any of your plugins’ individual PHP files. Be aware that if you make changes, plugins updates will overwrite your customizations.') . '</p>' . 179 179 '<p>' . __('Choose a plugin to edit from the dropdown menu and click the Select button. Click once on any file name to load it in the editor, and make your changes. Don’t forget to save your changes (Update File) when you’re finished.') . '</p>' . 180 180 '<p>' . __('The Documentation menu below the editor lists the PHP functions recognized in the plugin file. Clicking Look Up takes you to a web page about that particular function.') . '</p>' . 181 '<p id=" newcontent-description">' . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ) . '</p>' .181 '<p id="editor-keyboard-trap-help">' . __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' ) . '</p>' . 182 182 '<p>' . __('If you want to make changes but don’t want them to be overwritten when the plugin is updated, you may be ready to think about writing your own plugin. For information on how to edit plugins, write your own from scratch, or just better understand their anatomy, check out the links below.') . '</p>' . 183 183 ( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' ) 184 184 ) ); … … 238 238 239 239 <div class="fileedit-sub"> 240 240 <div class="alignleft"> 241 < big><?php241 <h2><?php 242 242 if ( is_plugin_active( $plugin ) ) { 243 243 if ( is_writeable( $real_file ) ) { 244 244 /* translators: %s: plugin file name */ … … 256 256 echo sprintf( __( 'Browsing %s (inactive)' ), '<strong>' . $file . '</strong>' ); 257 257 } 258 258 } 259 ?></ big>259 ?></h2> 260 260 </div> 261 261 <div class="alignright"> 262 262 <form action="plugin-editor.php" method="post"> … … 304 304 </div> 305 305 <form name="template" id="template" action="plugin-editor.php" method="post"> 306 306 <?php wp_nonce_field('edit-plugin_' . $file) ?> 307 <div><textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea> 308 <input type="hidden" name="action" value="update" /> 309 <input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" /> 310 <input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" /> 311 <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" /> 307 <div> 308 <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label> 309 <textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help"><?php echo $content; ?></textarea> 310 <input type="hidden" name="action" value="update" /> 311 <input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" /> 312 <input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" /> 313 <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" /> 312 314 </div> 313 315 <?php if ( !empty( $docs_select ) ) : ?> 314 316 <div id="documentation" class="hide-if-no-js"><label for="docs-list"><?php _e('Documentation:') ?></label> <?php echo $docs_select ?> <input type="button" class="button" value="<?php esc_attr_e( 'Look Up' ) ?> " onclick="if ( '' != jQuery('#docs-list').val() ) { window.open( 'https://api.wordpress.org/core/handbook/1.0/?function=' + escape( jQuery( '#docs-list' ).val() ) + '&locale=<?php echo urlencode( get_user_locale() ) ?>&version=<?php echo urlencode( get_bloginfo( 'version' ) ) ?>&redirect=true'); }" /></div> -
src/wp-admin/theme-editor.php
27 27 '<p>' . __('You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.') . '</p> 28 28 <p>' . __( 'Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme’s template files. Clicking once on any file name causes the file to appear in the large Editor box.' ) . '</p> 29 29 <p>' . __('For PHP files, you can use the Documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material about that particular function.') . '</p> 30 <p id=" newcontent-description">' . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ) . '</p>30 <p id="editor-keyboard-trap-help">' . __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' ) . '</p> 31 31 <p>' . __('After typing in your edits, click Update File.') . '</p> 32 32 <p>' . __('<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.') . '</p> 33 33 <p>' . sprintf( __('Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a <a href="%s">child theme</a> instead.'), __('https://codex.wordpress.org/Child_Themes') ) . '</p>' . … … 292 292 else : ?> 293 293 <form name="template" id="template" action="theme-editor.php" method="post"> 294 294 <?php wp_nonce_field( 'edit-theme_' . $file . $stylesheet ); ?> 295 <div><textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea> 296 <input type="hidden" name="action" value="update" /> 297 <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" /> 298 <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" /> 299 <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" /> 295 <div> 296 <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label> 297 <textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help"><?php echo $content; ?></textarea> 298 <input type="hidden" name="action" value="update" /> 299 <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" /> 300 <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" /> 301 <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" /> 300 302 </div> 301 303 <?php if ( ! empty( $functions ) ) : ?> 302 304 <div id="documentation" class="hide-if-no-js"> -
src/wp-includes/class-wp-customize-manager.php
4202 4202 4203 4203 /* Custom CSS */ 4204 4204 $section_description = '<p>'; 4205 $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.' , 'better-code-editing');4205 $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.' ); 4206 4206 $section_description .= sprintf( 4207 4207 ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>', 4208 4208 esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ), … … 4212 4212 ); 4213 4213 $section_description .= '</p>'; 4214 4214 4215 $section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>'; 4216 $section_description .= '<ul>'; 4217 $section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>'; 4218 $section_description .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.', 'better-code-editing' ) . '</li>'; 4219 $section_description .= '</ul>'; 4215 $section_description .= '<p id="editor-keyboard-trap-help">'; 4216 $section_description .= __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' ); 4217 $section_description .= '</p>'; 4220 4218 4221 4219 if ( 'false' !== wp_get_current_user()->syntax_highlighting ) { 4222 4220 $section_description .= '<p>'; 4223 4221 $section_description .= sprintf( 4224 4222 /* translators: placeholder is link to user profile */ 4225 __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' , 'better-code-editing'),4223 __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ), 4226 4224 sprintf( 4227 4225 ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>', 4228 4226 esc_url( get_edit_profile_url() . '#syntax_highlighting' ), 4229 __( 'user profile' , 'better-code-editing'),4227 __( 'user profile' ), 4230 4228 /* translators: accessibility text */ 4231 4229 __( '(opens in a new window)', 'default' ) 4232 4230 ) … … 4252 4250 $this->add_setting( $custom_css_setting ); 4253 4251 4254 4252 $this->add_control( 'custom_css', array( 4253 'label' => __( 'CSS code' ), 4255 4254 'type' => 'textarea', 4256 4255 'section' => 'custom_css', 4257 4256 'settings' => array( 'default' => $custom_css_setting->id ), 4258 4257 'input_attrs' => array( 4259 'class' => 'code', // Ensures contents displayed as LTR instead of RTL. 4258 'class' => 'code', // Ensures contents displayed as LTR instead of RTL. 4259 'aria-describedby' => 'editor-keyboard-trap-help' 4260 4260 ), 4261 4261 ) ); 4262 4262 } -
src/wp-includes/class-wp-customize-panel.php
363 363 echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' ); 364 364 ?></span> 365 365 <# if ( data.description ) { #> 366 <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>366 <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button> 367 367 <# } #> 368 368 </div> 369 369 <# if ( data.description ) { #> -
src/wp-includes/widgets/class-wp-widget-custom-html.php
213 213 </p> 214 214 215 215 <p> 216 <label for="{{ elementIdPrefix }}content" class="screen-reader-text"><?php esc_html_e( 'Content:', 'default' ); ?></label>217 <textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>216 <label for="{{ elementIdPrefix }}content" id="{{ elementIdPrefix }}content-label"><?php esc_html_e( 'Content:', 'default' ); ?></label> 217 <textarea id="{{ elementIdPrefix }}content" aria-describedby="editor-keyboard-trap-help" class="widefat code content" rows="16" cols="20"></textarea> 218 218 </p> 219 219 220 220 <?php if ( ! current_user_can( 'unfiltered_html' ) ) : ?> … … 250 250 $content .= __( 'Use the Custom HTML widget to add arbitrary HTML code to your widget areas.' ); 251 251 $content .= '</p>'; 252 252 253 $content .= '<p>' . __( 'When using a keyboard to navigate:' ) . '</p>'; 254 $content .= '<ul>'; 255 $content .= '<li>' . __( 'In the HTML edit field, Tab enters a tab character.' ) . '</li>'; 256 $content .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.' ) . '</li>'; 257 $content .= '</ul>'; 253 $content .= '<p id="editor-keyboard-trap-help">'; 254 $content .= __( 'When using a keyboard: In the editing area the Tab key enters a tab character. To move away from this area by pressing Tab, press the Esc key followed by the Tab key. Screen reader users: you may need to press the Esc key twice to exit forms mode and then to allow the Tab key to move away from the editing area.' ); 255 $content .= '</p>'; 258 256 259 257 $content .= '<p>'; 260 258 $content .= sprintf( 261 259 /* translators: placeholder is link to user profile */ 262 __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in pla n text mode.' ),260 __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ), 263 261 sprintf( 264 262 ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>', 265 263 esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)