From 9e29ffdd3313621f4e4bcec2eee51dbc2239b93b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 6 Jul 2020 20:42:14 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@48349 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/nav-menu-template.php         | 82 ++++++++++---------
 .../widgets/class-wp-nav-menu-widget.php      | 37 +++++++--
 .../widgets/class-wp-widget-archives.php      | 82 ++++++++++++-------
 .../widgets/class-wp-widget-categories.php    | 49 ++++++++---
 .../widgets/class-wp-widget-meta.php          | 38 +++++++--
 .../widgets/class-wp-widget-pages.php         | 34 +++++++-
 .../class-wp-widget-recent-comments.php       | 27 +++++-
 .../widgets/class-wp-widget-recent-posts.php  | 29 ++++++-
 .../widgets/class-wp-widget-rss.php           | 25 ++++++
 9 files changed, 307 insertions(+), 96 deletions(-)

diff --git a/src/wp-includes/nav-menu-template.php b/src/wp-includes/nav-menu-template.php
index a6a99cbad8..640ccf5cd3 100644
--- a/src/wp-includes/nav-menu-template.php
+++ b/src/wp-includes/nav-menu-template.php
@@ -15,31 +15,33 @@ require_once ABSPATH . WPINC . '/class-walker-nav-menu.php';
  *
  * @since 3.0.0
  * @since 4.7.0 Added the `item_spacing` argument.
+ * @since 5.5.0 Added the `container_aria_label` argument.
  *
  * @param array $args {
  *     Optional. Array of nav menu arguments.
  *
- *     @type int|string|WP_Term $menu            Desired menu. Accepts a menu ID, slug, name, or object. Default empty.
- *     @type string             $menu_class      CSS class to use for the ul element which forms the menu. Default 'menu'.
- *     @type string             $menu_id         The ID that is applied to the ul element which forms the menu.
- *                                               Default is the menu slug, incremented.
- *     @type string             $container       Whether to wrap the ul, and what to wrap it with. Default 'div'.
- *     @type string             $container_class Class that is applied to the container. Default 'menu-{menu slug}-container'.
- *     @type string             $container_id    The ID that is applied to the container. Default empty.
- *     @type callable|bool      $fallback_cb     If the menu doesn't exist, a callback function will fire.
- *                                               Default is 'wp_page_menu'. Set to false for no fallback.
- *     @type string             $before          Text before the link markup. Default empty.
- *     @type string             $after           Text after the link markup. Default empty.
- *     @type string             $link_before     Text before the link text. Default empty.
- *     @type string             $link_after      Text after the link text. Default empty.
- *     @type bool               $echo            Whether to echo the menu or return it. Default true.
- *     @type int                $depth           How many levels of the hierarchy are to be included. 0 means all. Default 0.
- *     @type object             $walker          Instance of a custom walker class. Default empty.
- *     @type string             $theme_location  Theme location to be used. Must be registered with register_nav_menu()
- *                                               in order to be selectable by the user.
- *     @type string             $items_wrap      How the list items should be wrapped. Default is a ul with an id and class.
- *                                               Uses printf() format with numbered placeholders.
- *     @type string             $item_spacing    Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.
+ *     @type int|string|WP_Term $menu                 Desired menu. Accepts a menu ID, slug, name, or object. Default empty.
+ *     @type string             $menu_class           CSS class to use for the ul element which forms the menu. Default 'menu'.
+ *     @type string             $menu_id              The ID that is applied to the ul element which forms the menu.
+ *                                                    Default is the menu slug, incremented.
+ *     @type string             $container            Whether to wrap the ul, and what to wrap it with. Default 'div'.
+ *     @type string             $container_class      Class that is applied to the container. Default 'menu-{menu slug}-container'.
+ *     @type string             $container_id         The ID that is applied to the container. Default empty.
+ *     @type string             $container_aria_label The aria-label attribute that is applied to the container when it's a nav element. Default empty.
+ *     @type callable|bool      $fallback_cb          If the menu doesn't exist, a callback function will fire.
+ *                                                    Default is 'wp_page_menu'. Set to false for no fallback.
+ *     @type string             $before               Text before the link markup. Default empty.
+ *     @type string             $after                Text after the link markup. Default empty.
+ *     @type string             $link_before          Text before the link text. Default empty.
+ *     @type string             $link_after           Text after the link text. Default empty.
+ *     @type bool               $echo                 Whether to echo the menu or return it. Default true.
+ *     @type int                $depth                How many levels of the hierarchy are to be included. 0 means all. Default 0.
+ *     @type object             $walker               Instance of a custom walker class. Default empty.
+ *     @type string             $theme_location       Theme location to be used. Must be registered with register_nav_menu()
+ *                                                    in order to be selectable by the user.
+ *     @type string             $items_wrap           How the list items should be wrapped. Default is a ul with an id and class.
+ *                                                    Uses printf() format with numbered placeholders.
+ *     @type string             $item_spacing         Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.
  * }
  * @return void|string|false Void if 'echo' argument is true, menu output if 'echo' is false.
  *                           False if there are no items or no menu was found.
