Commit f4012cdebe6 for woocommerce
commit f4012cdebe6fb2de7c847e92f729a463968b0a9d
Author: mgiannopoulos24 <79588074+mgiannopoulos24@users.noreply.github.com>
Date: Thu Jun 11 16:39:56 2026 +0300
Accessibility: Add proper ARIA roles and scope attributes to cart table headers (#65364)
* Add proper ARIA roles and scope attributes to cart table headers
* Fix missmatch
* Apply coderabbit suggestion.
* fix: revert product-name cell to td with rowheader role to resolve visual regressions
* Fix test with selector and change version on cart.php
* Fix prettier formatting in cart block test
Collapse the document.querySelector() argument onto a single line to
satisfy prettier/prettier, resolving the lint:lang:js failure in the
@woocommerce/block-library Lint CI job. Pure formatting; the selector
and assertion are unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/accessibility-cart-table-headers b/plugins/woocommerce/changelog/accessibility-cart-table-headers
new file mode 100644
index 00000000000..06fc98579a8
--- /dev/null
+++ b/plugins/woocommerce/changelog/accessibility-cart-table-headers
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Add proper ARIA roles and scope attributes to cart table headers for screen reader accessibility (WCAG 1.3.1)
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
index 7e55fb004af..ab415116f3b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
@@ -271,7 +271,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent<
</a>
) }
</td>
- <td className="wc-block-cart-item__product">
+ <td role="rowheader" className="wc-block-cart-item__product">
<div className="wc-block-cart-item__wrap">
<ProductName
disabled={
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
index 3e00aa9a64e..9996f6222b2 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
@@ -92,13 +92,22 @@ const CartLineItemsTable = ( {
</caption>
<thead>
<tr className="wc-block-cart-items__header">
- <th className="wc-block-cart-items__header-image">
+ <th
+ scope="col"
+ className="wc-block-cart-items__header-image"
+ >
<span>{ __( 'Product', 'woocommerce' ) }</span>
</th>
- <th className="wc-block-cart-items__header-product">
+ <th
+ scope="col"
+ className="wc-block-cart-items__header-product"
+ >
<span>{ __( 'Details', 'woocommerce' ) }</span>
</th>
- <th className="wc-block-cart-items__header-total">
+ <th
+ scope="col"
+ className="wc-block-cart-items__header-total"
+ >
<span>{ __( 'Total', 'woocommerce' ) }</span>
</th>
</tr>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
index 9f0290c431c..a72e8565205 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
@@ -211,9 +211,9 @@ describe( 'Testing cart', () => {
render( <CartBlock /> );
await waitFor( () =>
- expect( screen.getAllByRole( 'cell' )[ 1 ] ).toHaveTextContent(
- '16€'
- )
+ expect(
+ document.querySelector( '.wc-block-cart-item__total' )
+ ).toHaveTextContent( '16€' )
);
} );
diff --git a/plugins/woocommerce/templates/cart/cart.php b/plugins/woocommerce/templates/cart/cart.php
index 8d576beca68..927ec42ee94 100644
--- a/plugins/woocommerce/templates/cart/cart.php
+++ b/plugins/woocommerce/templates/cart/cart.php
@@ -12,7 +12,7 @@
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
- * @version 10.8.0
+ * @version 11.0.0
*/
defined( 'ABSPATH' ) || exit;
@@ -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"><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 scope="col" class="product-remove"><span class="screen-reader-text"><?php esc_html_e( 'Remove item', 'woocommerce' ); ?></span></th>
+ <th scope="col" class="product-thumbnail"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail image', 'woocommerce' ); ?></span></th>
<th scope="col" class="product-name"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
<th scope="col" class="product-price"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
<th scope="col" class="product-quantity"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
@@ -107,7 +107,7 @@ do_action( 'woocommerce_before_cart' ); ?>
?>
</td>
- <td scope="row" role="rowheader" class="product-name" data-title="<?php esc_attr_e( 'Product', 'woocommerce' ); ?>">
+ <td role="rowheader" class="product-name" data-title="<?php esc_attr_e( 'Product', 'woocommerce' ); ?>">
<?php
if ( ! $product_permalink ) {
echo wp_kses_post( $product_name . ' ' );