diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index d22368d637..2d67f34f9b 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3035,6 +3035,12 @@ img { height: calc( 100vh - 220px ); } +#template label { + display: inline-block; + margin-bottom: 1em; + font-weight: 600; +} + /* rtl:ignore */ #template textarea, #docs-list { diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index cc5a37f08c..f2f36739e5 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -550,12 +550,15 @@ p.customize-section-description { margin-top: 22px; margin-bottom: 0; } + .customize-section-description ul { margin-left: 1em; } + .customize-section-description ul > li { list-style: disc; } + .section-description-buttons { text-align: right; } @@ -1197,12 +1200,17 @@ p.customize-section-description { height: 500px; } +.customize-section-description-container + #customize-control-custom_css .customize-control-title { + margin-left: 12px; +} + .customize-section-description-container + #customize-control-custom_css:last-child textarea { border-right: 0; border-left: 0; height: calc( 100vh - 185px ); resize: none; } + .customize-section-description-container + #customize-control-custom_css:last-child { margin-left: -12px; width: 299px; @@ -1213,6 +1221,7 @@ p.customize-section-description { .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror { height: calc( 100vh - 185px ); } + .CodeMirror-lint-tooltip, .CodeMirror-hints { z-index: 500000 !important; @@ -1227,6 +1236,7 @@ p.customize-section-description { .customize-section-description-container + #customize-control-custom_css:last-child { margin-right: 0; } + .customize-section-description-container + #customize-control-custom_css:last-child textarea { height: calc( 100vh - 140px ); } diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 58f9cb07ac..a12ebe6e13 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -1176,7 +1176,7 @@ content = meta.find( '.customize-section-description:first' ); content.toggleClass( 'open' ); content.slideToggle(); - content.attr( 'aria-expanded', function ( i, attr ) { + $( this ).attr( 'aria-expanded', function( i, attr ) { return 'true' === attr ? 'false' : 'true'; }); }); @@ -1888,12 +1888,7 @@ meta = panel.container.find( '.panel-meta:first' ); - meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - event.preventDefault(); // Keep this AFTER the key filter above - + meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() { if ( meta.hasClass( 'cannot-expand' ) ) { return; } @@ -3781,6 +3776,20 @@ control.editor = wp.codeEditor.initialize( $textarea, settings ); + // Improve the editor accessibility. + $( control.editor.codemirror.display.lineDiv ) + .attr({ + role: 'textbox', + 'aria-multiline': 'true', + 'aria-label': control.params.label, + 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4' + }); + + // Focus the editor when clicking on its label. + control.container.find( 'label' ).on( 'click', function() { + control.editor.codemirror.focus(); + }); + /* * When the CodeMirror instance changes, mirror to the textarea, * where we have our "true" change event handler bound. @@ -5968,7 +5977,7 @@ }); }); - // Set up the section desription behaviors. + // Set up the section description behaviors. sectionReady.done( function setupSectionDescription( section ) { var control = api.control( 'custom_css' ); @@ -5976,16 +5985,20 @@ section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() { section.container.find( '.section-meta .customize-section-description:first' ) .removeClass( 'open' ) - .slideUp() - .attr( 'aria-expanded', 'false' ); + .slideUp(); + + section.container.find( '.customize-help-toggle' ) + .attr( 'aria-expanded', 'false' ) + .focus(); // Avoid focus loss. }); // Reveal help text if setting is empty. if ( control && ! control.setting.get() ) { section.container.find( '.section-meta .customize-section-description:first' ) .addClass( 'open' ) - .show() - .attr( 'aria-expanded', 'true' ); + .show(); + + section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' ); } }); })(); diff --git a/src/wp-admin/js/theme-plugin-editor.js b/src/wp-admin/js/theme-plugin-editor.js index f43363b0c7..8e016c3837 100644 --- a/src/wp-admin/js/theme-plugin-editor.js +++ b/src/wp-admin/js/theme-plugin-editor.js @@ -83,6 +83,20 @@ wp.themePluginEditor = (function( $ ) { editor = wp.codeEditor.initialize( $( '#newcontent' ), codeEditorSettings ); + // Improve the editor accessibility. + $( editor.codemirror.display.lineDiv ) + .attr({ + role: 'textbox', + 'aria-multiline': 'true', + 'aria-labelledby': 'theme-plugin-editor-label', + 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4' + }); + + // Focus the editor when clicking on its label. + $( '#theme-plugin-editor-label' ).on( 'click', function() { + editor.codemirror.focus(); + }); + component.instance = editor; }; diff --git a/src/wp-admin/js/widgets/custom-html-widgets.js b/src/wp-admin/js/widgets/custom-html-widgets.js index 5f49b79279..53be441eda 100644 --- a/src/wp-admin/js/widgets/custom-html-widgets.js +++ b/src/wp-admin/js/widgets/custom-html-widgets.js @@ -210,6 +210,21 @@ wp.customHtmlWidgets = ( function( $ ) { }); control.editor = wp.codeEditor.initialize( control.fields.content, settings ); + + // Improve the editor accessibility. + $( control.editor.codemirror.display.lineDiv ) + .attr({ + role: 'textbox', + 'aria-multiline': 'true', + 'aria-labelledby': control.fields.content[0].id + '-label', + 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4' + }); + + // Focus the editor when clicking on its label. + $( '#' + control.fields.content[0].id + '-label' ).on( 'click', function() { + control.editor.codemirror.focus(); + }); + control.fields.content.on( 'change', function() { if ( this.value !== control.editor.codemirror.getValue() ) { control.editor.codemirror.setValue( this.value ); diff --git a/src/wp-admin/plugin-editor.php b/src/wp-admin/plugin-editor.php index 239316ae2b..8925a5b8dd 100644 --- a/src/wp-admin/plugin-editor.php +++ b/src/wp-admin/plugin-editor.php @@ -195,7 +195,12 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) { '
' . __('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.') . '
' . '' . __('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.') . '
' . '' . __('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.') . '
' . - '' . __( '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.' ) . '
' . + '' . __( 'When using a keyboard to navigate:' ) . '
' . + '' . __('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.') . '
' . ( is_network_admin() ? '' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '
' : '' ) ) ); @@ -255,7 +260,8 @@ if ( isset( $_REQUEST['action'] ) && 'update' === $_REQUEST['action'] ) {