Changeset 39164
- Timestamp:
- 11/08/2016 06:00:07 PM (8 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-content/themes/twentyseventeen/inc/icon-functions.php
r39072 r39164 50 50 'title' => '', 51 51 'desc' => '', 52 'aria_hidden' => true, // Hide from screen readers.53 52 'fallback' => false, 54 53 ); … … 58 57 59 58 // 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"'; 65 60 66 61 // Set ARIA. 67 62 $aria_labelledby = ''; 68 63 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 } 71 83 } 72 84 … … 74 86 $svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . $aria_labelledby . ' role="img">'; 75 87 76 // If there is a title, display it.88 // Display the title. 77 89 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> '; 92 106 93 107 // 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.