From bb0298389394588e09eac1563ee28d625734ff77 Mon Sep 17 00:00:00 2001
From: Oliver Juhas <webmandesign@users.noreply.github.com>
Date: Mon, 8 Aug 2022 21:32:51 +0200
Subject: [PATCH] Accessibility: Adding missing form field and table header
 labels to template files (#31211)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add screen reader labels to improve accessibility in various locations.

* Adding missing table header labels
* Adding missing form field labels
* Adding missing form field label
* Adding missing form field labels — Ideally we would add these with `<labe>` tag (may be hidden with `screen-reader-text` class), but playing safe here to prevent CSS style issues.
* Adding missing form field label
* Changing `aria-label` attribute to actual `<label>` tag
* Rebase; add changelog.

Co-authored-by: barryhughes <3594411+barryhughes@users.noreply.github.com>
---
 plugins/woocommerce/changelog/fix-accessibility-templates    | 4 ++++
 plugins/woocommerce/templates/cart/cart.php                  | 4 ++--
 plugins/woocommerce/templates/cart/shipping-calculator.php   | 5 +++++
 plugins/woocommerce/templates/checkout/form-coupon.php       | 1 +
 .../woocommerce/templates/content-widget-price-filter.php    | 2 ++
 .../templates/single-product/add-to-cart/grouped.php         | 3 ++-
 6 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-accessibility-templates

diff --git a/plugins/woocommerce/changelog/fix-accessibility-templates b/plugins/woocommerce/changelog/fix-accessibility-templates
new file mode 100644
index 00000000000..0f97bf66166
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-accessibility-templates
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Improving accessibility: adding missing form field labels and shop table header cell labels.
diff --git a/plugins/woocommerce/templates/cart/cart.php b/plugins/woocommerce/templates/cart/cart.php
index adf15ed624e..a40f202b5d5 100644
--- a/plugins/woocommerce/templates/cart/cart.php
+++ b/plugins/woocommerce/templates/cart/cart.php
@@ -25,8 +25,8 @@ do_action( 'woocommerce_before_cart' ); ?>
 	<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
 		<thead>
 			<tr>
-				<th class="product-remove">&nbsp;</th>
-				<th class="product-thumbnail">&nbsp;</th>
+				<th class="product-remove"><span class="screen-reader-text"><?php esc_html_e( 'Remove item', 'woocommerce' ); ?></span></th>
+				<th class="product-thumbnail"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail image', 'woocommerce' ); ?></span></th>
 				<th class="product-name"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
 				<th class="product-price"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
 				<th class="product-quantity"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
diff --git a/plugins/woocommerce/templates/cart/shipping-calculator.php b/plugins/woocommerce/templates/cart/shipping-calculator.php
index 3cd4402b442..09c0c984f01 100644
--- a/plugins/woocommerce/templates/cart/shipping-calculator.php
+++ b/plugins/woocommerce/templates/cart/shipping-calculator.php
@@ -27,6 +27,7 @@ do_action( 'woocommerce_before_shipping_calculator' ); ?>
 
 		<?php if ( apply_filters( 'woocommerce_shipping_calculator_enable_country', true ) ) : ?>
 			<p class="form-row form-row-wide" id="calc_shipping_country_field">
+				<label for="calc_shipping_country" class="screen-reader-text"><?php esc_html_e( 'Country / region:', 'woocommerce' ); ?></label>
 				<select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state country_select" rel="calc_shipping_state">
 					<option value="default"><?php esc_html_e( 'Select a country / region&hellip;', 'woocommerce' ); ?></option>
 					<?php
@@ -52,6 +53,7 @@ do_action( 'woocommerce_before_shipping_calculator' ); ?>
 				} elseif ( is_array( $states ) ) {
 					?>
 					<span>
+						<label for="calc_shipping_state" class="screen-reader-text"><?php esc_html_e( 'State / County:', 'woocommerce' ); ?></label>
 						<select name="calc_shipping_state" class="state_select" id="calc_shipping_state" data-placeholder="<?php esc_attr_e( 'State / County', 'woocommerce' ); ?>">
 							<option value=""><?php esc_html_e( 'Select an option&hellip;', 'woocommerce' ); ?></option>
 							<?php
@@ -64,6 +66,7 @@ do_action( 'woocommerce_before_shipping_calculator' ); ?>
 					<?php
 				} else {
 					?>
+					<label for="calc_shipping_state" class="screen-reader-text"><?php esc_html_e( 'State / County:', 'woocommerce' ); ?></label>
 					<input type="text" class="input-text" value="<?php echo esc_attr( $current_r ); ?>" placeholder="<?php esc_attr_e( 'State / County', 'woocommerce' ); ?>" name="calc_shipping_state" id="calc_shipping_state" />
 					<?php
 				}
@@ -73,12 +76,14 @@ do_action( 'woocommerce_before_shipping_calculator' ); ?>
 
 		<?php if ( apply_filters( 'woocommerce_shipping_calculator_enable_city', true ) ) : ?>
 			<p class="form-row form-row-wide" id="calc_shipping_city_field">
