From 35035be00bcc756040ef53362233b5f42430df46 Mon Sep 17 00:00:00 2001
From: "David A. Kennedy" <me@davidakennedy.com>
Date: Tue, 8 Nov 2016 18:01:33 +0000
Subject: [PATCH] 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.

Built from https://develop.svn.wordpress.org/trunk@39164


git-svn-id: http://core.svn.wordpress.org/trunk@39104 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../twentyseventeen/inc/icon-functions.php    | 56 ++++++++++++-------
 wp-includes/version.php                       |  2 +-
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/wp-content/themes/twentyseventeen/inc/icon-functions.php b/wp-content/themes/twentyseventeen/inc/icon-functions.php
index e52602208f..a5df56d6d8 100644
--- a/wp-content/themes/twentyseventeen/inc/icon-functions.php
+++ b/wp-content/themes/twentyseventeen/inc/icon-functions.php
@@ -49,7 +49,6 @@ function twentyseventeen_get_svg( $args = array() ) {
 		'icon'        => '',
 		'title'       => '',
 		'desc'        => '',
-		'aria_hidden' => true, // Hide from screen readers.
 		'fallback'    => false,
 	);
 
@@ -57,38 +56,53 @@ function twentyseventeen_get_svg( $args = array() ) {
 	$args = wp_parse_args( $args, $defaults );
 
 	// Set aria hidden.
-	$aria_hidden = '';
-
-	if ( true === $args['aria_hidden'] ) {
-		$aria_hidden = ' aria-hidden="true"';
-	}
+	$aria_hidden = ' aria-hidden="true"';
 
 	// Set ARIA.
 	$aria_labelledby = '';
 
-	if ( $args['title'] && $args['desc'] ) {
-		$aria_labelledby = ' aria-labelledby="title desc"';
+	/*
+	 * Twenty Seventeen doesn't use the SVG title or description attributes; non-decorative icons are described with .screen-reader-text.
+	 *
+	 * However, child themes can use the title and description to add information to non-decorative SVG icons to improve accessibility.
+	 *
+	 * Example 1 with title: <?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is the title', 'textdomain' ) ) ); ?>
+	 *
+	 * 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' ) ) ); ?>
+	 *
+	 * 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>';
+
+		// Display the desc only if the title is already set.
+		if ( $args['desc'] ) {
+			$svg .= '<desc id="desc-' . $unique_id . '">' . esc_html( $args['desc'] ) . '</desc>';
+		}
 	}
 
-	// If there is a description, display it.
-	if ( $args['desc'] ) {
-		$svg .= '<desc>' . 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 - it is a work around to a keyboard navigation bug in Safari 10.
+	 *
+	 * 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'] ) {
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 906ae68bd1..5a0693f22c 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta2-39163';
+$wp_version = '4.7-beta2-39164';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.