WordPress.org

Make WordPress Core

Ticket #21283: 21283.6.diff

File 21283.6.diff, 9.7 KB (added by lessbloat, 6 years ago)
  • wp-includes/class-wp-customize-section.php

     
    8080        protected function render() {
    8181                ?>
    8282                <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
    83                         <h3 class="customize-section-title" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
     83                        <h3 class="customize-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
    8484                        <ul class="customize-section-content">
    8585                                <?php
    8686                                foreach ( $this->controls as $control )
  • wp-includes/class-wp-customize-control.php

     
    521521                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    522522
    523523                        <div class="customize-control-content">
    524                                 <div class="dropdown preview-thumbnail">
     524                                <div class="dropdown preview-thumbnail" tabindex="0">
    525525                                        <div class="dropdown-content">
    526526                                                <?php if ( empty( $src ) ): ?>
    527527                                                        <img style="display:none;" />
     
    537537                        <div class="library">
    538538                                <ul>
    539539                                        <?php foreach ( $this->tabs as $id => $tab ): ?>
    540                                                 <li data-customize-tab='<?php echo esc_attr( $id ); ?>'>
     540                                                <li data-customize-tab='<?php echo esc_attr( $id ); ?>' tabindex='0'>
    541541                                                        <?php echo esc_html( $tab['label'] ); ?>
    542542                                                </li>
    543543                                        <?php endforeach; ?>
  • wp-admin/customize.php

     
    6767<body class="<?php echo esc_attr( $body_class ); ?>">
    6868<div class="wp-full-overlay expanded">
    6969        <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
    70                 <div id="customize-header-actions" class="wp-full-overlay-header">
    71                         <?php
    72                                 $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
    73                                 submit_button( $save_text, 'primary', 'save', false );
    74                         ?>
    75                         <span class="spinner"></span>
    76                         <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
    77                                 <?php _e( 'Cancel' ); ?>
    78                         </a>
    79                 </div>
    8070
    8171                <?php
    8272                        $screenshot = $wp_customize->theme()->get_screenshot();
    8373                        $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
    8474                ?>
    8575
    86                 <div class="wp-full-overlay-sidebar-content">
     76                <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    8777                        <div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
    88                                 <div class="customize-section-title">
     78                                <div class="customize-section-title" aria-label="Theme Customizer Options" tabindex="0">
    8979                                        <span class="preview-notice"><?php
    9080                                                /* translators: %s is the theme name in the Customize/Live Preview pane */
    9181                                                echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
     
    113103                </div>
    114104
    115105                <div id="customize-footer-actions" class="wp-full-overlay-footer">
     106                        <?php
     107                                $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
     108                                submit_button( $save_text, 'primary save', 'save', false );
     109                        ?>
     110                        <span class="spinner"></span>
     111                        <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
     112                                <?php _e( 'Cancel' ); ?>
     113                        </a>
     114                       
    116115                        <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
    117116                                <span class="collapse-sidebar-arrow"></span>
    118117                                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
  • wp-admin/js/customize-controls.js

     
    9494                                        else
    9595                                                statuses.hide();
    9696                                };
    97 
     97                       
     98                        var toggleFreeze = false;
     99                       
    98100                        // Support the .dropdown class to open/close complex elements
    99                         this.container.on( 'click', '.dropdown', function( event ) {
     101                        this.container.on( 'click focus', '.dropdown', function( event ) {
    100102                                event.preventDefault();
    101                                 control.container.toggleClass('open');
     103                               
     104                                if (!toggleFreeze)
     105                                        control.container.toggleClass('open');
     106                               
     107                                // Don't want to fire focus and click at same time
     108                                toggleFreeze = true;
     109                                setTimeout(function () {
     110                                        toggleFreeze = false;
     111                                }, 400);
    102112                        });
    103113
    104114                        this.setting.bind( update );
     
    210220                        });
    211221
    212222                        // Bind tab switch events
    213                         this.library.children('ul').on( 'click', 'li', function( event ) {
     223                        this.library.children('ul').on( 'click keydown', 'li', function( event ) {
     224                               
     225                                if ( event.type === 'keydown' &&  13 !== event.which )
     226                                        return;
     227                               
    214228                                var id  = $(this).data('customizeTab'),
    215229                                        tab = control.tabs[ id ];
    216230
     
    774788                                activated = state.create('activated');
    775789
    776790                        state.bind( 'change', function() {
    777                                 var save = $('#save'),
     791                                var save = $('.save'),
    778792                                        back = $('.back');
    779793
    780794                                if ( ! activated() ) {
     
    814828                }());
    815829
    816830                // Temporary accordion code.
    817                 $('.customize-section-title').click( function( event ) {
     831                var accordianFrozen = false;
     832                $('.customize-section-title').bind('click keydown', function( event ) {
     833                       
     834                        if ( event.type === 'keydown' &&  13 !== event.which ) // enter
     835                                        return;
     836                       
    818837                        var clicked = $( this ).parents( '.customize-section' );
    819838
    820                         if ( clicked.hasClass('cannot-expand') )
     839                        if ( clicked.hasClass('cannot-expand') || accordianFrozen )
    821840                                return;
     841                       
     842                        // Don't want to fire focus and click at same time
     843                        accordianFrozen = true;
     844                        setTimeout(function () {
     845                                accordianFrozen = false;
     846                        }, 400);
     847                       
     848                        // Scroll up if on #customize-section-title_tagline
     849                        if ('customize-section-title_tagline' === clicked.attr('id'))
     850                                $('.wp-full-overlay-sidebar-content').scrollTop(0);
    822851
    823852                        $( '.customize-section' ).not( clicked ).removeClass( 'open' );
    824853                        clicked.toggleClass( 'open' );
     
    826855                });
    827856
    828857                // Button bindings.
    829                 $('#save').click( function( event ) {
     858                $('.save').click( function( event ) {
    830859                        previewer.save();
    831860                        event.preventDefault();
     861                }).keydown( function( event ) {
     862                        if ( 9 === event.which ) // tab
     863                                return;
     864                        if ( 13 === event.which ) // enter
     865                                previewer.save();
     866                        event.preventDefault();
    832867                });
     868               
     869                $('.back').keydown( function( event ) {
     870                        if ( 9 === event.which ) // tab
     871                                return;
     872                        var thisHref = $(this).attr('href');
     873                        if ( 13 === event.which ) // enter
     874                                window.location = thisHref;
     875                        event.preventDefault();
     876                });
    833877
    834878                $('.collapse-sidebar').click( function( event ) {
    835879                        overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
     
    948992                });
    949993
    950994                api.trigger( 'ready' );
     995
     996                // Make sure left column gets focus
     997                var topFocus = $('#customize-info .customize-section-title');
     998                topFocus.focus();
     999                setTimeout(function () {
     1000                        topFocus.focus();
     1001                }, 200);
     1002
    9511003        });
    9521004
    9531005})( wp, jQuery );
     1006 No newline at end of file
  • wp-admin/css/wp-admin.css

     
    54435443        height: 100%;
    54445444}
    54455445
    5446 .wp-full-overlay-sidebar .wp-full-overlay-header,
    54475446.wp-full-overlay-sidebar .wp-full-overlay-footer {
    54485447        position: absolute;
    54495448        left: 0;
    54505449        right: 0;
    5451         height: 45px;
     5450        height: 80px;
    54525451        padding: 0 20px;
    54535452        line-height: 45px;
    54545453        z-index: 10;
    54555454        margin: 0;
    54565455}
    54575456
    5458 .wp-full-overlay-sidebar .wp-full-overlay-header {
    5459         top: 0;
    5460         border-top: 0;
    5461         border-bottom: 1px solid #fff;
    5462         box-shadow: inset 0 -1px 0 0px #dfdfdf;
    5463 }
    5464 
    54655457.wp-full-overlay-sidebar .wp-full-overlay-footer {
    54665458        bottom: 0;
    54675459        border-bottom: 0;
     
    54715463
    54725464.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
    54735465        position: absolute;
    5474         top: 45px;
    5475         bottom: 45px;
     5466        top: 0;
     5467        bottom: 80px;
    54765468        left: 0;
    54775469        right: 0;
    54785470        overflow: auto;
  • wp-admin/css/customize-controls.css

     
    6767
    6868.control-section:hover .customize-section-title,
    6969.control-section .customize-section-title:hover,
    70 .control-section.open .customize-section-title {
     70.control-section.open .customize-section-title,
     71.customize-section-title:focus {
    7172        color: #fff;
    7273        text-shadow: 0 -1px 0 #333;
    7374        background: #808080;
     
    126127        color: #999;
    127128}
    128129
     130#customize-info .customize-section-title:focus .preview-notice {
     131        color: #ccc;
     132        text-shadow: 0 -1px 0 #333;
     133}
     134
    129135#customize-info .theme-name {
    130136        font-size: 20px;
    131137        font-weight: 200;
     
    135141        text-shadow: 0 1px 0 #fff;
    136142}
    137143
     144#customize-info .customize-section-title:focus .theme-name {
     145        color: #fff;
     146        text-shadow: 0 -1px 0 #333;
     147}
     148
    138149#customize-info .theme-screenshot {
    139150        width: 258px;
    140151        border: 1px solid #ccc;
     
    155166        margin: 0;
    156167}
    157168
     169#customize-footer-actions .button-primary,
    158170#customize-header-actions .button-primary {
    159171        float: right;
    160172        margin-top: 10px;
    161173}
    162174
     175#customize-footer-actions .spinner,
    163176#customize-header-actions .spinner {
    164177        margin-top: 16px;
    165178        margin-right: 4px;
    166179}
    167180
     181.saving #customize-footer-actions .spinner,
    168182.saving #customize-header-actions .spinner {
    169183        display: block;
    170184}