Make WordPress Core


Ignore:
Timestamp:
07/06/2020 08:42:14 PM (5 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-recent-posts.php

    r47593 r48349  
    4646        }
    4747
    48         $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
     48        $default_title = __( 'Recent Posts' );
     49        $title         = ( ! empty( $instance['title'] ) ) ? $instance['title'] : $default_title;
    4950
    5051        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
     
    8586        }
    8687        ?>
     88
    8789        <?php echo $args['before_widget']; ?>
     90
    8891        <?php
    8992        if ( $title ) {
    9093            echo $args['before_title'] . $title . $args['after_title'];
    9194        }
     95
     96        $format = current_theme_supports( 'html5', 'navigation-widgets' ) ? 'html5' : 'xhtml';
     97
     98        /**
     99         * Filters the HTML format of widgets with navigation links.
     100         *
     101         * @since 5.5.0
     102         *
     103         * @param string $format The type of markup to use in widgets with navigation links.
     104         *                       Accepts 'html5', 'xhtml'.
     105         */
     106        $format = apply_filters( 'navigation_widgets_format', $format );
     107
     108        if ( 'html5' === $format ) {
     109            // The title may be filtered: Strip out HTML and make sure the aria-label is never empty.
     110            $title      = trim( strip_tags( $title ) );
     111            $aria_label = $title ? $title : $default_title;
     112            echo '<nav role="navigation" aria-label="' . esc_attr( $aria_label ) . '">';
     113        }
    92114        ?>
     115
    93116        <ul>
    94117            <?php foreach ( $r->posts as $recent_post ) : ?>
     
    110133            <?php endforeach; ?>
    111134        </ul>
     135        <?php if ( 'html5' === $format ) : ?>
     136            </nav>
     137        <?php endif; ?>
     138
    112139        <?php
    113140        echo $args['after_widget'];
Note: See TracChangeset for help on using the changeset viewer.