Add alt text to images used in patterns describing their purpose (#9788)

* Add alt text to images used in patterns describing their purpose

* Replace 1/3 notation with 1 out of 3, so it's better handled byt screen readers

Author: kmanijak

patterns/banner.php

@@ -31,7 +31,7 @@
 
 <!-- wp:column {"verticalAlignment":"center"} -->
 <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-home-wall-decoration-shelf-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/></figure>
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-home-wall-decoration-shelf-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a banner.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1"/></figure>
 <!-- /wp:image --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>

patterns/featured-category-cover-image.php

@@ -8,7 +8,7 @@
 <!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0,"y":0},"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-cover alignwide has-custom-content-position is-position-top-left" style="padding-top:2em;padding-right:2.25em;padding-bottom:2.25em;padding-left:2.25em">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-	<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>" style="object-position:0% 0%" data-object-fit="cover" data-object-position="0% 0%"/>
+	<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>" style="object-position:0% 0%" data-object-fit="cover" data-object-position="0% 0%"/>
 
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"lineHeight":"1.5","fontSize":"2.2em","textColor":"background"},"color":{"text":"#ffffff"},"spacing":{"margin":{"bottom":"0px","top":"0px"}}}} -->

patterns/featured-category-focus.php

@@ -8,7 +8,7 @@
 <!-- wp:group {"align":"full","style":{"color":{"background":"#84bfe1"},"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
 <div class="wp-block-group alignfull has-background" style="background-color:#84bfe1;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)">
 	<!-- wp:image {"id":1,"width":502,"height":335,"sizeSlug":"full","linkDestination":"none"} -->
-	<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1" width="502" height="335"/></figure>
+	<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" width="502" height="335"/></figure>
 	<!-- /wp:image -->
 
 	<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}},"fontSize":"large"} -->

patterns/featured-category-triple.php

@@ -8,7 +8,7 @@
 <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"}}}} -->
 <div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"blockGap":"0px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"textColor":"base"} -->
 <div class="wp-block-column has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"style":{"spacing":{"blockGap":"0","padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"}}},"className":"has-base-color has-text-color"} -->
-<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
+<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 1 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
 					<strong>Cupcakes</strong>
 				</p>
@@ -24,7 +24,7 @@
 
 <!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
 <div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0.5,"y":0.5},"contentPosition":"bottom center","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}},"className":"has-contrast-color has-text-color"} -->
-<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-contrast-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png', dirname( __FILE__ ) ) ); ?>" style="object-position:50% 50%" data-object-fit="cover" data-object-position="50% 50%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
+<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-contrast-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 2 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png', dirname( __FILE__ ) ) ); ?>" style="object-position:50% 50%" data-object-fit="cover" data-object-position="50% 50%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
 					<strong>Sweet Danish</strong>
 				</p>
@@ -40,7 +40,7 @@
 
 <!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
 <div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}},"className":"has-base-color has-text-color"} -->
-<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
+<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 3 out of 3', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
 					<strong>Warm Bread</strong>
 				</p>

patterns/hero-product-3-split.php

@@ -36,7 +36,7 @@
 				<!-- /wp:group -->
 			</div>
 			<figure class="wp-block-media-text__media">
-				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/hand-guitar-finger-tshirt-clothing-rack.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-3800 size-full" />
+				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/hand-guitar-finger-tshirt-clothing-rack.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-3800 size-full" />
 			</figure>
 		</div>
 		<!-- /wp:media-text -->

patterns/hero-product-chessboard.php

@@ -14,7 +14,7 @@
 		<div class="wp-block-column">
 			<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/person-winter-blur-wood-girl-woman.png', dirname( __FILE__ ) ) ); ?>","dimRatio":0,"focalPoint":{"x":0.54,"y":0.52},"isDark":false,"style":{"color":{}}} -->
 			<div class="wp-block-cover is-light">
-				<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/person-winter-blur-wood-girl-woman.png', dirname( __FILE__ ) ) ); ?>" style="object-position:54% 52%" data-object-fit="cover" data-object-position="54% 52%"/>
+				<img class="wp-block-cover__image-background" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section. 1 out of 2.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/person-winter-blur-wood-girl-woman.png', dirname( __FILE__ ) ) ); ?>" style="object-position:54% 52%" data-object-fit="cover" data-object-position="54% 52%"/>
 				<div class="wp-block-cover__inner-container">
 				</div>
 			</div>