+				<label for="calc_shipping_city" class="screen-reader-text"><?php esc_html_e( 'City:', 'woocommerce' ); ?></label>
 				<input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_shipping_city() ); ?>" placeholder="<?php esc_attr_e( 'City', 'woocommerce' ); ?>" name="calc_shipping_city" id="calc_shipping_city" />
 			</p>
 		<?php endif; ?>
 
 		<?php if ( apply_filters( 'woocommerce_shipping_calculator_enable_postcode', true ) ) : ?>
 			<p class="form-row form-row-wide" id="calc_shipping_postcode_field">
+				<label for="calc_shipping_postcode" class="screen-reader-text"><?php esc_html_e( 'Postcode / ZIP:', 'woocommerce' ); ?></label>
 				<input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_shipping_postcode() ); ?>" placeholder="<?php esc_attr_e( 'Postcode / ZIP', 'woocommerce' ); ?>" name="calc_shipping_postcode" id="calc_shipping_postcode" />
 			</p>
 		<?php endif; ?>
diff --git a/plugins/woocommerce/templates/checkout/form-coupon.php b/plugins/woocommerce/templates/checkout/form-coupon.php
index bca033618fa..83e5e3cdaab 100644
--- a/plugins/woocommerce/templates/checkout/form-coupon.php
+++ b/plugins/woocommerce/templates/checkout/form-coupon.php
@@ -31,6 +31,7 @@ if ( ! wc_coupons_enabled() ) { // @codingStandardsIgnoreLine.
 	<p><?php esc_html_e( 'If you have a coupon code, please apply it below.', 'woocommerce' ); ?></p>
 
 	<p class="form-row form-row-first">
+		<label for="coupon_code" class="screen-reader-text"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>
 		<input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" id="coupon_code" value="" />
 	</p>
 
diff --git a/plugins/woocommerce/templates/content-widget-price-filter.php b/plugins/woocommerce/templates/content-widget-price-filter.php
index a491d343fc1..30610410ede 100644
--- a/plugins/woocommerce/templates/content-widget-price-filter.php
+++ b/plugins/woocommerce/templates/content-widget-price-filter.php
@@ -24,7 +24,9 @@ defined( 'ABSPATH' ) || exit;
 	<div class="price_slider_wrapper">
 		<div class="price_slider" style="display:none;"></div>
 		<div class="price_slider_amount" data-step="<?php echo esc_attr( $step ); ?>">
+			<label class="screen-reader-text" for="min_price"><?php esc_html_e( 'Min price', 'woocommerce' ); ?></label>
 			<input type="text" id="min_price" name="min_price" value="<?php echo esc_attr( $current_min_price ); ?>" data-min="<?php echo esc_attr( $min_price ); ?>" placeholder="<?php echo esc_attr__( 'Min price', 'woocommerce' ); ?>" />
+			<label class="screen-reader-text" for="max_price"><?php esc_html_e( 'Max price', 'woocommerce' ); ?></label>
 			<input type="text" id="max_price" name="max_price" value="<?php echo esc_attr( $current_max_price ); ?>" data-max="<?php echo esc_attr( $max_price ); ?>" placeholder="<?php echo esc_attr__( 'Max price', 'woocommerce' ); ?>" />
 			<?php /* translators: Filter: verb "to filter" */ ?>
 			<button type="submit" class="button"><?php echo esc_html__( 'Filter', 'woocommerce' ); ?></button>
diff --git a/plugins/woocommerce/templates/single-product/add-to-cart/grouped.php b/plugins/woocommerce/templates/single-product/add-to-cart/grouped.php
index fb6fff7a6fc..719eb22165f 100644
--- a/plugins/woocommerce/templates/single-product/add-to-cart/grouped.php
+++ b/plugins/woocommerce/templates/single-product/add-to-cart/grouped.php
@@ -63,7 +63,8 @@ do_action( 'woocommerce_before_add_to_cart_form' ); ?>
 							if ( ! $grouped_product_child->is_purchasable() || $grouped_product_child->has_options() || ! $grouped_product_child->is_in_stock() ) {
 								woocommerce_template_loop_add_to_cart();
 							} elseif ( $grouped_product_child->is_sold_individually() ) {
-								echo '<input type="checkbox" name="' . esc_attr( 'quantity[' . $grouped_product_child->get_id() . ']' ) . '" value="1" class="wc-grouped-product-add-to-cart-checkbox" />';
+								echo '<input type="checkbox" name="' . esc_attr( 'quantity[' . $grouped_product_child->get_id() . ']' ) . '" value="1" class="wc-grouped-product-add-to-cart-checkbox" id="' . esc_attr( 'quantity-' . $grouped_product_child->get_id() ) . '" />';
+								echo '<label for="' . esc_attr( 'quantity-' . $grouped_product_child->get_id() ) . '" class="screen-reader-text">' . esc_html__( 'Buy one of this item', 'woocommerce' ) . '</label>';
 							} else {
 								do_action( 'woocommerce_before_add_to_cart_quantity' );