Make WordPress Core


Ignore:
Timestamp:
07/06/2020 08:42:14 PM (4 years ago)
Author:
afercia
Message:

Accessibility: Widgets: Add theme support to make widgets output list of links wrapped within a <nav> element.

Widgets that output list of links can now be wrapped within <nav> elements to improve semantics and accessibility.

The <nav> elements are also native landmark regions, which helps assistive technology users to navigate through them. Themes can opt-in to this new behavior by declaring support for the new html5 feature navigation-widgets.

Props joedolson, simonjanin, audrasjb, afercia.
Fixes #48170.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/widgets/class-wp-nav-menu-widget.php

    r47122 r48349  
    4747        }
    4848
    49         $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
     49        $default_title = __( 'Menu' );
     50        $title         = ! empty( $instance['title'] ) ? $instance['title'] : '';
    5051
    5152        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
     
    5859        }
    5960
    60         $nav_menu_args = array(
    61             'fallback_cb' => '',
    62             'menu'        => $nav_menu,
    63         );
     61        $format = current_theme_supports( 'html5', 'navigation-widgets' ) ? 'html5' : 'xhtml';
     62
     63        /**
     64         * Filters the HTML format of widgets with navigation links.
     65         *
     66         * @since 5.5.0
     67         *
     68         * @param string $format The type of markup to use in widgets with navigation links.
     69         *                       Accepts 'html5', 'xhtml'.
     70         */
     71        $format = apply_filters( 'navigation_widgets_format', $format );
     72
     73        if ( 'html5' === $format ) {
     74            // The title may be filtered: Strip out HTML and make sure the aria-label is never empty.
     75            $title      = trim( strip_tags( $title ) );
     76            $aria_label = $title ? $title : $default_title;
     77
     78            $nav_menu_args = array(
     79                'fallback_cb'          => '',
     80                'menu'                 => $nav_menu,
     81                'container'            => 'nav',
     82                'container_aria_label' => $aria_label,
     83                'items_wrap'           => '<ul id="%1$s" class="%2$s">%3$s</ul>',
     84            );
     85        } else {
     86            $nav_menu_args = array(
     87                'fallback_cb' => '',
     88                'menu'        => $nav_menu,
     89            );
     90        }
    6491
    6592        /**
Note: See TracChangeset for help on using the changeset viewer.