Commit a27cc0f0ff1 for woocommerce
commit a27cc0f0ff1de492bf3585f5c014f90a4b1b5934
Author: Rishabh Gupta <109821717+R1shabh-Gupta@users.noreply.github.com>
Date: Thu Oct 22 15:07:07 2026 +0530
Fix Mini-Cart drawer keyboard focus and accessible labels (#70005)
* Fix Mini-Cart drawer keyboard focus and accessible labels
* test: isolate MiniCart drawer test from leaked constants
Amp-Thread-ID: https://ampcode.com/threads/T-01a162a1-20b2-7481-8ed0-64f9ea76f01d
Co-authored-by: Amp <amp@ampcode.com>
---------
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Amp <amp@ampcode.com>
diff --git a/plugins/woocommerce/changelog/69972-fix-mini-cart-drawer-a11y b/plugins/woocommerce/changelog/69972-fix-mini-cart-drawer-a11y
new file mode 100644
index 00000000000..c096dc67124
--- /dev/null
+++ b/plugins/woocommerce/changelog/69972-fix-mini-cart-drawer-a11y
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Make the closed Mini-Cart drawer unfocusable, give the drawer dialog an accessible name, and make its Close button label translatable.
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php
index 626084c89bc..c6cfb8cf48b 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php
@@ -503,7 +503,9 @@ class MiniCart extends AbstractBlock {
data-wp-bind--role="state.drawerRole"
data-wp-bind--aria-modal="state.isOpen"
data-wp-bind--aria-hidden="!state.isOpen"
+ data-wp-bind--inert="!state.isOpen"
data-wp-bind--tabindex="state.drawerTabIndex"
+ aria-label="<?php esc_attr_e( 'Cart', 'woocommerce' ); ?>"
class="wc-block-mini-cart__drawer wc-block-components-drawer is-mobile"
>
<div class="wc-block-components-drawer__content">
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php
index 7d6e941492d..a687a8dae69 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartContents.php
@@ -64,7 +64,7 @@ class MiniCartContents extends AbstractBlock {
?>
<div <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<div class="wc-block-components-drawer__close-wrapper">
- <button data-wp-on--click="woocommerce/mini-cart::actions.closeDrawer" class="wc-block-components-button wp-element-button wc-block-components-drawer__close contained" aria-label="Close" type="button">
+ <button data-wp-on--click="woocommerce/mini-cart::actions.closeDrawer" class="wc-block-components-button wp-element-button wc-block-components-drawer__close contained" aria-label="<?php esc_attr_e( 'Close', 'woocommerce' ); ?>" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
</svg>
diff --git a/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/MiniCart.php b/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/MiniCart.php
index 400cc6fbb66..2e8037c06da 100644
--- a/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/MiniCart.php
+++ b/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/MiniCart.php
@@ -546,6 +546,35 @@ class MiniCart extends \WP_UnitTestCase {
$this->assertSame( array(), $block_type->view_script_module_ids, 'The view script module must only be enqueued explicitly from render().' );
}
+ /**
+ * Cart/checkout constants defined by other tests cannot be reset in this process.
+ *
+ * @testdox Should keep the closed drawer out of the tab order and the accessibility tree.
+ * @runInSeparateProcess
+ * @preserveGlobalState disabled
+ */
+ public function test_closed_drawer_is_inert_and_hidden(): void {
+ $processor = new \WP_HTML_Tag_Processor( $this->render_overlay() );
+
+ $this->assertTrue( $processor->next_tag( array( 'class_name' => 'wc-block-mini-cart__drawer' ) ), 'The drawer should be rendered.' );
+ $this->assertTrue( $processor->get_attribute( 'inert' ), 'The closed drawer should be inert so its contents are not focusable.' );
+ $this->assertSame( 'true', $processor->get_attribute( 'aria-hidden' ), 'The closed drawer should be hidden from assistive technologies.' );
+ }
+
+ /**
+ * Render the Mini-Cart block and return the overlay markup it prints in the footer.
+ *
+ * @return string
+ */
+ private function render_overlay(): string {
+ $block = parse_blocks( '<!-- wp:woocommerce/mini-cart /-->' );
+ render_block( $block[0] );
+
+ ob_start();
+ $this->mock->render_mini_cart_overlay();
+ return (string) ob_get_clean();
+ }
+
/**
* Return the identifiers of the currently enqueued script modules.
*