@@ -120,7 +120,7 @@
 		<div class="wp-block-column is-vertically-aligned-center">
 			<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png', dirname( __FILE__ ) ) ); ?>","dimRatio":0,"focalPoint":{"x":0.33,"y":0.06},"style":{"color":{}}} -->
 			<div class="wp-block-cover">
-				<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png', dirname( __FILE__ ) ) ); ?>" style="object-position:33% 6%" data-object-fit="cover" data-object-position="33% 6%"/>
+				<img class="wp-block-cover__image-background" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section. 2 out of 2.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/man-person-winter-photography-statue-coat.png', dirname( __FILE__ ) ) ); ?>" style="object-position:33% 6%" data-object-fit="cover" data-object-position="33% 6%"/>
 				<div class="wp-block-cover__inner-container">
 				</div>
 			</div>

patterns/hero-product-split.php

@@ -25,7 +25,7 @@
 	</div>
 
 	<figure class="wp-block-media-text__media">
-		<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/pattern-fashion-clothing-outerwear-wool-scarf.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Woman in red, black, and white plaid hoodie.', 'woo-gutenberg-products-block' ); ?>" />
+		<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/pattern-fashion-clothing-outerwear-wool-scarf.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section.', 'woo-gutenberg-products-block' ); ?>" />
 	</figure>
 </div>
 <!-- /wp:media-text -->

patterns/product-collections-featured-collections.php

@@ -28,13 +28,13 @@
 		<div class="wp-block-group">
 			<!-- wp:image {"width":140,"sizeSlug":"full","linkDestination":"none"} -->
 			<figure class="wp-block-image size-full is-resized">
-				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/technology-white-camera-photography-vintage-photographer.png', dirname( __FILE__ ) ) ); ?>" alt="" width="140" />
+				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/technology-white-camera-photography-vintage-photographer.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a left side of a banner. 1 out of 2.', 'woo-gutenberg-products-block' ); ?>" width="140" />
 			</figure>
 			<!-- /wp:image -->
 
 			<!-- wp:image {"width":140,"height":100,"sizeSlug":"full","linkDestination":"none"} -->
 			<figure class="wp-block-image size-full is-resized">
-				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/leather-guitar-typewriter-red-gadget-sofa.png', dirname( __FILE__ ) ) ); ?>" alt="" width="140" height="100" />
+				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/leather-guitar-typewriter-red-gadget-sofa.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a left side of a banner. 2 out of 2.', 'woo-gutenberg-products-block' ); ?>" width="140" height="100" />
 			</figure>
 			<!-- /wp:image -->
 		</div>
@@ -62,13 +62,13 @@
 		<div class="wp-block-group">
 			<!-- wp:image {"width":140,"height":100,"sizeSlug":"full","linkDestination":"none"} -->
 			<figure class="wp-block-image size-full is-resized">
-				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/music-technology-play-equipment-studio-gadget.png', dirname( __FILE__ ) ) ); ?>" alt="" width="140" height="100" />
+				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/music-technology-play-equipment-studio-gadget.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a right side of a banner. 1 out of 2.', 'woo-gutenberg-products-block' ); ?>" width="140" height="100" />
 			</figure>
 			<!-- /wp:image -->
 
 			<!-- wp:image {"width":140,"height":100,"sizeSlug":"full","linkDestination":"none"} -->
 			<figure class="wp-block-image size-full is-resized">
-				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/technology-joystick-gadget-console-games-playstation.png', dirname( __FILE__ ) ) ); ?>" alt="" width="140" height="100" />
+				<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/technology-joystick-gadget-console-games-playstation.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a right side of a banner. 2 out of 2.', 'woo-gutenberg-products-block' ); ?>" width="140" height="100" />
 			</figure>
 			<!-- /wp:image -->
 		</div>

patterns/product-details-listing.php

@@ -11,7 +11,7 @@
 	<div class="wp-block-column" style="padding:0">
 		<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
 		<figure class="wp-block-image size-full">
-			<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-wood-chair-floor-living-room-furniture-horizontal.png', dirname( __FILE__ ) ) ); ?>" alt="" />
+			<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/table-wood-chair-floor-living-room-furniture-horizontal.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a product banner.', 'woo-gutenberg-products-block' ); ?>" />
 		</figure>
 		<!-- /wp:image -->
 		<!-- wp:group {"align":"full","style":{"spacing":{"padding":"0px","blockGap":"0px","margin":{"top":"30px","bottom":"20px","left":"0px"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center","verticalAlignment":"center"}} -->