Accessibility: CodeMirror editing areas minor improvements.

- properly labels all the code editor areas (Theme/Plugin, Custom HTML widget, Additional CSS), whether CodeMirror is enabled or disabled
- adds `role="textbox"` and `aria-multiline="true"` to the CodeMirror editing area to allow assistive technologies properly identify it as a textarea
- standardizes the "keyboard trap" help text across the admin and keeps it as a list for better readability
- use the Help text elements as target for `aria-describedby`, to make screen readers read out the help text when focusing the editors
- fixes the `aria-expanded` attribute usage in the Customizer "Additional CSS" help toggle
- moves focus to the CodeMirror editing area when clicking on the associated label
- in the Plugin editor screen: changes a `<big>` element to `<h2>` for better semantics and consistency with the Theme editor screen
- also, removes a few textdomain leftovers, see `better-code-editing` and `default`

Props westonruter, melchoyce, afercia.
Fixes #41872.

Built from https://develop.svn.wordpress.org/trunk@41586


git-svn-id: http://core.svn.wordpress.org/trunk@41419 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2017-09-24 16:00:46 +00:00
parent 0170c40e24
commit d1948f623a
21 changed files with 185 additions and 81 deletions

View File

@@ -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 );
}