Changeset 49177

Timestamp:

10/16/2020 06:30:53 PM (4 years ago)

Author:

SergeyBiryukov

Message:

Accessibility: Widgets: Conditionally wrap the tag cloud widget in a <nav> element.

If the theme declares support for the html5 feature navigation-widgets, the tag cloud widget is now wrapped in a <nav> element to improve semantics and accessibility.

The <nav> elements are native landmark regions, which helps assistive technology users to navigate through them.

Follow-up to [48349] for other widgets.

Props audrasjb, justinahinon, ravipatel.
Fixes #51455. See #48170.

File:

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

trunk/src/wp-includes/widgets/class-wp-widget-tag-cloud.php

@@ -91 +91 @@
         }
 
+        $format = current_theme_supports( 'html5', 'navigation-widgets' ) ? 'html5' : 'xhtml';
+
+        /** This filter is documented in wp-includes/widgets/class-wp-nav-menu-widget.php */
+        $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 ) . '">';
+        }
+
         echo '<div class="tagcloud">';
 
@@ -96 +108 @@
 
         echo "</div>\n";
+
+        if ( 'html5' === $format ) {
+            echo '</nav>';
+        }
+
         echo $args['after_widget'];
     }