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
This commit is contained in:
Andrea Fercia
2020-07-06 20:42:14 +00:00
parent 538ba85172
commit 9e29ffdd33
9 changed files with 307 additions and 96 deletions

View File

@@ -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 ) ) {