Changeset 39164 for trunk/src/wp-content/themes/twentyseventeen/inc/icon-functions.php

Timestamp:

11/08/2016 06:00:07 PM (8 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:

• trunk/src/wp-content/themes/twentyseventeen/inc/icon-functions.php (modified) (3 diffs)

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

@@ -50 +50 @@
         'title'       => '',
         'desc'        => '',
-        'aria_hidden' => true, // Hide from screen readers.
         'fallback'    => false,
     );
@@ -58 +57 @@
 
     // 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 . '"';
+        }
     }
 
@@ -74 +86 @@
     $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>';
-    }
-
-    // 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>';
-    }
+        $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>';
+        }
+    }
+
+    /*
+     * 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.