@@ -48,23 +50,24 @@ function wp_nav_menu( $args = array() ) {
 	static $menu_id_slugs = array();
 
 	$defaults = array(
-		'menu'            => '',
-		'container'       => 'div',
-		'container_class' => '',
-		'container_id'    => '',
-		'menu_class'      => 'menu',
-		'menu_id'         => '',
-		'echo'            => true,
-		'fallback_cb'     => 'wp_page_menu',
-		'before'          => '',
-		'after'           => '',
-		'link_before'     => '',
-		'link_after'      => '',
-		'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
-		'item_spacing'    => 'preserve',
-		'depth'           => 0,
-		'walker'          => '',
-		'theme_location'  => '',
+		'menu'                 => '',
+		'container'            => 'div',
+		'container_class'      => '',
+		'container_id'         => '',
+		'container_aria_label' => '',
+		'menu_class'           => 'menu',
+		'menu_id'              => '',
+		'echo'                 => true,
+		'fallback_cb'          => 'wp_page_menu',
+		'before'               => '',
+		'after'                => '',
+		'link_before'          => '',
+		'link_after'           => '',
+		'items_wrap'           => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+		'item_spacing'         => 'preserve',
+		'depth'                => 0,
+		'walker'               => '',
+		'theme_location'       => '',
 	);
 
 	$args = wp_parse_args( $args, $defaults );
@@ -176,7 +179,8 @@ function wp_nav_menu( $args = array() ) {
 			$show_container = true;
 			$class          = $args->container_class ? ' class="' . esc_attr( $args->container_class ) . '"' : ' class="menu-' . $menu->slug . '-container"';
 			$id             = $args->container_id ? ' id="' . esc_attr( $args->container_id ) . '"' : '';
-			$nav_menu      .= '<' . $args->container . $id . $class . '>';
+			$aria_label     = ( 'nav' === $args->container && $args->container_aria_label ) ? ' aria-label="' . esc_attr( $args->container_aria_label ) . '"' : '';
+			$nav_menu      .= '<' . $args->container . $id . $class . $aria_label . '>';
 		}
 	}
 
diff --git a/src/wp-includes/widgets/class-wp-nav-menu-widget.php b/src/wp-includes/widgets/class-wp-nav-menu-widget.php
index 1edaeac464..ffe52c937d 100644
--- a/src/wp-includes/widgets/class-wp-nav-menu-widget.php
+++ b/src/wp-includes/widgets/class-wp-nav-menu-widget.php
@@ -46,7 +46,8 @@ class WP_Nav_Menu_Widget extends WP_Widget {
 			return;
 		}
 
-		$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
+		$default_title = __( 'Menu' );
+		$title         = ! empty( $instance['title'] ) ? $instance['title'] : '';
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
 		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
