Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Adding missing form field and table header labels to template files (#31211) 

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>
This commit is contained in:
Oliver Juhas 2022-08-08 21:32:51 +02:00 committed by GitHub
parent fe27a9a87c
commit bb02983893
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/fix-accessibility-templates Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Improving accessibility: adding missing form field labels and shop table header cell labels.

4
plugins/woocommerce/templates/cart/cart.php
View File

@ -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>

5
plugins/woocommerce/templates/cart/shipping-calculator.php
View File

@ -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; ?>

1
plugins/woocommerce/templates/checkout/form-coupon.php
View File

@ -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>

2
plugins/woocommerce/templates/content-widget-price-filter.php
View File

@ -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>

3
plugins/woocommerce/templates/single-product/add-to-cart/grouped.php
View File

@ -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' );