WordPress.org
Get WordPress

Make WordPress Core

Changeset 33413


Ignore:
Timestamp:
07/24/2015 08:27:04 PM (10 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.