@@ -57,10 +58,36 @@ class WP_Nav_Menu_Widget extends WP_Widget {
 			echo $args['before_title'] . $title . $args['after_title'];
 		}
 
-		$nav_menu_args = array(
-			'fallback_cb' => '',
-			'menu'        => $nav_menu,
-		);
+		$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;
+
+			$nav_menu_args = array(
+				'fallback_cb'          => '',
+				'menu'                 => $nav_menu,
+				'container'            => 'nav',
+				'container_aria_label' => $aria_label,
+				'items_wrap'           => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+			);
+		} else {
+			$nav_menu_args = array(
+				'fallback_cb' => '',
+				'menu'        => $nav_menu,
+			);
+		}
 
 		/**
 		 * Filters the arguments for the Navigation Menu widget.
diff --git a/src/wp-includes/widgets/class-wp-widget-archives.php b/src/wp-includes/widgets/class-wp-widget-archives.php
index 2dfd60c7a5..12af44f2c9 100644
--- a/src/wp-includes/widgets/class-wp-widget-archives.php
+++ b/src/wp-includes/widgets/class-wp-widget-archives.php
@@ -40,7 +40,8 @@ class WP_Widget_Archives extends WP_Widget {
 	 * @param array $instance Settings for the current Archives widget instance.
 	 */
 	public function widget( $args, $instance ) {
-		$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Archives' );
+		$default_title = __( 'Archives' );
+		$title         = ! empty( $instance['title'] ) ? $instance['title'] : $default_title;
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
 		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
@@ -120,37 +121,60 @@ class WP_Widget_Archives extends WP_Widget {
 })();
 /* ]]> */
 </script>
-
-		<?php } else { ?>
-		<ul>
 			<?php
-			wp_get_archives(
-				/**
-				 * Filters the arguments for the Archives widget.
-				 *
-				 * @since 2.8.0
-				 * @since 4.9.0 Added the `$instance` parameter.
-				 *
-				 * @see wp_get_archives()
-				 *
-				 * @param array $args     An array of Archives option arguments.
-				 * @param array $instance Array of settings for the current widget.
-				 */
-				apply_filters(
-					'widget_archives_args',
-					array(
-						'type'            => 'monthly',
-						'show_post_count' => $count,
-					),
-					$instance
-				)
-			);
+		} 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
-		}
 
-		echo $args['after_widget'];
+			<ul>
+				<?php
+				wp_get_archives(
+					/**
+					 * Filters the arguments for the Archives widget.
+					 *
+					 * @since 2.8.0
+					 * @since 4.9.0 Added the `$instance` parameter.
+					 *
+					 * @see wp_get_archives()
+					 *
+					 * @param array $args     An array of Archives option arguments.
+					 * @param array $instance Array of settings for the current widget.
+					 */
+					apply_filters(
+						'widget_archives_args',
+						array(
+							'type'            => 'monthly',
+							'show_post_count' => $count,
+						),
+						$instance
+					)
+				);
+				?>
+			</ul>
+			<?php if ( 'html5' === $format ) : ?>
+				</nav>
+			<?php endif; ?>
+
+			<?php
+			echo $args['after_widget'];
+		}
 	}
 
 	/**
diff --git a/src/wp-includes/widgets/class-wp-widget-categories.php b/src/wp-includes/widgets/class-wp-widget-categories.php
index 0d53139cc9..5663411143 100644
--- a/src/wp-includes/widgets/class-wp-widget-categories.php
+++ b/src/wp-includes/widgets/class-wp-widget-categories.php
@@ -44,7 +44,8 @@ class WP_Widget_Categories extends WP_Widget {
 	public function widget( $args, $instance ) {
 		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 */
 		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
