WordPress.org
Get WordPress

Make WordPress Core

Changeset 33413


Ignore:
Timestamp:
07/24/2015 08:27:04 PM (11 years ago)
Author:
ocean90
Message:

Customizer: Add missing text or labels to some nav menu UI controls.

props afercia, celloexpressions, westonruter.
fixes #32715.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r33410 r33413  
    621621}
    622622
    623 #available-menu-items .open .accordion-section-title:after {
     623/* rework the arrow indicator implementation for NVDA bug see #32715 */
     624#available-menu-items .accordion-section-title:after {
     625        content: none !important;
     626}
     627
     628#available-menu-items .accordion-section-title .toggle-indicator {
     629        display: inline-block;
     630        font-size: 20px;
     631        line-height: 1;
     632}
     633
     634#available-menu-items .accordion-section-title .toggle-indicator:after {
     635        content: '\f140';
     636        font: normal 20px/1 'dashicons';
     637        color: #a0a5aa;
     638        vertical-align: top;
     639        speak: none;
     640        -webkit-font-smoothing: antialiased;
     641        -moz-osx-font-smoothing: grayscale;
     642        text-decoration: none !important;
     643}
     644
     645#available-menu-items .accordion-section-title:hover .toggle-indicator:after {
     646        color: #777;
     647}
     648
     649#available-menu-items .open .accordion-section-title .toggle-indicator:after {
    624650        content: '\f142';
    625651}
    … …  
    646672        display: block;
    647673        width: 28px;
    648         height: 32px;
     674        height: 35px;
    649675        position: absolute;
    650676        top: 5px;
    651677        right: 5px;
     678        cursor: pointer;
    652679}
    653680
    … …  
    658685
    659686#available-menu-items .accordion-section-title .no-items,
    660 #available-menu-items .cannot-expand .accordion-section-title .spinner {
    661         display: none;
     687#available-menu-items .cannot-expand .accordion-section-title .spinner,
     688#available-menu-items .cannot-expand .accordion-section-title > button {
     689        display: none;
     690}
     691
     692#available-menu-items-search.cannot-expand .accordion-section-title .spinner {
     693        display: block;
    662694}
    663695
    … …  
    779811#available-menu-items-search .spinner {
    780812        position: absolute;
    781         top: 18px;
     813        top: 20px;
    782814        margin: 0 !important;
    783815        right: 20px;

  • trunk/src/wp-admin/js/accordion.js

    r31471 r33413  
    5454        function accordionSwitch ( el ) {
    5555                var section = el.closest( '.accordion-section' ),
     56                        sectionToggleControl = section.find( '[aria-expanded]' ).first(),
    5657                        siblings = section.closest( '.accordion-container' ).find( '.open' ),
     58                        siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
    5759                        content = section.find( '.accordion-section-content' );
    5860
    … …  
    6668                        content.toggle( true ).slideToggle( 150 );
    6769                } else {
     70                        siblingsToggleControl.attr( 'aria-expanded', 'false' );
    6871                        siblings.removeClass( 'open' );
    6972                        siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
    … …  
    7174                        section.toggleClass( 'open' );
    7275                }
     76
     77                // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
     78                if ( sectionToggleControl ) {
     79                        sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) );
     80                }
    7381        }
    7482

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

    r33412 r33413  
    154154                        this.sectionContent.scroll( function() {
    155155                                var totalHeight = self.$el.find( '.accordion-section.open .accordion-section-content' ).prop( 'scrollHeight' ),
    156                                     visibleHeight = self.$el.find( '.accordion-section.open' ).height();
     156                                        visibleHeight = self.$el.find( '.accordion-section.open' ).height();
     157
    157158                                if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) {
    158159                                        var type = $( this ).data( 'type' ),
    159                                             object = $( this ).data( 'object' );
     160                                                object = $( this ).data( 'object' );
     161
    160162                                        if ( 'search' === type ) {
    161163                                                if ( self.searchTerm ) {
    … …  
    174176                // Search input change handler.
    175177                search: function( event ) {
     178                        var $searchSection = $( '#available-menu-items-search' ),
     179                                $openSections = $( '#available-menu-items .accordion-section.open' );
     180
    176181                        if ( ! event ) {
    177182                                return;
    178183                        }
    179184                        // Manual accordion-opening behavior.
    180                         if ( this.searchTerm && ! $( '#available-menu-items-search' ).hasClass( 'open' ) ) {
    181                                 $( '#available-menu-items .accordion-section-content' ).slideUp( 'fast' );
    182                                 $( '#available-menu-items-search .accordion-section-content' ).slideDown( 'fast' );
    183                                 $( '#available-menu-items .accordion-section.open' ).removeClass( 'open' );
    184                                 $( '#available-menu-items-search' ).addClass( 'open' );
     185                        if ( this.searchTerm && ! $searchSection.hasClass( 'open' ) ) {
     186                                $openSections.find( '.accordion-section-content' ).slideUp( 'fast' );
     187                                $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
     188                                $openSections.find( '[aria-expanded]' ).first().attr( 'aria-expanded', 'false' );
     189                                $openSections.removeClass( 'open' );
     190                                $searchSection.addClass( 'open' );
    185191                        }
    186192                        if ( '' === event.target.value ) {
    187                                 $( '#available-menu-items-search' ).removeClass( 'open' );
     193                                $searchSection.removeClass( 'open' );
    188194                        }
    189195                        if ( this.searchTerm === event.target.value ) {
    … …  
    198204                doSearch: function( page ) {
    199205                        var self = this, params,
    200                             $section = $( '#available-menu-items-search' ),
    201                             $content = $section.find( '.accordion-section-content' ),
    202                             itemTemplate = wp.template( 'available-menu-item' );
     206                                $section = $( '#available-menu-items-search' ),
     207                                $content = $section.find( '.accordion-section-content' ),
     208                                itemTemplate = wp.template( 'available-menu-item' );
    203209
    204210                        if ( self.currentRequest ) {
    … …  
    19921998                toggleReordering: function( showOrHide ) {
    19931999                        var addNewItemBtn = this.container.find( '.add-new-menu-item' ),
    1994                                 reorderBtn = this.container.find( '.reorder-toggle' );
     2000                                reorderBtn = this.container.find( '.reorder-toggle' ),
     2001                                itemsTitle = this.$sectionContent.find( '.item-title' );
    19952002
    19962003                        showOrHide = Boolean( showOrHide );
    … …  
    20042011                        this.$sectionContent.sortable( this.isReordering ? 'disable' : 'enable' );
    20052012                        if ( this.isReordering ) {
    2006                                 addNewItemBtn.attr( 'tabindex', '-1' );
     2013                                addNewItemBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
    20072014                                reorderBtn.attr( 'aria-label', api.Menus.data.l10n.reorderLabelOff );
    20082015                                wp.a11y.speak( api.Menus.data.l10n.reorderModeOn );
     2016                                itemsTitle.attr( 'aria-hidden', 'false' );
    20092017                        } else {
    2010                                 addNewItemBtn.removeAttr( 'tabindex' );
     2018                                addNewItemBtn.removeAttr( 'tabindex aria-hidden' );
    20112019                                reorderBtn.attr( 'aria-label', api.Menus.data.l10n.reorderLabelOn );
    20122020                                wp.a11y.speak( api.Menus.data.l10n.reorderModeOff );
     2021                                itemsTitle.attr( 'aria-hidden', 'true' );
    20132022                        }
    20142023

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

    r33366 r33413  
    16801680                <div class="menu-item-bar">
    16811681                        <div class="menu-item-handle">
    1682                                 <span class="item-type">{{ data.item_type_label }}</span>
    1683                                 <span class="item-title">
     1682                                <span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
     1683                                <span class="item-title" aria-hidden="true">
    16841684                                        <span class="spinner"></span>
    16851685                                        <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
    16861686                                </span>
    16871687                                <span class="item-controls">
    1688                                         <button type="button" class="not-a-button item-edit"><span class="screen-reader-text"><?php _e( 'Edit Menu Item' ); ?></span></button>
    1689                                         <button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php _e( 'Remove Menu Item' ); ?></span></button>
     1688                                        <button type="button" class="not-a-button item-edit"><span class="screen-reader-text"><?php
     1689                                                /* translators: 1: Title of a menu item, 2: Type of a menu item */
     1690                                                printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
     1691                                        ?></span></button>
     1692                                        <button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php
     1693                                                /* translators: 1: Title of a menu item, 2: Type of a menu item */
     1694                                                printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
     1695                                        ?></span></button>
    16901696                                </span>
    16911697                        </div>

  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r33366 r33413  
    722722                        </div>
    723723                        <div id="new-custom-menu-item" class="accordion-section">
    724                                 <h4 class="accordion-section-title"><?php _e( 'Custom Links' ); ?><button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
     724                                <h4 class="accordion-section-title" role="presentation">
     725                                        <?php _e( 'Custom Links' ); ?>
     726                                        <button type="button" class="not-a-button" aria-expanded="false">
     727                                                <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
     728                                                <span class="toggle-indicator" aria-hidden="true"></span>
     729                                        </button>
     730                                </h4>
    725731                                <div class="accordion-section-content">
    726732                                        <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
    … …  
    751757                                ?>
    752758                                <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
    753                                         <h4 class="accordion-section-title"><?php echo esc_html( $available_item_type['title'] ); ?> <span class="no-items"><?php _e( 'No items' ); ?></span><span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
     759                                        <h4 class="accordion-section-title" role="presentation">
     760                                                <?php echo esc_html( $available_item_type['title'] ); ?>
     761                                                <span class="spinner"></span>
     762                                                <span class="no-items"><?php _e( 'No items' ); ?></span>
     763                                                <button type="button" class="not-a-button" aria-expanded="false">
     764                                                        <span class="screen-reader-text"><?php
     765                                                        /* translators: %s: Title of a section with menu items */
     766                                                        printf( 'Toggle section: %s', esc_html( $available_item_type['title'] ) ); ?></span>
     767                                                        <span class="toggle-indicator" aria-hidden="true"></span>
     768                                                </button>
     769                                        </h4>
    754770                                        <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul>
    755771                                </div>
Note: See TracChangeset for help on using the changeset viewer.