WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/24/2017 03:59:56 PM (4 years ago)
Author:
afercia
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php

    r41558 r41586  
    7272        $json['code_type'] = $this->code_type;
    7373        $json['editor_settings'] = $this->editor_settings;
     74        $json['input_attrs'] = $this->input_attrs;
    7475        return $json;
    7576    }
     
    99100        <# } #>
    100101        <div class="customize-control-notifications-container"></div>
    101         <textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
     102        <textarea id="{{ elementIdPrefix }}_editor"
     103            <# _.each( _.extend( { 'class': 'code' }, data.input_attrs ), function( value, key ) { #>
     104                {{{ key }}}="{{ value }}"
     105            <# }); #>
     106            ></textarea>
    102107        <?php
    103108    }
Note: See TracChangeset for help on using the changeset viewer.