Make WordPress Core

Changeset 39164


Ignore:
Timestamp:
11/08/2016 06:00:07 PM (7 years ago)
Author:
davidakennedy
Message:

Twenty Seventeen: Improve SVG markup, providing more options customization

  • Removes aria-hidden argument. Lets aria-hidden="true" be there by default and sets it empty when there is title and desc.
  • Adds unique IDs for title and desc for accessible implementation options.
  • Removes absolute path in the Customizer. It didn't work in Internet Explorer, and the original bug is fixed in #30028.
  • Add whitespace around <use>, from #38387.

Props sami.keijonen, swissspidy, laurelfulford.

Fixes #38659.
See #38387.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/inc/icon-functions.php

    r39072 r39164  
    5050        'title'       => '',
    5151        'desc'        => '',
    52         'aria_hidden' => true, // Hide from screen readers.
    5352        'fallback'    => false,
    5453    );
     
    5857
    5958    // Set aria hidden.
    60     $aria_hidden = '';
    61 
    62     if ( true === $args['aria_hidden'] ) {
    63         $aria_hidden = ' aria-hidden="true"';
    64     }
     59    $aria_hidden = ' aria-hidden="true"';
    6560
    6661    // Set ARIA.
    6762    $aria_labelledby = '';
    6863
    69     if ( $args['title'] && $args['desc'] ) {
    70         $aria_labelledby = ' aria-labelledby="title desc"';
     64    /*
     65     * Twenty Seventeen doesn't use the SVG title or description attributes; non-decorative icons are described with .screen-reader-text.
     66     *
     67     * However, child themes can use the title and description to add information to non-decorative SVG icons to improve accessibility.
     68     *
     69     * Example 1 with title: <?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is the title', 'textdomain' ) ) ); ?>
     70     *
     71     * Example 2 with title and description: <?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is the title', 'textdomain' ), 'desc' => __( 'This is the description', 'textdomain' ) ) ); ?>
     72     *
     73     * See https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/.
     74     */
     75    if ( $args['title'] ) {
     76        $aria_hidden     = '';
     77        $unique_id       = uniqid();
     78        $aria_labelledby = ' aria-labelledby="title-' . $unique_id . '"';
     79
     80        if ( $args['desc'] ) {
     81            $aria_labelledby = ' aria-labelledby="title-' . $unique_id . ' desc-' . $unique_id . '"';
     82        }
    7183    }
    7284
     
    7486    $svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . $aria_labelledby . ' role="img">';
    7587
    76     // If there is a title, display it.
     88    // Display the title.
    7789    if ( $args['title'] ) {
    78         $svg .= '<title>' . esc_html( $args['title'] ) . '</title>';
    79     }
    80 
    81     // If there is a description, display it.
    82     if ( $args['desc'] ) {
    83         $svg .= '<desc>' . esc_html( $args['desc'] ) . '</desc>';
    84     }
    85 
    86     // Use absolute path in the Customizer so that icons show up in there.
    87     if ( is_customize_preview() ) {
    88         $svg .= '<use xlink:href="' . get_parent_theme_file_uri( '/assets/images/svg-icons.svg#icon-' . esc_html( $args['icon'] ) ) . '"></use>';
    89     } else {
    90         $svg .= '<use xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use>';
    91     }
     90        $svg .= '<title id="title-' . $unique_id . '">' . esc_html( $args['title'] ) . '</title>';
     91
     92        // Display the desc only if the title is already set.
     93        if ( $args['desc'] ) {
     94            $svg .= '<desc id="desc-' . $unique_id . '">' . esc_html( $args['desc'] ) . '</desc>';
     95        }
     96    }
     97
     98    /*
     99     * Display the icon.
     100     *
     101     * The whitespace around `<use>` is intentional - it is a work around to a keyboard navigation bug in Safari 10.
     102     *
     103     * See https://core.trac.wordpress.org/ticket/38387.
     104     */
     105    $svg .= ' <use xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use> ';
    92106
    93107    // Add some markup to use as a fallback for browsers that do not support SVGs.
Note: See TracChangeset for help on using the changeset viewer.