WordPress.org

Make WordPress Core

Changeset 35427


Ignore:
Timestamp:
10/28/2015 11:07:08 PM (6 years ago)
Author:
afercia
Message:

Media: Improve the headings hierarchy in the Media Views for better accessibility.

Fixes #34273.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/media.css

    r34011 r35427  
    501501}
    502502
    503 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
     503.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
     504.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
    504505    display: none;
    505506}
     
    10181019}
    10191020
    1020 #poststuff .imgedit-group-top h3 {
     1021#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
     1022#poststuff .imgedit-group-top h2 {
     1023    margin: 0;
    10211024    padding: 0;
    1022 }
    1023 
    1024 .imgedit-group-top h3 a {
     1025    font-size: 14px;
     1026    line-height: 1.4;
     1027}
     1028
     1029.imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
     1030.imgedit-group-top h2 a {
    10251031    text-decoration: none;
    10261032}
  • trunk/src/wp-admin/includes/image-edit.php

    r34234 r35427  
    4747    <div class="imgedit-group">
    4848    <div class="imgedit-group-top">
    49         <h3><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     49        <h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
    5050        <div class="imgedit-help">
    5151        <p><?php _e('You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.'); ?></p>
     
    6666    <div class="imgedit-group">
    6767    <div class="imgedit-group-top">
    68         <h3><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h3>
     68        <h2><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>
    6969        <div class="imgedit-help">
    7070        <p><?php _e('Discard any changes and restore the original image.');
     
    8585    <div class="imgedit-group">
    8686    <div class="imgedit-group-top">
    87         <h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     87        <h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
    8888
    8989        <div class="imgedit-help">
     
    123123    <div class="imgedit-group imgedit-applyto">
    124124    <div class="imgedit-group-top">
    125         <h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     125        <h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
    126126        <p class="imgedit-help"><?php _e('You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.'); ?></p>
    127127    </div>
  • trunk/src/wp-includes/css/media-views.css

    r35330 r35427  
    299299}
    300300
    301 .media-sidebar h3,
    302 .image-details h3 {
     301.media-sidebar h3, /* Back-compat for pre-4.4 */
     302.image-details h3, /* Back-compat for pre-4.4 */
     303.media-sidebar h2,
     304.image-details h2 {
    303305    position: relative;
    304306    font-weight: bold;
     
    11761178}
    11771179
    1178 .uploader-inline .media-uploader-status h3 {
     1180.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
     1181.uploader-inline .media-uploader-status h2 {
    11791182    display: none;
    11801183}
     
    12671270}
    12681271
    1269 .uploader-window h3 {
     1272.uploader-window h3, /* Back-compat for pre-4.4 */
     1273.uploader-window h1 {
    12701274    margin: -0.5em 0 0;
    12711275    position: absolute;
     
    13221326}
    13231327
    1324 .uploader-inline h3 {
     1328.uploader-inline h3, /* Back-compat for pre-4.4 */
     1329.uploader-inline h2 {
    13251330    font-size: 20px;
    13261331    line-height: 28px;
     
    17411746}
    17421747
    1743 .media-modal .imgedit-group-top h3 {
     1748.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
     1749.media-modal .imgedit-group-top h2 {
    17441750    text-transform: uppercase;
    17451751    font-size: 12px;
     
    17491755}
    17501756
    1751 .media-modal .imgedit-group-top h3 a {
     1757.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
     1758.media-modal .imgedit-group-top h2 a {
    17521759    text-decoration: none;
    17531760    color: #666;
     
    18791886}
    18801887
    1881 .image-details .column-settings h3 {
     1888.image-details .column-settings h3, /* Back-compat for pre-4.4 */
     1889.image-details .column-settings h2 {
    18821890    margin: 20px;
    18831891    padding-top: 20px;
    18841892    border-top: 1px solid #ddd;
     1893    color: #23282d;
    18851894}
    18861895
  • trunk/src/wp-includes/media-template.php

    r35341 r35427  
    172172    <script type="text/html" id="tmpl-uploader-window">
    173173        <div class="uploader-window-content">
    174             <h3><?php _e( 'Drop files to upload' ); ?></h3>
     174            <h1><?php _e( 'Drop files to upload' ); ?></h1>
    175175        </div>
    176176    </script>
     
    189189        <div class="uploader-inline-content {{ messageClass }}">
    190190        <# if ( data.message ) { #>
    191             <h3 class="upload-message">{{ data.message }}</h3>
     191            <h2 class="upload-message">{{ data.message }}</h2>
    192192        <# } #>
    193         <?php if ( ! _device_can_upload() ) : ?>
    194             <h3 class="upload-instructions"><?php printf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'https://apps.wordpress.org/' ); ?></h3>
    195         <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
    196             <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
     193
     194            <h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
     195        <?php if ( is_multisite() && ! is_upload_space_available() ) : ?>
     196            <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
    197197            <?php
    198198            /** This action is documented in wp-admin/includes/media.php */
     
    201201        <?php else : ?>
    202202            <div class="upload-ui">
    203                 <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
     203                <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
    204204                <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
    205205                <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
     
    258258
    259259    <script type="text/html" id="tmpl-uploader-status">
    260         <h3><?php _e( 'Uploading' ); ?></h3>
     260        <h2><?php _e( 'Uploading' ); ?></h2>
    261261        <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
    262262
     
    491491
    492492    <script type="text/html" id="tmpl-attachment-details">
    493         <h3>
    494             <?php _e('Attachment Details'); ?>
    495 
     493        <h2>
     494            <?php _e( 'Attachment Details' ); ?>
    496495            <span class="settings-save-status">
    497496                <span class="spinner"></span>
    498497                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
    499498            </span>
    500         </h3>
     499        </h2>
    501500        <div class="attachment-info">
    502501            <div class="thumbnail thumbnail-{{ data.type }}">
     
    600599
    601600    <script type="text/html" id="tmpl-attachment-display-settings">
    602         <h3><?php _e('Attachment Display Settings'); ?></h3>
     601        <h2><?php _e( 'Attachment Display Settings' ); ?></h2>
    603602
    604603        <# if ( 'image' === data.type ) { #>
     
    707706
    708707    <script type="text/html" id="tmpl-gallery-settings">
    709         <h3><?php _e('Gallery Settings'); ?></h3>
     708        <h2><?php _e( 'Gallery Settings' ); ?></h2>
    710709
    711710        <label class="setting">
     
    777776
    778777    <script type="text/html" id="tmpl-playlist-settings">
    779         <h3><?php _e( 'Playlist Settings' ); ?></h3>
     778        <h2><?php _e( 'Playlist Settings' ); ?></h2>
    780779
    781780        <# var emptyModel = _.isEmpty( data.model ),
     
    904903                    </label>
    905904
    906                     <h3><?php _e( 'Display Settings' ); ?></h3>
     905                    <h2><?php _e( 'Display Settings' ); ?></h2>
    907906                    <div class="setting align">
    908907                        <span><?php _e('Align'); ?></span>
     
    986985                    </div>
    987986                    <div class="advanced-section">
    988                         <h3><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h3>
     987                        <h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
    989988                        <div class="advanced-settings hidden">
    990989                            <div class="advanced-image">
Note: See TracChangeset for help on using the changeset viewer.