Make WordPress Core


Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/widgets/class-wp-widget-rss.php

    r47774 r48349  
    9595                        echo $args['before_title'] . $title . $args['after_title'];
    9696                }
     97
     98                $format = current_theme_supports( 'html5', 'navigation-widgets' ) ? 'html5' : 'xhtml';
     99
     100                /**
     101                 * Filters the HTML format of widgets with navigation links.
     102                 *
     103                 * @since 5.5.0
     104                 *
     105                 * @param string $format The type of markup to use in widgets with navigation links.
     106                 *                       Accepts 'html5', 'xhtml'.
     107                 */
     108                $format = apply_filters( 'navigation_widgets_format', $format );
     109
     110                if ( 'html5' === $format ) {
     111                        // The title may be filtered: Strip out HTML and make sure the aria-label is never empty.
     112                        $title      = trim( strip_tags( $title ) );
     113                        $aria_label = $title ? $title : __( 'RSS Feed' );
     114                        echo '<nav role="navigation" aria-label="' . esc_attr( $aria_label ) . '">';
     115                }
     116
    97117                wp_widget_rss_output( $rss, $instance );
     118
     119                if ( 'html5' === $format ) {
     120                        echo '</nav>';
     121                }
     122
    98123                echo $args['after_widget'];
    99124
Note: See TracChangeset for help on using the changeset viewer.