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: 'arrow-right', 'title' => __( 'This is the title', 'textdomain' ) ) ); ?> + * + * Example 2 with title and description: '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 = ''; - // If there is a title, display it. + // Display the title. if ( $args['title'] ) { - $svg .= '' . esc_html( $args['title'] ) . ''; + $svg .= '' . esc_html( $args['title'] ) . ''; + + // Display the desc only if the title is already set. + if ( $args['desc'] ) { + $svg .= '' . esc_html( $args['desc'] ) . ''; + } } - // If there is a description, display it. - if ( $args['desc'] ) { - $svg .= '' . esc_html( $args['desc'] ) . ''; - } - - // Use absolute path in the Customizer so that icons show up in there. - if ( is_customize_preview() ) { - $svg .= ''; - } else { - $svg .= ''; - } + /* + * Display the icon. + * + * The whitespace around `` is intentional - it is a work around to a keyboard navigation bug in Safari 10. + * + * See https://core.trac.wordpress.org/ticket/38387. + */ + $svg .= ' '; // 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.