@@ -109,23 +110,47 @@ class WP_Widget_Categories extends WP_Widget {
 
 			<?php
 		} else {
-			?>
-		<ul>
-			<?php
-			$cat_args['title_li'] = '';
+			$format = current_theme_supports( 'html5', 'navigation-widgets' ) ? 'html5' : 'xhtml';
 
 			/**
-			 * Filters the arguments for the Categories widget.
+			 * Filters the HTML format of widgets with navigation links.
 			 *
-			 * @since 2.8.0
-			 * @since 4.9.0 Added the `$instance` parameter.
+			 * @since 5.5.0
 			 *
-			 * @param array $cat_args An array of Categories widget options.
-			 * @param array $instance Array of settings for the current widget.
+			 * @param string $format The type of markup to use in widgets with navigation links.
+			 *                       Accepts 'html5', 'xhtml'.
 			 */
-			wp_list_categories( apply_filters( 'widget_categories_args', $cat_args, $instance ) );
+			$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>
+
+			<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
 		}
 
diff --git a/src/wp-includes/widgets/class-wp-widget-meta.php b/src/wp-includes/widgets/class-wp-widget-meta.php
index 33742b368d..746072e3af 100644
--- a/src/wp-includes/widgets/class-wp-widget-meta.php
+++ b/src/wp-includes/widgets/class-wp-widget-meta.php
@@ -42,7 +42,8 @@ class WP_Widget_Meta extends WP_Widget {
 	 * @param array $instance Settings for the current Meta widget instance.
 	 */
 	public function widget( $args, $instance ) {
-		$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Meta' );
+		$default_title = __( 'Meta' );
+		$title         = ! empty( $instance['title'] ) ? $instance['title'] : $default_title;
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
 		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
@@ -52,12 +53,34 @@ class WP_Widget_Meta extends WP_Widget {
 		if ( $title ) {
 			echo $args['before_title'] . $title . $args['after_title'];
 		}
+
+		$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>
+
+
+		<ul>
 			<?php wp_register(); ?>
 			<li><?php wp_loginout(); ?></li>
 			<li><a href="<?php echo esc_url( get_bloginfo( 'rss2_url' ) ); ?>"><?php _e( 'Entries feed' ); ?></a></li>
 			<li><a href="<?php echo esc_url( get_bloginfo( 'comments_rss2_url' ) ); ?>"><?php _e( 'Comments feed' ); ?></a></li>
+
 			<?php
 			/**
 			 * Filters the "WordPress.org" list item HTML in the Meta widget.
@@ -80,10 +103,15 @@ class WP_Widget_Meta extends WP_Widget {
 
 			wp_meta();
 			?>
-			</ul>
-			<?php
 
-			echo $args['after_widget'];
+		</ul>
+
+		<?php if ( 'html5' === $format ) : ?>
+			</nav>
+		<?php endif; ?>
+
+		<?php
+		echo $args['after_widget'];
 	}
 
 	/**
diff --git a/src/wp-includes/widgets/class-wp-widget-pages.php b/src/wp-includes/widgets/class-wp-widget-pages.php
index 94af11d658..b1bf40c50b 100644
--- a/src/wp-includes/widgets/class-wp-widget-pages.php
+++ b/src/wp-includes/widgets/class-wp-widget-pages.php
@@ -40,7 +40,8 @@ class WP_Widget_Pages extends WP_Widget {
 	 * @param array $instance Settings for the current Pages widget instance.
 	 */
 	public function widget( $args, $instance ) {
-		$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Pages' );
+		$default_title = __( 'Pages' );
+		$title         = ! empty( $instance['title'] ) ? $instance['title'] : $default_title;
 
 		/**
 		 * Filters the widget title.
@@ -89,10 +90,35 @@ class WP_Widget_Pages extends WP_Widget {
 			if ( $title ) {
 				echo $args['before_title'] . $title . $args['after_title'];
 			}
+
+			$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 echo $out; ?>
-		</ul>
+
+			<ul>
+				<?php echo $out; ?>
+			</ul>
+
+			<?php if ( 'html5' === $format ) : ?>
+				</nav>
+			<?php endif; ?>
+
 			<?php
 			echo $args['after_widget'];
 		}
diff --git a/src/wp-includes/widgets/class-wp-widget-recent-comments.php b/src/wp-includes/widgets/class-wp-widget-recent-comments.php
index fd8ae05fdc..5b6b93fea4 100644
--- a/src/wp-includes/widgets/class-wp-widget-recent-comments.php
+++ b/src/wp-includes/widgets/class-wp-widget-recent-comments.php
@@ -82,7 +82,8 @@ class WP_Widget_Recent_Comments extends WP_Widget {
 
 		$output = '';
 
-		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Comments' );
+		$default_title = __( 'Recent Comments' );
+		$title         = ( ! empty( $instance['title'] ) ) ? $instance['title'] : $default_title;
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
 		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
@@ -123,6 +124,25 @@ class WP_Widget_Recent_Comments extends WP_Widget {
 		$recent_comments_id = ( $first_instance ) ? 'recentcomments' : "recentcomments-{$this->number}";
 		$first_instance     = false;
 
+		$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;
+			$output    .= '<nav role="navigation" aria-label="' . esc_attr( $aria_label ) . '">';
+		}
+
 		$output .= '<ul id="' . esc_attr( $recent_comments_id ) . '">';
 		if ( is_array( $comments ) && $comments ) {
 			// Prime cache for associated posts. (Prime post term cache if we need it for permalinks.)
@@ -141,6 +161,11 @@ class WP_Widget_Recent_Comments extends WP_Widget {
 			}
 		}
 		$output .= '</ul>';
+
+		if ( 'html5' === $format ) {
+			$output .= '</nav>';
+		}
+
 		$output .= $args['after_widget'];
 
 		echo $output;
diff --git a/src/wp-includes/widgets/class-wp-widget-recent-posts.php b/src/wp-includes/widgets/class-wp-widget-recent-posts.php
index 9767e3b4fc..7b1ff9ee6d 100644
--- a/src/wp-includes/widgets/class-wp-widget-recent-posts.php
+++ b/src/wp-includes/widgets/class-wp-widget-recent-posts.php
@@ -45,7 +45,8 @@ class WP_Widget_Recent_Posts extends WP_Widget {
 			$args['widget_id'] = $this->id;
 		}
 
-		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
+		$default_title = __( 'Recent Posts' );
+		$title         = ( ! empty( $instance['title'] ) ) ? $instance['title'] : $default_title;
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
 		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
@@ -84,12 +85,34 @@ class WP_Widget_Recent_Posts extends WP_Widget {
 			return;
 		}
 		?>
+
 		<?php echo $args['before_widget']; ?>
+
 		<?php
 		if ( $title ) {
 			echo $args['before_title'] . $title . $args['after_title'];
 		}
+
+		$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 foreach ( $r->posts as $recent_post ) : ?>
 				<?php
@@ -109,6 +132,10 @@ class WP_Widget_Recent_Posts extends WP_Widget {
 				</li>
 			<?php endforeach; ?>
 		</ul>
+		<?php if ( 'html5' === $format ) : ?>
+			</nav>
+		<?php endif; ?>
+
 		<?php
 		echo $args['after_widget'];
 	}
diff --git a/src/wp-includes/widgets/class-wp-widget-rss.php b/src/wp-includes/widgets/class-wp-widget-rss.php
index 385bccfd7e..8cd993689c 100644
--- a/src/wp-includes/widgets/class-wp-widget-rss.php
+++ b/src/wp-includes/widgets/class-wp-widget-rss.php
@@ -94,7 +94,32 @@ class WP_Widget_RSS extends WP_Widget {
 		if ( $title ) {
 			echo $args['before_title'] . $title . $args['after_title'];
 		}
+
+		$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 : __( 'RSS Feed' );
+			echo '<nav role="navigation" aria-label="' . esc_attr( $aria_label ) . '">';
+		}
+
 		wp_widget_rss_output( $rss, $instance );
+
+		if ( 'html5' === $format ) {
+			echo '</nav>';
+		}
+
 		echo $args['after_widget'];
 
 		if ( ! is_wp_error( $rss ) ) {