WordPress.org
Get WordPress

Make WordPress Core

Changeset 22400


Ignore:
Timestamp:
11/06/2012 02:47:25 PM (12 years ago)
Author:
nacin
Message:

Keyboard accessibility for the theme customizer. props lessbloat, jorbin, JustinSainton. fixes #21283.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r22385 r22400  
    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;
    … …  
    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;
    … …  
    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;
    … …  
    156167}
    157168
     169#customize-footer-actions .button-primary,
    158170#customize-header-actions .button-primary {
    159171    float: right;
    … …  
    161173}
    162174
     175#customize-footer-actions .spinner,
    163176#customize-header-actions .spinner {
    164177    margin-top: 16px;
    … …  
    166179}
    167180
     181.saving #customize-footer-actions .spinner,
    168182.saving #customize-header-actions .spinner {
    169183    display: block;

  • trunk/wp-admin/css/wp-admin.css

    r22391 r22400  
    55725572}
    55735573
    5574 .wp-full-overlay-sidebar .wp-full-overlay-header,
    5575 .wp-full-overlay-sidebar .wp-full-overlay-footer {
     5574.wp-full-overlay-sidebar .wp-full-overlay-header {
    55765575    position: absolute;
    55775576    left: 0;
    … …  
    55825581    z-index: 10;
    55835582    margin: 0;
    5584 }
    5585 
    5586 .wp-full-overlay-sidebar .wp-full-overlay-header {
    5587     top: 0;
    5588     border-top: 0;
    5589     border-bottom: 1px solid #fff;
    5590     box-shadow: inset 0 -1px 0 0px #dfdfdf;
    55915583}
    55925584
    … …  
    56395631    width: 15px;
    56405632    height: 15px;
    5641     background: transparent url('../images/arrows.png') no-repeat 0 -72px;
     5633    background: transparent url('../images/arrows.png') no-repeat -1px -73px;
    56425634}
    56435635
    56445636.wp-full-overlay.collapsed .collapse-sidebar-arrow {
    5645     background-position: 0 -108px;
     5637    background-position: -1px -109px;
    56465638}
    56475639

  • trunk/wp-admin/customize.php

    r22019 r22400  
    6868<div class="wp-full-overlay expanded">
    6969    <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
     70       
    7071        <div id="customize-header-actions" class="wp-full-overlay-header">
    7172            <?php
    7273                $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
    73                 submit_button( $save_text, 'primary', 'save', false );
     74                submit_button( $save_text, 'primary save', 'save', false );
    7475            ?>
    7576            <span class="spinner"></span>
    … …  
    7879            </a>
    7980        </div>
    80 
     81       
    8182        <?php
    8283            $screenshot = $wp_customize->theme()->get_screenshot();
    … …  
    8485        ?>
    8586
    86         <div class="wp-full-overlay-sidebar-content">
     87        <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    8788            <div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
    88                 <div class="customize-section-title">
     89                <div class="customize-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
    8990                    <span class="preview-notice"><?php
    9091                        /* translators: %s is the theme name in the Customize/Live Preview pane */

  • trunk/wp-admin/js/customize-controls.js

    r22030 r22400  
    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
    … …  
    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 ];
    … …  
    226240
    227241            // Bind events to switch image urls.
    228             this.library.on( 'click', 'a', function( event ) {
     242            this.library.on( 'click keydown', 'a', function( event ) {
     243                if ( event.type === 'keydown' &&  13 !== event.which ) // enter
     244                    return;
     245
    229246                var value = $(this).data('customizeImageValue');
    230247
    … …  
    815832
    816833        // Temporary accordion code.
    817         $('.customize-section-title').click( function( event ) {
     834        var accordionFrozen = false;
     835        $('.customize-section-title').bind('click keydown', function( event ) {
     836           
     837            if ( event.type === 'keydown' &&  13 !== event.which ) // enter
     838                    return;
     839           
    818840            var clicked = $( this ).parents( '.customize-section' );
    819841
    820             if ( clicked.hasClass('cannot-expand') )
     842            if ( clicked.hasClass('cannot-expand') || accordionFrozen )
    821843                return;
     844           
     845            // Don't want to fire focus and click at same time
     846            accordionFrozen = true;
     847            setTimeout(function () {
     848                accordionFrozen = false;
     849            }, 400);
     850           
     851            // Scroll up if on #customize-section-title_tagline
     852            if ('customize-section-title_tagline' === clicked.attr('id'))
     853                $('.wp-full-overlay-sidebar-content').scrollTop(0);
    822854
    823855            $( '.customize-section' ).not( clicked ).removeClass( 'open' );
    … …  
    829861        $('#save').click( function( event ) {
    830862            previewer.save();
     863            event.preventDefault();
     864        }).keydown( function( event ) {
     865            if ( 9 === event.which ) // tab
     866                return;
     867            if ( 13 === event.which ) // enter
     868                previewer.save();
     869            event.preventDefault();
     870        });
     871       
     872        $('.back').keydown( function( event ) {
     873            if ( 9 === event.which ) // tab
     874                return;
     875            var thisHref = $(this).attr('href');
     876            if ( 13 === event.which ) // enter
     877                window.location = thisHref;
    831878            event.preventDefault();
    832879        });
    … …  
    949996
    950997        api.trigger( 'ready' );
     998
     999        // Make sure left column gets focus
     1000        var topFocus = $('.back');
     1001        topFocus.focus();
     1002        setTimeout(function () {
     1003            topFocus.focus();
     1004        }, 200);
     1005
    9511006    });
    9521007

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

    r22030 r22400  
    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 ) ): ?>
    … …  
    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>

  • trunk/wp-includes/class-wp-customize-section.php

    r21354 r22400  
    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
Note: See TracChangeset for help on using the changeset viewer.