WordPress.org
Get WordPress

Make WordPress Core

Changeset 35304


Ignore:
Timestamp:
10/20/2015 08:14:51 PM (11 years ago)
Author:
afercia
Message:

Customizer: Make the widgets "Reorder" and "Add a Widget" buttons... buttons.

For accessibility, UI controls should preferably be native controls. Adds
ARIA attributes and labels to improve accessibility and pair these buttons
with the ones in the Menu Customizer.

Props obenland, TomHarrigan, sanket.parmar, metodiew, afercia.

Fixes #33327.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r35231 r35304  
    616616/* Style for custom settings */
    617617
    618 /*
     618/**
    619619 * Dropdowns
    620620 */
     621
    621622.accordion-section .dropdown {
    622623        float: left;
    … …  
    699700 * instead it expands the iframe size to match the size of the content
    700701 */
     702
    701703.ios .wp-full-overlay {
    702704        position: relative;
    … …  
    711713}
    712714
    713 /** Media controls **/
     715/* Media controls */
    714716
    715717.customize-control-media .current,
    … …  
    996998 * Themes
    997999 */
     1000
    9981001@-webkit-keyframes customize-reload {
    9991002        0%   { opacity: 0; }
    … …  
    12271230        line-height: 1.5;
    12281231        margin: 25px 0 20px;
     1232}
     1233
     1234/**
     1235 * Widgets and Menus common styles
     1236 */
     1237
     1238/* higher specificity than .wp-core-ui .button-secondary */
     1239#customize-theme-controls .add-new-widget,
     1240#customize-theme-controls .add-new-menu-item {
     1241        cursor: pointer;
     1242        float: right;
     1243        margin-left: 10px;
     1244        -webkit-transition: all 0.2s;
     1245        transition: all 0.2s;
     1246        -webkit-user-select: none;
     1247        -moz-user-select: none;
     1248        -ms-user-select: none;
     1249        user-select: none;
     1250        outline: none;
     1251}
     1252
     1253.reordering .add-new-widget,
     1254.reordering .add-new-menu-item {
     1255        opacity: 0.2;
     1256        pointer-events: none;
     1257        cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
     1258}
     1259
     1260.add-new-widget:before,
     1261.add-new-menu-item:before {
     1262        content: "\f132";
     1263        display: inline-block;
     1264        position: relative;
     1265        left: -2px;
     1266        top: -1px;
     1267        font: normal 20px/1 dashicons;
     1268        vertical-align: middle;
     1269        -webkit-transition: all 0.2s;
     1270        transition: all 0.2s;
     1271        -webkit-font-smoothing: antialiased;
     1272        -moz-osx-font-smoothing: grayscale;
     1273}
     1274
     1275/* Reordering */
     1276.reorder-toggle {
     1277        float: right;
     1278        padding: 5px 8px;
     1279        text-decoration: none;
     1280        cursor: pointer;
     1281        outline: none;
     1282        -webkit-user-select: none;
     1283        -moz-user-select: none;
     1284        -ms-user-select: none;
     1285        user-select: none;
     1286}
     1287
     1288.reorder-toggle:focus {
     1289        outline: 1px dotted;
     1290}
     1291
     1292.reorder,
     1293.reordering .reorder-done {
     1294        display: block;
     1295        padding: 5px 8px;
     1296}
     1297
     1298.reorder-done,
     1299.reordering .reorder {
     1300        display: none;
     1301        color: #0073aa;
     1302}
     1303
     1304.reorder-toggle:hover .reorder-done,
     1305.reorder-toggle:active .reorder-done,
     1306.reorder-toggle:focus .reorder-done {
     1307        color: #00a0d2;
    12291308}
    12301309

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r35215 r35304  
    9191}
    9292
    93 /* Menu-item reordering nav. */
    94 .reordering .customize-control-nav_menu .reorder,
    95 .customize-control-nav_menu .reorder-done {
    96         display: none;
    97 }
    98 
    99 .customize-control-nav_menu .reorder,
    100 .reordering .customize-control-nav_menu .reorder-done {
    101         display: inline-block;
    102         padding: 5px 8px;
    103 }
     93/**
     94 * Menu items reordering styles
     95 */
    10496
    10597.menu-item-reorder-nav {
    … …  
    109101        top: 0;
    110102        right: 0;
    111 }
    112 
    113 #customize-theme-controls .reordering .add-new-menu-item {
    114         opacity: 0.2;
    115         pointer-events: none;
    116         cursor: not-allowed;
    117103}
    118104
    … …  
    362348.wp-customizer button:focus .toggle-indicator:after {
    363349        -webkit-box-shadow:
    364         0 0 0 1px #5b9dd9,
     350                0 0 0 1px #5b9dd9,
    365351                0 0 2px 1px rgba(30, 140, 190, .8);
    366     box-shadow:
    367         0 0 0 1px #5b9dd9,
     352        box-shadow:
     353                0 0 0 1px #5b9dd9,
    368354                0 0 2px 1px rgba(30, 140, 190, .8);
    369355}
    … …  
    480466}
    481467
    482 /*
    483  * Add-menu-items mode.
     468/**
     469 * Add-menu-items mode
    484470 */
     471
    485472.wp-full-overlay-main {
    486473        right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
    … …  
    495482.adding-menu-items .control-section.open {
    496483        opacity: 1;
    497 }
    498 
    499 /* Add-new button. */
    500 #customize-theme-controls .add-new-menu-item {
    501         cursor: pointer;
    502         float: right;
    503         margin-left: 10px;
    504         -webkit-transition: all 0.2s;
    505         transition: all 0.2s;
    506         -webkit-user-select: none;
    507         -moz-user-select: none;
    508         -ms-user-select: none;
    509         user-select: none;
    510         outline: none;
    511 }
    512 
    513 .add-new-menu-item:before {
    514         content: "\f132";
    515         display: inline-block;
    516         position: relative;
    517         left: -2px;
    518         top: -1px;
    519         font: normal 20px/1 dashicons;
    520         vertical-align: middle;
    521         -webkit-transition: all 0.2s;
    522         transition: all 0.2s;
    523         -webkit-font-smoothing: antialiased;
    524         -moz-osx-font-smoothing: grayscale;
    525484}
    526485

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

    r35207 r35304  
    118118
    119119/**
    120 * Widget reordering styles
    121 **/
    122 
    123 .reorder-toggle {
    124         float: right;
    125         padding: 5px 8px;
    126         text-decoration: none;
    127         cursor: pointer;
    128         outline: none;
    129         -webkit-user-select: none;
    130         -moz-user-select: none;
    131         -ms-user-select: none;
    132         user-select: none;
    133 }
    134 .reorder-toggle:focus {
    135         outline: 1px dotted;
    136 }
    137 
    138 .reorder-done,
    139 .reordering .reorder {
    140         display: none;
    141 }
    142 
    143 .reordering .reorder-done {
    144         display: block;
    145         color: #0073aa;
    146 }
    147 
    148 .reordering .reorder-done:hover,
    149 .reordering .reorder-done:active {
    150         color: #00a0d2;
    151 }
    152 
    153 #customize-theme-controls .reordering .add-new-widget {
    154         opacity: 0.2;
    155         pointer-events: none;
    156         cursor: not-allowed;
    157 }
     120 * Widget reordering styles
     121 */
    158122
    159123#customize-theme-controls .widget-reorder-nav {
    … …  
    214178}
    215179
    216 #customize-theme-controls  .move-widget-area {
     180#customize-theme-controls .move-widget-area {
    217181        display: none;
    218182        background: #fff;
    … …  
    289253}
    290254
    291 
    292255/**
    293256 * Styles for new widget addition panel
    294257 */
     258
    295259.wp-full-overlay-main {
    296260        right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
    297261        width: 100%;
    298 }
    299 
    300 #customize-theme-controls .add-new-widget {
    301         cursor: pointer;
    302         float: right;
    303         margin-left: 10px;
    304         -webkit-transition: all 0.2s;
    305         transition: all 0.2s;
    306         -webkit-user-select: none;
    307         -moz-user-select: none;
    308         -ms-user-select: none;
    309         user-select: none;
    310         outline: none;
    311 }
    312 
    313 .add-new-widget:before {
    314         content: "\f132";
    315         display: inline-block;
    316         position: relative;
    317         left: -2px;
    318         top: -1px;
    319         font: normal 20px/1 dashicons;
    320         vertical-align: middle;
    321         -webkit-transition: all 0.2s;
    322         transition: all 0.2s;
    323         -webkit-font-smoothing: antialiased;
    324         -moz-osx-font-smoothing: grayscale;
    325262}
    326263
    … …  
    457394 * No plurals in naming.
    458395 * Ordered from lowest to highest specificity.
    459  **/
     396 */
     397
    460398#available-widgets .widget-title {
    461399        position: relative;

  • trunk/src/wp-admin/js/customize-widgets.js

    r35231 r35304  
    17901790                         * Keyboard-accessible reordering
    17911791                         */
    1792                         this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
    1793                                 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    1794                                         return;
    1795                                 }
    1796 
     1792                        this.container.find( '.reorder-toggle' ).on( 'click', function() {
    17971793                                self.toggleReordering( ! self.isReordering );
    17981794                        } );
    … …  
    18051801                        var self = this;
    18061802
    1807                         this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
    1808                                 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    1809                                         return;
    1810                                 }
     1803                        this.container.find( '.add-new-widget' ).on( 'click', function() {
     1804                                var addNewWidgetBtn = $( this );
    18111805
    18121806                                if ( self.$sectionContent.hasClass( 'reordering' ) ) {
    … …  
    18151809
    18161810                                if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
     1811                                        addNewWidgetBtn.attr( 'aria-expanded', 'true' );
    18171812                                        api.Widgets.availableWidgetsPanel.open( self );
    18181813                                } else {
     1814                                        addNewWidgetBtn.attr( 'aria-expanded', 'false' );
    18191815                                        api.Widgets.availableWidgetsPanel.close();
    18201816                                }
    … …  
    18701866                 */
    18711867                toggleReordering: function( showOrHide ) {
     1868                        var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ),
     1869                                reorderBtn = this.container.find( '.reorder-toggle' ),
     1870                                widgetsTitle = this.$sectionContent.find( '.widget-title' );
     1871
    18721872                        showOrHide = Boolean( showOrHide );
    18731873
    … …  
    18841884                                } );
    18851885
    1886                                 this.$sectionContent.find( '.first-widget .move-widget' ).focus();
    1887                                 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 );
     1886                                addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
     1887                                reorderBtn.attr( 'aria-label', l10n.reorderLabelOff );
     1888                                wp.a11y.speak( l10n.reorderModeOn );
     1889                                // Hide widget titles while reordering: title is already in the reorder controls.
     1890                                widgetsTitle.attr( 'aria-hidden', 'true' );
    18881891                        } else {
    1889                                 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 );
     1892                                addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' );
     1893                                reorderBtn.attr( 'aria-label', l10n.reorderLabelOn );
     1894                                wp.a11y.speak( l10n.reorderModeOff );
     1895                                widgetsTitle.attr( 'aria-hidden', 'false' );
    18901896                        }
    18911897                },

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

    r35275 r35304  
    345345         */
    346346        protected function render() {
    347                 $id    = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
     347                $id    = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
    348348                $class = 'customize-control customize-control-' . $this->type;
    349349
    … …  
    13131313                                </label>
    13141314                                <div class="container">
    1315                                 </div>                         
     1315                                </div>
    13161316                        </div>
    13171317                        <div class="actions">
    … …  
    14661466         */
    14671467        public function render_content() {
     1468                $id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
    14681469                ?>
    1469                 <span class="button-secondary add-new-widget" tabindex="0">
     1470                <button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
    14701471                        <?php _e( 'Add a Widget' ); ?>
    1471                 </span>
    1472 
    1473                 <span class="reorder-toggle" tabindex="0">
     1472                </button>
     1473                <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
    14741474                        <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
    14751475                        <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
    1476                 </span>
     1476                </button>
     1477                <p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>"><?php _e( 'When in reorder mode, additional controls to reorder widgets will be available in the widgets list above.' ); ?></p>
    14771478                <?php
    14781479        }

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

    r35231 r35304  
    675675                                'widgetMovedDown'  => __( 'Widget moved down' ),
    676676                                'noAreasRendered'  => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ),
     677                                'reorderModeOn'    => __( 'Reorder mode enabled' ),
     678                                'reorderModeOff'   => __( 'Reorder mode closed' ),
     679                                'reorderLabelOn'   => esc_attr__( 'Reorder widgets' ),
     680                                'reorderLabelOff'  => esc_attr__( 'Close reorder mode' ),
    677681                        ),
    678682                        'tpl' => array(
Note: See TracChangeset for help on using the changeset viewer.