Merge pull request #49 from alleyinteractive/fix/hidden-sprite

Changes the method with which we hide the sprite

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.3.2
+
+**Changed**
+
+* The SVG Sprite is no longer hidden with `display:none` and instead visually hidden and moved offscreen (#49)
+
 ## 1.3.1
 
 * Check for array key before using when preloading assets (#47).

asset-manager.php

@@ -10,7 +10,7 @@
 Plugin URI: https://github.com/alleyinteractive/wp-asset-manager
 Description: Add more robust functionality to enqueuing static assets
 Author: Alley Interactive
-Version: 1.2.0
+Version: 1.3.2
 License: GPLv2 or later
 Author URI: https://www.alleyinteractive.com/
 */

php/class-asset-manager-svg-sprite.php

@@ -142,7 +142,10 @@ public function setup() {
 		add_filter(
 			'safe_style_css',
 			function( $styles ) {
-				$styles[] = 'display';
+				$styles[] = 'left';
+				$styles[] = 'overflow';
+				$styles[] = 'position';
+				$styles[] = 'visibility';
 				return $styles;
 			}
 		);
@@ -157,7 +160,14 @@ public function create_sprite_sheet() {
 		$this->sprite_document = new DOMDocument();
 
 		$this->svg_root = $this->sprite_document->createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
-		$this->svg_root->setAttribute( 'style', 'display:none' );
+
+		$this->svg_root->setAttribute( 'style', 'left:-9999px;overflow:hidden;position:absolute;visibility:hidden' );
+
+		$this->svg_root->setAttribute( 'focusable', 'false' );
+		$this->svg_root->setAttribute( 'height', '0' );
+		$this->svg_root->setAttribute( 'role', 'none' );
+		$this->svg_root->setAttribute( 'viewBox', '0 0 0 0' );
+		$this->svg_root->setAttribute( 'width', '0' );
 
 		$this->sprite_document->appendChild( $this->svg_root );
 

php/kses-svg.php

@@ -867,6 +867,7 @@
 	),
 	'svg'                 => array_merge(
 		[
+			'focusable'           => true,
 			'height'              => true,
 			'preserveaspectratio' => true,
 			'viewbox'             => true,

tests/test-sprite.php

@@ -4,7 +4,7 @@
 
 class Asset_Manager_Sprite_Tests extends Asset_Manager_Test {
 
-	public $empty_sprite_wrapper = '<svg xmlns="http://www.w3.org/2000/svg" style="display:none">%s</svg>';
+	public $empty_sprite_wrapper = '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" height="0" role="none" style="left:-9999px;overflow:hidden;position:absolute;visibility:hidden" viewBox="0 0 0 0" width="0">%s</svg>';
 
 	/**
 	 * Note: These aren't stright copies of SVG contents; they have been modified