Ticket #38659: 38659.1.patch

src/wp-content/themes/twentyseventeen/inc/icon-functions.php

@@ -49 +49 @@
                 'icon'        => '',
                 'title'       => '',
                 'desc'        => '',
-                'aria_hidden' => true, // Hide from screen readers.
                 'fallback'    => false,
         );
 
@@ -57 +56 @@
         $args = wp_parse_args( $args, $defaults );
 
         // Set aria hidden.
-        $aria_hidden = '';
+        $aria_hidden = ' aria-hidden="true"';
 
-        if ( true === $args['aria_hidden'] ) {
-                $aria_hidden = ' aria-hidden="true"';
-        }
-
         // Set ARIA.
         $aria_labelledby = '';
 
-        if ( $args['title'] && $args['desc'] ) {
-                $aria_labelledby = ' aria-labelledby="title desc"';
+        /*
+         * Twentyseventeen doesn't use title or description anywhere in the theme because all the icons are decorative.
+         *
+         * But child themes can use title and desc arguments for none decorative icons in accessible way.
+         *
+         * Example 1 with title: <?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is title', 'textdomain' ) ) ); ?>
+         *
+         * Example 2 with title and desc: <?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is title', 'textdomain' ), 'desc' => __( 'This is longer desc', 'textdomain' ) ) ); ?>
+         *
+         * See https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/.
+         */
+        if ( $args['title'] ) {
+                $aria_hidden     = '';
+                $unique_id       = uniqid();
+                $aria_labelledby = ' aria-labelledby="title-' . $unique_id . '"';
+
+                if ( $args['desc'] ) {
+                        $aria_labelledby = ' aria-labelledby="title-' . $unique_id . ' desc-' . $unique_id . '"';
+                }
         }
 
         // Begin SVG markup.
         $svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . $aria_labelledby . ' role="img">';
 
-        // If there is a title, display it.
+        // Display the title.
         if ( $args['title'] ) {
-                $svg .= '<title>' . esc_html( $args['title'] ) . '</title>';
-        }
+                $svg .= '<title id="title-' . $unique_id . '">' . esc_html( $args['title'] ) . '</title>';
 
-        // If there is a description, display it.
-        if ( $args['desc'] ) {
-                $svg .= '<desc>' . esc_html( $args['desc'] ) . '</desc>';
+                // Display the desc only if the title is already set.
+                if ( $args['desc'] ) {
+                        $svg .= '<desc id="desc-' . $unique_id . '">' . esc_html( $args['desc'] ) . '</desc>';
+                }
         }
 
-        // Use absolute path in the Customizer so that icons show up in there.
-        if ( is_customize_preview() ) {
-                $svg .= '<use xlink:href="' . get_parent_theme_file_uri( '/assets/images/svg-icons.svg#icon-' . esc_html( $args['icon'] ) ) . '"></use>';
-        } else {
-                $svg .= '<use xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use>';
-        }
+        /*
+         * Display the icon.
+         *
+         * The whitespace around `<use>` is intentional. See https://core.trac.wordpress.org/ticket/38387.
+         */
+        $svg .= ' <use xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use> ';
 
         // Add some markup to use as a fallback for browsers that do not support SVGs.
         if ( $args['fallback'] ) {