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

@@ -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'];
}