Get WordPress

Make WordPress Core

Changeset 58306

Timestamp:
06/03/2024 08:33:03 PM (2 months ago)
Author:
joedolson
Message:

Menus: Accessibility: Improve screen reader text for edit button.

Change the edit menu item toggle to communicate more context about the item to be edited. Make edit text consistent between Customizer menu editor and admin menu editor.

The menu position is conveyed only visually, using indentation, because there are no organizational semantics in either editor. This change helps provide screen reader users with consistent contextual information about the order, position, and parent of the current item.

Props joedolson, rcreators, afercia, mohonchandra.
Fixes #60673, See #60672.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/lib/nav-menu.js

    r54855 r58306  
    450450
    451451            var thisLink, thisLinkText, primaryItems, itemPosition, title,
    452                 parentItem, parentItemId, parentItemName, subItems,
     452                parentItem, parentItemId, parentItemName, subItems,
    453453                $this = $( itemToRefresh ),
    454454                menuItem = $this.closest( 'li.menu-item' ).first(),
    … …  
    456456                isPrimaryMenuItem = ( 0 === depth ),
    457457                itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
     458
    458459                position = parseInt( menuItem.index(), 10 ),
    459460                prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1, 10 ),
    … …  
    504505                itemPosition = primaryItems.index( menuItem ) + 1,
    505506                totalMenuItems = primaryItems.length,
    506 
    507507                // String together help text for primary menu items.
    508                 title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
     508                title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$$d', totalMenuItems );
    509509            } else {
    510510                parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).first(),
    … …  
    512512                parentItemName = parentItem.find( '.menu-item-title' ).text(),
    513513                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
     514
    514515                itemPosition = $( subItems.parents('.menu-item').get().reverse() ).index( menuItem ) + 1;
    515516
    516517                // String together help text for sub menu items.
    517                 title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
     518                if ( depth < 2 ) {
     519                    title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName );
     520                } else {
     521                    title = menus.subMenuMoreDepthFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName ).replace( '%6$d', depth );
     522                }
    518523            }
    519524
    … …  
    733738                    api.refreshKeyboardAccessibility();
    734739                    api.refreshAdvancedAccessibility();
     740
    735741                },
    736742                change: function(e, ui) {

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

    r57746 r58306  
    33 */
    44
    5 /* global _wpCustomizeNavMenusSettings, wpNavMenu, console */
     5/* global _wpCustomizeNavMenusSettings, wpNavMenu, console */
    66( function( api, wp, $ ) {
    77    'use strict';
    … …  
    11331133                wpNavMenu.menuList.attr( 'id', 'menu-to-edit' ).addClass( 'menu' );
    11341134
     1135
     1136
    11351137                _.each( api.section( section.id ).controls(), function( control ) {
    11361138                    if ( 'nav_menu_item' === control.params.type ) {
    … …  
    15761578
    15771579        /**
     1580
     1581
     1582
     1583
     1584
     1585
     1586
     1587
     1588
     1589
     1590
     1591
     1592
     1593
     1594
     1595
     1596
     1597
     1598
     1599
     1600
     1601
     1602
     1603
     1604
     1605
     1606
     1607
     1608
     1609
     1610
     1611
     1612
     1613
     1614
     1615
     1616
     1617
     1618
     1619
     1620
     1621
     1622
     1623
     1624
     1625
     1626
     1627
     1628
     1629
     1630
     1631
     1632
     1633
     1634
     1635
     1636
     1637
     1638
     1639
     1640
     1641
     1642
     1643
     1644
     1645
     1646
     1647
     1648
     1649
     1650
     1651
     1652
     1653
    15781654         * Override the embed() method to do nothing,
    15791655         * so that the control isn't embedded on load,
    … …  
    16081684            control.renderContent();
    16091685            control.deferred.embedded.resolve(); // This triggers control.ready().
     1686
     1687
     1688
    16101689        },
    16111690
    … …  
    16801759                } else if ( isMoveLeft ) {
    16811760                    control.moveLeft();
    1682                     if ( 1 === control.params.depth ) {
    1683                         control.container.find( '.is-submenu' ).hide();
    1684                     } else {
    1685                         control.container.find( '.is-submenu' ).show();
    1686                     }
    16871761                } else if ( isMoveRight ) {
    16881762                    control.moveRight();
    16891763                    control.params.depth += 1;
    1690                     if ( 0 === control.params.depth ) {
    1691                         control.container.find( '.is-submenu' ).hide();
    1692                     } else {
    1693                         control.container.find( '.is-submenu' ).show();
    1694                     }
    1695                 }
    1696 
     1764                }
     1765               
    16971766                moveBtn.focus(); // Re-focus after the container was moved.
     1767
     1768
     1769
    16981770            } );
    16991771        },
    … …  
    27272799                        menuItemControl.setting.set( setting );
    27282800                    });
     2801
     2802
     2803
    27292804                });
    27302805

  • trunk/src/wp-admin/nav-menus.php

    r56600 r58306  
    581581    /* translators: %s: Previous item name. */
    582582    'outFrom'                 => __( 'Out from under %s' ),
    583     /* translators: 1: Item name, 2: Item position, 3: Total number of items. */
    584     'menuFocus'               => __( '%1$s. Menu item %2$d of %3$d.' ),
    585     /* translators: 1: Item name, 2: Item position, 3: Parent item name. */
    586     'subMenuFocus'            => __( '%1$s. Sub item number %2$d under %3$s.' ),
     583    /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items. */
     584    'menuFocus'               => __( 'Edit %1$s (%2$s, %3$d of %4$d)' ),
     585    /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent. */
     586    'subMenuFocus'            => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ),
     587    /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent, 6: Item depth. */
     588    'subMenuMoreDepthFocus'   => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$d)' ),
    587589    /* translators: %s: Item name. */
    588590    'menuItemDeletion'        => __( 'item %s' ),

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

    r58146 r58306  
    563563            /* translators: %s: Previous item name. */
    564564            'outFrom'                 => __( 'Out from under %s' ),
    565             /* translators: 1: Item name, 2: Item position, 3: Total number of items. */
    566             'menuFocus'               => __( '%1$s. Menu item %2$d of %3$d.' ),
    567             /* translators: 1: Item name, 2: Item position, 3: Parent item name. */
    568             'subMenuFocus'            => __( '%1$s. Sub item number %2$d under %3$s.' ),
     565            /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items. */
     566            'menuFocus'               => __( 'Edit %1$s (%2$s, %3$d of %4$d)' ),
     567            /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent. */
     568            'subMenuFocus'            => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ),
     569            /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent, 6: Item depth. */
     570            'subMenuMoreDepthFocus'   => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$d)' ),
    569571        );
    570572        wp_localize_script( 'nav-menu', 'menus', $nav_menus_l10n );

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

    r57746 r58306  
    7878                <span class="item-controls">
    7979                    <button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text">
    80                     <?php
    81                         /* translators: 1: Title of a menu item, 2: Type of a menu item. */
    82                         printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
    83                     ?>
     80                    <# if ( 0 === data.depth ) { #>
     81                        <?php
     82                        /* translators: 1: Title of a menu item, 2: Type of a menu item. 3: Item index, 4: Total items. */
     83                        printf( __( 'Edit %1$s (%2$s, %3$d of %4$d)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '' );
     84                        ?>
     85                    <# } else if ( 1 === data.depth ) { #>
     86                        <?php
     87                            /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent. */
     88                            printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '' );
     89                        ?>
     90                    <# } else { #>
     91                        <?php
     92                            /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent, 6: Item depth. */
     93                            printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '', '{{data.depth}}' );
     94                        ?>
     95                    <# } #>
    8496                    </span><span class="toggle-indicator" aria-hidden="true"></span></button>
    8597                    <button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text">
Note: See TracChangeset for help on using the changeset viewer.