Changeset 48349 for trunk/src/wp-includes/widgets/class-wp-widget-categories.php

Timestamp:

07/06/2020 08:42:14 PM (6 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:

• trunk/src/wp-includes/widgets/class-wp-widget-categories.php (modified) (2 diffs)

trunk/src/wp-includes/widgets/class-wp-widget-categories.php

@@ -45 +45 @@
                 static $first_dropdown = true;
 
-                $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Categories' );
+                $default_title = __( 'Categories' );
+                $title         = ! empty( $instance['title'] ) ? $instance['title'] : $default_title;
 
                 /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
@@ -110 +111 @@
                         <?php
                 } else {
+                        $format = current_theme_supports( 'html5', 'navigation-widgets' ) ? 'html5' : 'xhtml';
+
+                        /**
+                         * Filters the HTML format of widgets with navigation links.
+                         *
+                         * @since 5.5.0
+                         *
+                         * @param string $format The type of markup to use in widgets with navigation links.
+                         *                       Accepts 'html5', 'xhtml'.
+                         */
+                        $format = apply_filters( 'navigation_widgets_format', $format );
+
+                        if ( 'html5' === $format ) {
+                                // The title may be filtered: Strip out HTML and make sure the aria-label is never empty.
+                                $title      = trim( strip_tags( $title ) );
+                                $aria_label = $title ? $title : $default_title;
+                                echo '<nav role="navigation" aria-label="' . esc_attr( $aria_label ) . '">';
+                        }
                         ?>
-                <ul>
-                        <?php
-                        $cat_args['title_li'] = '';
-
-                        /**
-                         * Filters the arguments for the Categories widget.
-                         *
-                         * @since 2.8.0
-                         * @since 4.9.0 Added the `$instance` parameter.
-                         *
-                         * @param array $cat_args An array of Categories widget options.
-                         * @param array $instance Array of settings for the current widget.
-                         */
-                        wp_list_categories( apply_filters( 'widget_categories_args', $cat_args, $instance ) );
-                        ?>
-                </ul>
+
+                        <ul>
+                                <?php
+                                $cat_args['title_li'] = '';
+
+                                /**
+                                 * Filters the arguments for the Categories widget.
+                                 *
+                                 * @since 2.8.0
+                                 * @since 4.9.0 Added the `$instance` parameter.
+                                 *
+                                 * @param array $cat_args An array of Categories widget options.
+                                 * @param array $instance Array of settings for the current widget.
+                                 */
+                                wp_list_categories( apply_filters( 'widget_categories_args', $cat_args, $instance ) );
+                                ?>
+                        </ul>
+
+                        <?php if ( 'html5' === $format ) : ?>
+                                </nav>
+                        <?php endif; ?>
+
                         <?php
                 }