WordPress.org

Make WordPress Core

Changeset 35304


Ignore:
Timestamp:
10/20/2015 08:14:51 PM (4 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.