Changeset 44942

Timestamp:

03/20/2019 05:21:56 PM (6 years ago)

Author:

afercia

Message:

Accessibility: Ensure embed iframes have a title attribute.

Screen reader users rely on the iframe title attribute to describe the contents of iframes. A meaningful title attribute allows to quickly identify the iframe content, so users can determine which iframe to enter and explore in detail or skip if desired.
Note: this is the only case where a title attribute is required for compliance with the W3C Web Content Accessibility Guidelines (WCAG).

• checks for oEmbed response of type video or rich
• checks if they use an iframe
• fetches the title (if any) from the oEmbed response
• adds the title to the embed iframe

Props bamadesigner, TomHarrigan, swissspidy, jrf, afercia.
Fixes #40245.

Location:

trunk

Files:

• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/embed.php (modified) (1 diff)
• tests/phpunit/tests/oembed/filterTitleAttributes.php (added)
• tests/qunit/fixtures/wp-api-generated.js (modified) (1 diff)

trunk/src/wp-includes/default-filters.php

@@ -574 +574 @@
 
 add_filter( 'oembed_dataparse', 'wp_filter_oembed_result', 10, 3 );
+add_filter( 'oembed_dataparse', 'wp_filter_oembed_iframe_title_attribute', 20, 3 );
 add_filter( 'oembed_response_data', 'get_oembed_response_data_rich', 10, 4 );
 add_filter( 'pre_oembed_result', 'wp_filter_pre_oembed_result', 10, 3 );

trunk/src/wp-includes/embed.php

@@ -780 +780 @@
     return $node->asXML();
 }
+
+/**
+ * Filters the given oEmbed HTML to make sure iframes have a title attribute.
+ *
+ * @since 5.2.0
+ *
+ * @param string $result The oEmbed HTML result.
+ * @param object $data   A data object result from an oEmbed provider.
+ * @param string $url    The URL of the content to be embedded.
+ * @return string The filtered oEmbed result.
+ */
+function wp_filter_oembed_iframe_title_attribute( $result, $data, $url ) {
+    if ( false === $result || ! in_array( $data->type, array( 'rich', 'video' ) ) ) {
+        return $result;
+    }
+
+    $title = ! empty( $data->title ) ? $data->title : '';
+
+    $pattern        = '`<iframe[^>]*?title=(\\\\\'|\\\\"|[\'"])([^>]*?)\1`i';
+    $has_title_attr = preg_match( $pattern, $result, $matches );
+
+    if ( $has_title_attr && ! empty( $matches[2] ) ) {
+        $title = $matches[2];
+    }
+
+    /**
+     * Filters the title attribute of the given oEmbed HTML iframe.
+     *
+     * @since 5.2.0
+     *
+     * @param string $title  The title attribute.
+     * @param string $result The oEmbed HTML result.
+     * @param object $data   A data object result from an oEmbed provider.
+     * @param string $url    The URL of the content to be embedded.
+     */
+    $title = apply_filters( 'oembed_iframe_title_attribute', $title, $result, $data, $url );
+
+    if ( '' === $title ) {
+        return $result;
+    }
+
+    if ( $has_title_attr ) {
+        // Remove the old title, $matches[1]: quote, $matches[2]: title attribute value.
+        $result = str_replace( ' title=' . $matches[1] . $matches[2] . $matches[1], '', $result );
+    }
+
+    return str_ireplace( '<iframe ', sprintf( '<iframe title="%s" ', esc_attr( $title ) ), $result );
+}
+
 
 /**

trunk/tests/qunit/fixtures/wp-api-generated.js

@@ -4989 +4989 @@
     "width": 500,
     "thumbnail_height": 360,
-    "html": "<iframe width=\"500\" height=\"375\" src=\"https://www.youtube.com/embed/i_cVJgIz_Cs?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>",
+    "html": "<iframe title=\"No te olvides de poner el Where en el Delete From. (Una cancion para programadores)\" width=\"500\" height=\"375\" src=\"https://www.youtube.com/embed/i_cVJgIz_Cs?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>",
     "author_name": "Jorge Rubira Santos",
     "thumbnail_url": "https://i.ytimg.com/vi/i_cVJgIz_Cs/hqdefault.jpg",