WordPress.org
Get WordPress

Make WordPress Core

Changeset 27947


Ignore:
Timestamp:
04/04/2014 03:48:34 PM (11 years ago)
Author:
nacin
Message:

Header images: Accessibility and style improvements. Headers no longer jump around when chosen.

props mcsf, ehg.
see #21785.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-controls.css

    r27856 r27947  
    466466}
    467467
     468#customize-control-header_image .uploaded button,
     469#customize-control-header_image .default button {
     470    width: 100%;
     471    padding: 0;
     472    margin: 0;
     473    background: none;
     474    border: none;
     475    color: inherit;
     476    cursor: pointer;
     477    outline: none;
     478}
     479
     480#customize-control-header_image button img {
     481    display: block;
     482}
     483
    468484/* Header control: current image container */
    469485
    … …  
    471487    overflow: hidden;
    472488    -webkit-border-radius: 2px;
     489    border: 1px solid #eee;
    473490    border-radius: 2px;
    474491}
    … …  
    477494    width: 100%;
    478495    position: relative;
    479     background: #262626;
    480496    text-align: center;
    481497    cursor: default;
    … …  
    486502    position: absolute;
    487503    width: 100%;
    488     height: 18px;
    489     margin-top: -9px;
    490     top: 50%;
    491     color: #eee;
     504    color: #555;
     505    white-space: nowrap;
     506    text-overflow: ellipsis;
     507    overflow: hidden;
     508}
     509
     510#customize-control-header_image .inner,
     511#customize-control-header_image .inner .dashicons {
     512    line-height: 20px;
     513    top: 10px;
     514}
     515#customize-control-header_image .list .inner,
     516#customize-control-header_image .list .inner .dashicons {
     517    top: 9px;
     518}
     519
     520#customize-control-header_image .header-view {
     521    position: relative;
     522    width: 100%;
     523    margin-bottom: 5px;
     524}
     525
     526#customize-control-header_image .header-view:last-child {
     527    margin-bottom: 0px;
     528}
     529
     530/* Convoluted, but 'outline' support isn't good enough yet */
     531#customize-control-header_image .header-view:after {
     532    border: 0;
     533}
     534#customize-control-header_image .header-view.selected:after {
     535    content: '';
     536    position: absolute;
     537    top: 0; left: 0; bottom: 0; right: 0;
     538    border: 4px solid #2ea2cc;
     539    border-radius: 2px;
     540}
     541#customize-control-header_image .header-view.button.selected {
     542    border: 0;
    492543}
    493544
    494545/* Header control: overlay "close" button */
    495 
    496 #customize-control-header_image .header-view {
    497     position: relative;
    498 }
    499546
    500547#customize-control-header_image .uploaded .header-view .close {
    … …  
    576623}
    577624
    578 #customize-control-header_image .choice.random:before {
    579     position: absolute;
    580     content: attr(data-label);
    581     left: 0;
    582     top: 0;
    583 }
    584 
    585625#customize-control-header_image .uploaded div:last-child > .choice {
    586626    margin-bottom: 0;
    587 }
    588 
    589 #customize-control-header_image .choices hr {
    590     visibility: hidden;
    591627}
    592628

  • trunk/src/wp-admin/custom-header.php

    r27849 r27947  
    12731273        $header_images = get_uploaded_header_images();
    12741274        $timestamp_key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
     1275        $alt_text_key = '_wp_attachment_image_alt';
    12751276
    12761277        foreach ( $header_images as &$header_image ) {
    1277             $header_image['timestamp'] = get_post_meta( $header_image['attachment_id'], $timestamp_key, true );
     1278            $header_meta = get_post_meta( $header_image['attachment_id'] );
     1279            $header_image['timestamp'] = isset( $header_meta[ $timestamp_key ] ) ? $header_meta[ $timestamp_key ] : '';
     1280            $header_image['alt_text'] = isset( $header_meta[ $alt_text_key ] ) ? $header_meta[ $alt_text_key ] : '';
    12781281        }
    12791282

  • trunk/src/wp-includes/class-wp-customize-control.php

    r27945 r27947  
    775775            <div class="placeholder random">
    776776                <div class="inner">
    777                     <span><span class="dashicons dashicons-randomize dice"></span>
     777                    <button type="button"><span class="dashicons dashicons-randomize dice"></span>
    778778                    <# if ( data.type === 'uploaded' ) { #>
    779779                        <?php _e( 'Randomize uploaded headers' ); ?>
    … …  
    781781                        <?php _e( 'Randomize suggested headers' ); ?>
    782782                    <# } #>
    783                     </span>
     783                    </button>
    784784                </div>
    785785            </div>
    … …  
    788788
    789789            <# if (data.type === 'uploaded') { #>
    790             <div class="dashicons dashicons-no close"></div>
     790                <div class="dashicons dashicons-no close"></div>
    791791            <# } #>
    792792
    793             <a href="#" class="choice thumbnail #>"
     793            <button type="button" class="choice thumbnail"
    794794                data-customize-image-value="{{{data.header.url}}}"
    795795                data-customize-header-image-data="{{JSON.stringify(data.header)}}">
    796                 <img src="{{{data.header.thumbnail_url}}}">
    797             </a>
     796                <span class="screen-reader-text"><?php _e( 'Set image' ); ?></span>
     797                <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
     798            </button>
    798799
    799800            <# } #>
    … …  
    804805                <# if (data.random) { #>
    805806
    806             <div class="placeholder">
     807            <div class="placeholder" tabindex="0">
    807808                <div class="inner">
    808809                    <span><span class="dashicons dashicons-randomize dice"></span>
    … …  
    818819                <# } else { #>
    819820
    820             <img src="{{{data.header.thumbnail_url}}}" />
     821            <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" tabindex="0"/>
    821822
    822823                <# } #>
    823824            <# } else { #>
    824825
    825             <div class="placeholder">
     826            <div class="placeholder" tabindex="0">
    826827                <div class="inner">
    827828                    <span>
    … …  
    854855
    855856        <div class="customize-control-content">
    856             <p class="customizer-section-intro">
     857            <p class="customizer-section-intro" tabindex="0">
    857858                <?php
    858859                // @todo translate (and look to custom-header.php for inspiration)
    … …  
    868869            </p>
    869870            <div class="current">
    870                 <span class="customize-control-title">
     871                <span class="customize-control-title" tabindex="0">
    871872                    <?php _e( 'Current header' ); ?>
    872873                </span>
    … …  
    876877            <div class="actions">
    877878                <?php /* translators: Hide as in hide header image via the Customizer */ ?>
    878                 <a href="#" <?php echo $visibility ?> class="button remove"><?php _ex( 'Hide', 'custom header' ); ?></a>
     879                <button type="button"<?php echo $visibility ?> class="button remove"><?php _ex( 'Hide image', 'custom header' ); ?></button>
    879880                <?php /* translators: New as in add new header image via the Customizer */ ?>
    880                 <a href="#" class="button new"><?php _ex( 'Add new', 'header image' ); ?></a>
     881                <button type="button" class="button new"><?php _ex( 'Add new image', 'header image' ); ?></button>
    881882                <div style="clear:both"></div>
    882883            </div>
    883884            <div class="choices">
    884                 <span class="customize-control-title header-previously-uploaded">
     885                <span class="customize-control-title header-previously-uploaded" tabindex="0">
    885886                    <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
    886887                </span>
    … …  
    889890                    </div>
    890891                </div>
    891                 <span class="customize-control-title header-default">
     892                <span class="customize-control-title header-default" tabindex="0">
    892893                    <?php _ex( 'Suggested', 'custom headers' ); ?>
    893894                </span>

  • trunk/src/wp-includes/js/customize-models.js

    r27651 r27947  
    2727                },
    2828                choice: '',
    29                 hidden: false,
     29                selected: false,
    3030                random: false
    3131            };
    … …  
    161161                }
    162162
     163                if (typeof elt.timestamp === 'undefined') {
     164                    elt.timestamp = 0;
     165                }
     166
    163167                this.add({
    164168                    header: elt,
    165169                    choice: elt.url.split('/').pop(),
    166                     hidden: current === elt.url.replace(/^https?:\/\//, '')
     170                    selected: current === elt.url.replace(/^https?:\/\//, '')
    167171                }, { silent: true });
    168172            }, this);
    … …  
    192196                choice: randomChoice,
    193197                random: true,
    194                 hidden: isRandomSameType
     198                selected: isRandomSameType
    195199            });
    196200        },
    … …  
    201205
    202206        shouldHideTitle: function() {
    203             return _.every(this.pluck('hidden'));
     207            return this.size() < 2;
    204208        },
    205209
    206210        setImage: function(model) {
    207211            this.each(function(m) {
    208                 m.set('hidden', false);
     212                m.set('selected', false);
    209213            });
    210214
    211215            if (model) {
    212                 model.set('hidden', true);
    213                 // Bump images to top except for special "Randomize" images
    214                 if (!model.get('random')) {
    215                     model.get('header').timestamp = _.now();
    216                     this.sort();
    217                 }
     216                model.set('selected', true);
    218217            }
    219218        },
    … …  
    221220        removeImage: function() {
    222221            this.each(function(m) {
    223                 m.set('hidden', false);
    224             });
    225         },
    226 
    227         shown: function() {
    228             var filtered = this.where({ hidden: false });
    229             return new api.HeaderTool.ChoiceList( filtered );
     222                m.set('selected', false);
     223            });
    230224        }
    231225    });

  • trunk/src/wp-includes/js/customize-views.js

    r27693 r27947  
    3333        getHeight: function() {
    3434            var image = this.$el.find('img'),
    35                 saved = this.model.get('savedHeight'),
    36                 height = image.height() || saved,
    37                 headerImageData;
     35                saved, height, headerImageData;
    3836
    3937            if (image.length) {
    … …  
    4139            } else {
    4240                this.$el.find('.inner').show();
    43             }
     41                return 40;
     42            }
     43
     44            saved = this.model.get('savedHeight');
     45            height = image.height() || saved;
    4446
    4547            // happens at ready
    … …  
    9395     * @augments wp.Backbone.View
    9496     */
    95     (function () { // closures FTW
    96     var lastHeight = 0;
    9797    api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
    9898        template: wp.template('header-choice'),
    … …  
    111111            ];
    112112
    113             this.listenTo(this.model, 'change', this.render);
     113            this.listenTo(this.model, 'change:selected', this.toggleSelected);
    114114
    115115            if (_.contains(properties, api.get().header_image)) {
    … …  
    119119
    120120        render: function() {
    121             var model = this.model;
    122 
    123121            this.$el.html(this.template(this.extendedModel()));
    124122
    125             if (model.get('random')) {
     123            if (this.model.get('random')) {
     124                this.$el.addClass('button display-options');
    126125                this.setPlaceholder(40);
    127126            }
    128             else {
    129                 lastHeight = this.getHeight();
    130             }
    131 
    132             this.$el.toggleClass('hidden', model.get('hidden'));
     127
     128            this.toggleSelected();
    133129            return this;
     130        },
     131
     132        toggleSelected: function() {
     133            this.$el.toggleClass('selected', this.model.get('selected'));
    134134        },
    135135
    … …  
    146146
    147147        select: function() {
     148            this.preventJump();
    148149            this.model.save();
    149150            api.HeaderTool.currentHeader.set(this.extendedModel());
     151        },
     152
     153        preventJump: function() {
     154            var container = $('.wp-full-overlay-sidebar-content'),
     155                scroll = container.scrollTop();
     156
     157            _.defer(function() {
     158                container.scrollTop(scroll);
     159            });
    150160        },
    151161
    … …  
    156166        }
    157167    });
    158     })();
    159168
    160169
    … …  
    175184            this.listenTo(this.collection, 'remove', this.render);
    176185            this.listenTo(this.collection, 'sort', this.render);
    177             this.listenTo(this.collection, 'change:hidden', this.toggleTitle);
    178             this.listenTo(this.collection, 'change:hidden', this.setMaxListHeight);
     186            this.listenTo(this.collection, 'change', this.toggleList);
    179187            this.render();
    180188        },
    … …  
    183191            this.$el.empty();
    184192            this.collection.each(this.addOne, this);
    185             this.toggleTitle();
     193            this.toggleList();
    186194        },
    187195
    … …  
    193201        },
    194202
    195         toggleTitle: function() {
    196             var title = this.$el.parents().prev('.customize-control-title');
     203        toggleList: function() {
     204            var title = this.$el.parents().prev('.customize-control-title'),
     205                randomButton = this.$el.find('.random').parent();
    197206            if (this.collection.shouldHideTitle()) {
    198                 title.hide();
     207                title.add(randomButton).hide();
    199208            } else {
    200                 title.show();
     209                title.add(randomButton).show();
    201210            }
    202211        }
Note: See TracChangeset for help on using the changeset viewer.